Intent to Implement and Ship: Percentage opacity

[Eric Willigers]

Contact emails

hanle...@gmail.com

ericwi...@chromium.org

Explainer
N/A


Design docs/spec
Specification: https://www.w3.org/TR/css-color-4/#transparency

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


TAG review
Browsers are already shipping other parts of the Color 4 spec, for example percentage alpha value in rgba()


Summary
The opacity properties (opacity, stop-opacity, fill-opacity, stroke-opacity) and shape-image-threshold now accept percentage values.


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#StrokeOpacityProperty)

'shape-image-threshold' (https://drafts.csswg.org/css-shapes-1/#shape-image-threshold-property)


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


Risks


Interoperability and Compatibility

Minimal as this has been in the spec for some time and has been confirmed with the CSS Working Group


Firefox: Public support (https://github.com/w3c/csswg-drafts/issues/3342#issuecomment-505958044)
"Reasonable."


Edge: No public signals

Safari: Public support (https://github.com/w3c/csswg-drafts/issues/3342#issuecomment-505958044)

"We're happy to adopt. % opacity is good in every context"


Web developers: No signals



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,

Chrome OS, Android, and Android WebView)?

Yes


Is this feature fully tested by web-platform-tests?

Yes it will be.
css/css-color/parsing/opacity-valid.html
css/css-color/parsing/opacity-computed.html
(and equivalent for the other 4 properties)
will show that percentages are accepted, and serialize as numbers.



Tracking bug

https://crbug.com/907787


Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/5167940859068416

[Philip Jägenstedt]

Sounds like a straightforward improvement for web developers and has support from other vendors, LGTM1.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/edce0749-62fd-49cc-be33-c63e4222f515%40chromium.org.

[fri...@jeka.info]

Am Donnerstag, 25. Juli 2019 22:24:05 UTC+2 schrieb Eric Willigers:

Firefox: Public support (https://github.com/w3c/csswg-drafts/issues/3342#issuecomment-505958044)
"Reasonable."

This is fixed for Firefox 70

https://bugzilla.mozilla.org/show_bug.cgi?id=1562086

https://bugzilla.mozilla.org/show_bug.cgi?id=1568615

[Adam Argyle]

😍👍

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/7f31b647-0ecf-4c4d-9d65-ecbf471b465a%40chromium.org.

--

Adam Argyle UI/UX/CSS Developer Advocate Seattle, WA

[TAMURA, Kent]

LGTM2.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYeBVJNz_3rBPbozcMuquktKG3gDGhpubqFc1_oGtayFDw%40mail.gmail.com.

--

TAMURA Kent
Software Engineer, Google

[Chris Harrelson]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqFJpW46HU4jed8ZF-a9q8tp97WrQG7FunPRJ7z5cr0YXQ%40mail.gmail.com.