Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are CSS variables implemented in any modern browser? [closed]

Tags:

html

css

I found this W3C proposal for CSS variables and was wondering if any modern browsers (i.e. IE7+, Firefox 5+, Chrome) implement them yet?

like image 553
oneadvent Avatar asked Aug 18 '11 22:08

oneadvent


People also ask

Are CSS variables supported on all browsers?

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.

Do CSS variables work in Safari?

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.

Does Firefox support CSS variables?

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 ...

Is it good practice to use CSS variables?

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.


2 Answers

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

like image 92
user1456910 Avatar answered Oct 13 '22 17:10

user1456910


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.

like image 38
Dave Avatar answered Oct 13 '22 18:10

Dave