I found this W3C proposal for CSS variables and was wondering if any modern browsers (i.e. IE7+, Firefox 5+, Chrome) implement them yet?
CSS Variables (Custom Properties) on Chrome is fully supported on 49-106, partially supported on None of the versions, and not supported on 4-48 Chrome versions. CSS Variables (Custom Properties) on Safari is fully supported on 10-16, partially supported on 9.1-9.1, and not supported on 3.2-9 Safari versions.
CSS Variables (Custom Properties) is Fully Supported on Safari 14, which means that any user who'd be accessing your page through Safari 14 can see it perfectly.
For common areas of the Firefox interface (panels, toolbar buttons, etc.), mozilla-central often comes with some useful CSS variables that are adjusted with the correct values for different platform configurations, so using those CSS variables can definitively save some testing time, as you can assume they already work ...
This is great because you can change the value of a CSS variable inside a media query or when an element matches a CSS selector. Using the same variable we can have different values in different places on the page. You can even read and manipulate CSS variables with JavaScript.
As of this week, WebKit -- which is used by Safari and Chrome -- will be working to implement CSS variables.
http://trac.webkit.org/changeset/120154
https://developer.mozilla.org/en/CSS_Reference
This is a reference to MDN - they do a pretty good job of listing known browser compatibility. What is/isn't possible is going to be dependent upon each individual css rule. The world of web development would be a lot easier if everything followed the specs perfectly; but that is rarely the case. The @variables rule you referenced isn't listed there, so I'm guessing you're out of luck. Though there are a lot of mobile browsers coming out as people keep buying newer phones - so you might find somewhere that can use this out in the wild world of mobile browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With