8 ms·
CSS Variables in Firefox 31 – new syntax
- ihuman 12y agoDoes anyone know if the var() function only work with the variables? For example, can I do something like: background-color: var(color);?
- ahoge 12y agoDoesn't work. http://jsfiddle.net/QEJw9/ http://jsfiddle.net/QEJw9/
- bouncingsoul 12y agoIn case you didn't know, there's already a special version of the `inherit` keyword for using the color value in other properties: background-color: currentColor; Fully supported in all modern browsers. http://devdocs.io/css/color_value#currentColor_keyword http://devdocs.io/css/color_value#currentColor_keyword
- bshimmin 12y agoThat new syntax is astonishingly ugly and bizarre. I'm sure it'll be a real joy to use that for anyone who's been using Sass or Less (and who doesn't, these days...).
- galvin 12y agoYeah, obviously they need to avoid conflicts but surely they could have found a single character to use as a prefix instead of "--", like "$" or "@". The "var()" function is just.. redundant. Or maybe I'm missing something?
- colinramsay 12y agoHere's the discussion where they changed from "var-" to "--": http://lists.w3.org/Archives/Public/www-style/2014Mar/0261.html http://lists.w3.org/Archives/Public/www-style/2014Mar/0261.h... And later on the justification for not using $ or @: http://lists.w3.org/Archives/Public/www-style/2014Mar/0400.html http://lists.w3.org/Archives/Public/www-style/2014Mar/0400.h... There's also the issue that this needs to be backwards compatible with parsers that don't support the syntax, and apparently because the variables cascade that makes it harder still. I agree it's ugly though.
- evolve2k 12y agoFrom the second link in parent: "> As far as I understand, the main reason of why Tab's original idea of using `$` has eventually been dropped was some uncertainty about its possible extensibility for being used in property _names_ besides property _values_. The reason it got dropped is that some people (including Tab) do believe we should reserve $ for mixins and other preprocessor-like operations which may potentially be added to the language at some point. e.g. futuristic things like: @define apply-2d-transform(initial-scale, initial-rotation, ...) { ... my-transform-scaling: $initial-scale; my-transform-rotation: $initial-rotation; ... transform: scale(get(my-transform-scaling)) rotate(get(my-transform-rotation)) translate(get(my-transform-translation)); will-change[]: transform; } .some-element { $apply-2d-transform(...); transition[]: transform 0.5s ease-in-out; } .some-element:hover { my-transform-scale: 1.1; } but this syntax was just made for this example, final milage may look completely different and/or offer different features)"
- tyleregeto 12y agoI don't get that argument. Sass manages to avoid $ conflicts while using it for both variables and mixins. Its nice clean, consistent syntax. I don't see why we need different syntax for the two. Eg: $myColor: #fff; a { color: $myColor; } @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
- riffraff 12y agowhere is the discussion for using `var()` ? The rationale for the "--" sigil matches what I'd expected, but I don't understand: why not just `name: --value` ?
- IgorPartola 12y agoThis is just stupid. Here are some sigils they could have easily used without much issue: #, *, +. They could have also used something like [var-name] or <var-name>. I am convinced that at this point CSS is a clusterfuck that should be killed with fire.
- ibotty 12y ago`--` is a comment in many languages (sql, haskell, ..).
- bshimmin 12y agoAnd of course it's a decrement operator in many others! It doesn't seem at all intuitive as a sigil to use for this purpose.
- est 12y agoI'd rather use reactjs to style everything than this.
- joesb 12y agoThat doesn't make sense.
- peaton 12y agoSo in this article, the author says this is not supported on chrome. But in this stack question [1], chrome is clearly using it. Is the only difference the author is discussing that now firefox uses/supports "--" instead of "var-"? [1] http://stackoverflow.com/questions/18466569/enable-experimental-webkit-features-chrome-css-css3-variables http://stackoverflow.com/questions/18466569/enable-experimen...
- artursapek 12y agoIt was removed from Chrome in February. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ScKw9zYRkBc https://groups.google.com/a/chromium.org/forum/#!topic/blink...
- peterjmag 12y agoCSS variables were recently removed from Chrome: http://stackoverflow.com/a/23518831/349353 http://stackoverflow.com/a/23518831/349353
- peaton 12y agoI see, thanks for pointing that out.
- rubiquity 12y agoWoah. CSS variables look like compiler flags. There goes the W3C reinventing the wheel when Sass, Less and others have already laid out how to assign variables just fine for years.
- gavinpc 12y agoAs other posts have stated, CSS variables are not the same thing as preprocessor variables. Specifically, they cascade. A preprocessor cannot possibly implement CSS variables with cascading because it the value is resolved against a live context. In other words, you can actually change the variable at runtime with rules that target different selectors. As such, the "variables" are in fact functions.
- arxpoetica 12y agoCan anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?
- bshimmin 12y agoI think the idea is you use this rather than a precompiler.
- webXL 12y agoChanging bootstrap theme colors on the fly would be one reason to use this, even though you might be compiling bootstrap on each build.
- silverbax88 12y agoBecause precompilers are sort of a disruption of the point of CSS to begin with. I know, I know, a lot of people use them, but using style sheets that require compilation pretty much defeats the purpose of separation.
- DougWebb 12y agoYes and no. The browser has to parse the CSS, and it's most likely building an abstract symbol tree. So in a sense CSS is compiled too, it just happens in the browser so web developers don't have to be aware of it. Do you remember the type attribute? <style type="text/css">...</style> That was originally put there so we could have different types of stylesheet languages, instead of everyone having to use CSS all of the time. Maybe browsers should incorporate the most popular LESS and SASS projects so that they can support type="text/less" and type="text/sass" too. Some workaround will be needed for old browsers (a javascript shim that retrieves server-compiled css) during the transition period, but eventually we'd end up with being able to use LESS, SASS, and CSS where needed, interchangably.
- epidemian 12y agoI couldn't think of a very good example, but here's something: http://codepen.io/anon/pen/vuyAI http://codepen.io/anon/pen/vuyAI The CSS use a couple of custom properties that define the foreground and background colors. Then, some elements redefine those custom properties (through CSS or JS) and that in turn makes all their children inherit the new custom properties' values and change their styles. This makes the rules that use the custom properties very general, and avoids the need to write more specific rules for the alternative colors. I hope this makes sense :) I don't think this is possible to do with CSS preprocessors.
- pornel 12y agoThese are not like SASS variables. I think calling this variables is causing unnecessary confusion. This feature adds custom properties. CSS had custom vendor properties like `-webkit-foo`, and now you can have your own properties with vendor == "", so it's `--foo`.
- bshimmin 12y agoI think this is just a problem of nomenclature. In CSS, a statement such as font-color : red; comprises a "property" (left) and a "value" (right). The draft W3C proposal allows you to specify a "custom property" and assign a value to it, thus: --header-bg-colour : #ff5533; You can then reference this elsewhere by saying: header { background-color : var(--header-bg-colour); } Isn't that just how you use a variable (written as $header-bg-colour) in Sass?
- sergiotapia 12y agoDoes the W3C not have internet access to learn about existing solutions and least try to emulate the good parts? LESS and SASS are much better about variables, what the heck were they thinking? background-color: var(--best-gray-ever); Not exactly intuitive or easy to parse at a glance.
- ep103 12y agoThe w3c has been failing at their job for some 15 years now. Enabling drm in html5 and giving the mpaa a seat on their board should have been the last straw. Ignore them, and start looking to WhatWg
- lucian1900 12y agoMost of the members of whatwg also like the DRM bits.
- paulrouget 12y ago> what the heck were they thinking? I don't know, maybe about how to design a spec that is compatible with past and future CSS parsers and features? People think it's so simple to come up with a new feature for CSS/HTML/JS, when actually, they have no idea how difficult it is. They're smarter than that: http://www.xanthir.com/blog/b4KT0 http://www.xanthir.com/blog/b4KT0
- aikah 12y agoSure,but when the spec is bad at first place,no new feature can be good.So hell yeah ... > what the heck were they thinking? ...At first place when they wrote CSS. CSS is a disaster,and one of the worst spec ever written in my book. > People think it's so simple to come up with a new feature for CSS/HTML/JS, when actually, they have no idea how difficult it is. Aside from HTML,CSS and JS are "defacto" standards since vendors werent able to agree on a better spec when they should have. only developpers can fix these with tools they build.Devs cant rely on these technologies on their own.That's why they have CSS and JS preprocessors.Because while it's crap at the end of the day devs need to build on top of that crap.
- Thiz 12y agoUgly as hell. Go back to the drawing board.
- jasonpriestley 12y agoWriting your styles in javascript is a better option. You get variables, as well as functions and modules (e.g. with browserify), all with sane syntax and semantics (no "cascade"). Preprocessors are an inferior solution, limited by the semantics of CSS and leading, by the pervasive use of macros, to needlessly large CSS file sizes.
- VMG 12y agoWhat's the best solution for writing styles exclusively in JS and avoiding CSS completely?
- jasonpriestley 12y agoMy practice is to build the DOM programmatically with jQuery, and add styles to the elements directly $("<div>") .css({width: 100, height: 20, color: 'red'}) .appendTo(container); Then, since these are just values in normal javascript code, you can refactor as normal. Pull commonly used patterns out into functions (e.g. `importantText(16, "size 16 important text goes here")`). Most styles in the applications I write tend to be inextricably linked to the layout and function of a component (e.g., tabs should be next to each other); in the rare case that a style needs to be customized in different locations or at different times, it becomes a parameter (e.g. `confirmDialog(textStyle, message, onOk, onCancel)`) No extra tools are needed, beyond jQuery (building up the DOM without jQuery or something like it is awful).
- talmand 12y agoI've made this argument before, using JS exclusively for styling does not let you avoid CSS. It lets you avoid certain aspects of CSS that may, or may not, be helpful.
- kuschku 12y agoAnd does your styling work in a webbrowser where JS is disabled?
- peter_l_downs 12y ago
- nfriedly 12y agoI like it. The syntax actually feels more css-like to me than what most preprocessors use. But never mind the syntax, the killer feature us the cascading - that's what sells me on this vs SASS/LESS/etc. (And, having it native is also nice - this way I can just dump something on Github Pages and skip the compilation step.)
- talmand 12y agoCan you suggest a use-case where the cascading variables is a helpful thing?
- AshleysBrain 12y agoWhy do you have to use var(--name) when the parser already knows it's a variable from the -- prefix? Surely property: --name; is nicer than property: var(--name); ?