Percentage opacity

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 78)
Intent stage: Evaluate readiness to ship

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: Tests css/css-color/parsing/opacity-valid.html css/css-color/parsing/opacity-computed.html will show that percentages are accepted, and serialize as numbers.

Summary

Adds support for percentage values to the opacity properties, specifically, opacity, stop-opacity, fill-opacity, stroke-opacity, and shape-image-threshold. For example, opacity: 50%; is equivalent to opacity: 0.5; https://drafts.csswg.org/css-color/#transparency

Motivation

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

Standards & signals

Specification: https://www.w3.org/TR/css-color-4/#transparency
Firefox: Shipped/Shipping — Reasonable.
Safari: Positive — We're happy to adopt. % opacity is good in every context
Web developers: No signals
Tracking bug: https://crbug.com/907787

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-color%2Fparsing%2Fopacity-valid
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Percentage%20opacity
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Percentage%20opacity
Baseline status: https://webstatus.dev/?q=Percentage%20opacity

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

View on chromestatus.com