Summary:
The basic CSS attr() function has been supported since Firefox 1 <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/attr#browser_compatibility>; however, support for it has been limited to the content property. With advanced attr(), we extend its support to any CSS property, including registered and unregistered custom properties. This is facilitated by supporting a wider range of data types <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/attr#attr-type> like length and color: - width: attr(data-foo type(<length>)); - background-color: attr(data-foo type(<color>)); - --x: attr(data-foo px); See example usages on MDN <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/attr#color_value> . We are aiming to have advanced attr() enabled on Nightly today. Please feel free to let us know if you have any questions or concerns. Bug: Bug 435426 - (css-attr) [meta] <https://bugzilla.mozilla.org/show_bug.cgi?id=435426>Specification: https://drafts.csswg.org/css-values-5/#attr-notation Standards Body: CSSWG / W3C Platform coverage: All. Preference: <https://searchfox.org/mozilla-central/source/modules/libpref/init/StaticPrefList.yaml#8340> layout.css.attr.enabled <https://searchfox.org/firefox-main/rev/cf6415620d92de30e1e1a413ef98b58684eb160e/modules/libpref/init/StaticPrefList.yaml#10339> (Bug 2038939 <https://bugzilla.mozilla.org/show_bug.cgi?id=2038939> to enable on Nightly) DevTools bug: https://bugzilla.mozilla.org/show_bug.cgi?id=2003735 *Extensions bug*: N/A *Use counter*: N/A - existing content: attr() usage would show up a lot, which dilutes the useful signal. Link to standards-positions discussion: https://github.com/mozilla/standards-positions/issues/1143 Other browsers: - Blink 133 – shipped <https://groups.google.com/a/chromium.org/g/blink-dev/c/2dNLhQN9SNs/m/f9Rib2ZKAQAJ> - WebKit – enabled as preview <https://webkit.org/blog/17934/release-notes-for-safari-technology-preview-242/> (STP 242) web-platform-tests: https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=css-values%2Fattr -- You received this message because you are subscribed to the Google Groups "[email protected]" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/b0bf5935-1706-404a-825d-4689d5f5d228n%40mozilla.org.
