Percentage opacity

Adds support for percentage values to the opacity properties, specifically, opacity, stop-opacity, fill-opacity, and stroke-opacity. For example, opacity: 50%; is equivalent to opacity: 0.5; 'opacity' (https://drafts.csswg.org/css-color/#transparency) 'stop-opacity' (https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty) 'fill-opacity' (https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty) 'stroke-opacity' (https://svgwg.org/svg2-draft/painting.html#StrokeOpaci

This brings consistency and spec compliance. The rgba() function already accepts percentage alpha value, for example rgba(0, 255, 0, 50%).

Documentation

• https://www.w3.org/TR/css-color-4/#transparency
• https://www.w3.org/TR/css-color-4/#typedef-alpha-value

Specification

Working draft or equivalent

Status in Chromium

Blink components: Blink>CSS

In development (tracking bug)

Consensus & Standardization

• Firefox: Public support
• Edge: No public signals
• Safari: Public support
• Web Developers: No signals

Owners

• hanlee.dev@gmail.com
• ericwilligers@chromium.org

Last updated on 2019-06-27