CSS Variables in Firefox 29

http://jan.rs/blog/2014/05/03/css-variables-firefox-29/

by reimersjan • 12 years ago

56 30 12 years ago

neals• 12 years ago

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.

reimersjan2• 12 years ago

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

TazeTSchnitzel• 12 years ago

LESS and co. can't implement this, because CSS variables are cascading.

thefreeman• 12 years ago

The good news is that at least now a large majority of users are on browsers with auto update. So once the spec is finalized and browsers start to enable it by default you should get a pretty large % of users who will support it.

You will likely have to have a separate stylesheet for older versions of IE (and possibly other browsers) but honestly you likely have that anyway. And it's a lot easier to update a few values in that then throughout your entire site.

We'll see how it plays out but I certainly wouldn't expect to use them in production for quite a while yet. I'm sure that is why they hid it behind an about:config option for now.

gotofritz• 12 years ago

No, people will carry on using SASS until support for this feature is well and truly widespread.

nperson• 12 years ago

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.

heycam2• 12 years ago

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); }

reimersjan2• 12 years ago

thanks for the hint. i will update my demo asap

userbinator2• 12 years ago

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/

kijin2• 12 years ago

Who comes up with these weird syntaxes? First it was var-foo, now it's --foo. What's next, \foo?

"--" is almost universally used as a decrementing operator, and it's also a common prefix for verbose shell options. Just because you're now working with a different language doesn't mean that you are free to repurpose other languages' operators for entirely unrelated purposes. It's just a recipe for confusion, not to mention it's ugly.

I thought I'd seen the worst when PHP picked backslash as the namespace separator. Now it's just getting crazy. Why couldn't they just pick a normal sigil that everyone already understands, like the dollar sign?

zoul• 12 years ago

You can’t simply pick a syntax. You have to choose something that plays well with older CSS parsers.

ape4• 12 years ago

I agree, that is terrible. In html we already have comments with

heycam2• 12 years ago

As pornel pointed out, CSS Variables are really custom properties that cascade and inherit just like regular properties. Since "$" is used by CSS preprocessors for variables that work in a different way, I think Tab felt that it would cause too much confusion to use the same symbol. The set of remaining ASCII non-alphabetic characters that CSS doesn't use is pretty small too; perhaps "$" is slated for use by some other feature.

There's also a desire in the WG to have a consistent naming scheme for custom CSS things, including custom media queries, custom pseudo-classes to use in selectors, etc. "--" is something that doesn't scream "variables" and so would be usable for those other things.

benschwarz• 12 years ago

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

userbinator2• 12 years ago

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.

pornel2• 12 years ago

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.

ufo• 12 years ago

Can you give an example of a situation where you would rather have cascading variables than lexical scope?

pjmlp• 12 years ago

Less dependency on third party tooling.

Many companies are weary of extra dependencies on their developer tooling.

transfire• 12 years ago

What a sad joke. Maybe one day the W3C will get a clue and do this: http://gridstylesheets.org/. But I won't be holding my breath.

err4nt2• 12 years ago

Not having constraint-based algorithms isn't what's holding CSS back, if we used @media queries on the widths of elements themselves instead of browser dimensions we could implement really REALLY advanced layouts with the CSS we already have.

I wish I could do CSS like this:

.container .headline { font-size: 14pt; }

@media .container (min-width > 500px) {

  .headline {
    font-size: 18pt;
  }

}

@media .container (min-width > 900px) {

  .headline {
    font-size: 24pt;
  }

}

I don't really care how wide the browser itself is. I don't care how big the device is or the orientation. If I know in the layout this element is going to be squished below 300px at some point,easily let me make styles for when that ELEMENT is below 300px and I can build layouts that will look pixel-perfect at any size on any screen

No GSS or constraint-based languages necessary

joaren2• 12 years ago

So how do you make it so that text always sizes to fit its container, vertically and horizontally? i.e. Sliding font size and letter spacing. Pixel perfect on any screen?

snird• 12 years ago

Here is the pen with the updated syntax for CSS variables, for those who run Firefox aurora (31) where it is updated and enabled by default: http://codepen.io/snirda/pen/vnDkb

kanu• 12 years ago

Cool Jan :)

CSS Variables in Firefox 29

Related Stories