CSS Variables in Firefox 29

#1

Post by reimersjan » Sat, May 03, 2014, 9:12 AM UTC

Re: CSS Variables in Firefox 29

#2

Post by neals » Sat, May 03, 2014, 9:57 AM UTC

I wasn't paying attention the last time we had some awesome additions to CSS. How does something like this get adapted?

Do developers actually only use this on FF29+ until all browser adapt? Is this one of those things where we will see workarounds for older browser for decades to come?

Or is this more something that CSS frameworks like LESS pick up and the actual thing is abstracted away for a couple of years still?

This does seem like a very useful feature.

Re: CSS Variables in Firefox 29

#3

Post by reimersjan » Sat, May 03, 2014, 10:20 AM UTC

neals wrote: post #2

I wasn't paying attention the last time we had some awesome additions to CSS. How does something like this get adapted? Do developers actually only use this on FF29+ until all browser adapt? Is this one of those things where we will see workarounds for older browser for decades to come? Or is this more something that CSS frameworks like LESS pick up and the actual thing is abstracted away for a couple of years still?…

According to caniuse, the global support for variables is 0.01% right now. http://caniuse.com/#search=variables

I think it will take some time until there is enough browser support to use variables on a productive site. but maybe browsers will implement this faster... there's hope

Re: CSS Variables in Firefox 29

#4

Post by nperson » Sat, May 03, 2014, 10:21 AM UTC

It used to be possible to enable CSS variables support via chrome://flags' #enable-experimental-web-platform-features in previous Chrome builds. Support has since gone again. Hoping for a reappearance soon.

CSS Variables in combination with an additional build step[1] is actually quite usable right now.

[1] https://github.com/segmentio/myth

Edit: The introduction of the new notation as mentioned by heycam, explains Chrome's behavior a bit.

Re: CSS Variables in Firefox 29

#5

Post by heycam » Sat, May 03, 2014, 10:21 AM UTC

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this:

:root { --spacing: 16px; }

and reference them like this:

body { padding: var(--spacing); }

Re: CSS Variables in Firefox 29

#6

Post by reimersjan » Sat, May 03, 2014, 10:24 AM UTC

heycam wrote: post #5

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

thanks for the hint. i will update my demo asap

Re: CSS Variables in Firefox 29

#7

Post by benschwarz » Sat, May 03, 2014, 10:27 AM UTC

Chrome / Blink has pulled the implementation for now because of changes to the spec / poor implementation. It'll come back (in time).

Ref to feature being removed: https://groups.google.com/a/chromium.org/forum/#!topic/blink...

Right now, Firefox 29, Aurora and Nightly are the only browsers that have CSS Variables shipped. (Although, there is still no CSSOM implementation present — that'll come later.)

Re: CSS Variables in Firefox 29

#8

Post by userbinator » Sat, May 03, 2014, 10:33 AM UTC

After looking at the spec, I'm wondering does this really save anything for the client, vs. doing this in a CSS preprocessor? Instead of spending the time compiling once and then having clients interpret declarations, every single user who visits the site will have their browser perform the same computation, every time they visit a page that uses these. It's also another source of significant complexity to the browser.

Re: CSS Variables in Firefox 29

#9

Post by pornel » Sat, May 03, 2014, 10:37 AM UTC

userbinator wrote: post #8

After looking at the spec, I'm wondering does this really save anything for the client, vs. doing this in a CSS preprocessor? Instead of spending the time compiling once and then having clients interpret declarations, every single user who visits the site will have their browser perform the same computation, every time they visit a page that uses these . It's also another source of significant complexity to the brows…

CSS Variables are a misnomer. They're custom properties that obey cascade and inheritance.

CSS preprocessors can do only lexically scoped substitutions. With CSS "variables" you can have values inherited within DOM's scope.

Re: CSS Variables in Firefox 29

#10

Post by userbinator » Sat, May 03, 2014, 10:39 AM UTC

heycam wrote: post #5

Please note that the final syntax for CSS Variables changed recently, so in Firefox 31 and later, where the feature is enabled by default, you declare variables like this: :root { --spacing: 16px; } and reference them like this: body { padding: var(--spacing); }

I think this is the latest version, and it does show "--" syntax - it's still a work in progress though: http://dev.w3.org/csswg/css-variables/