6 ms·
CSS Variables published as First Public Working Draft
- nthitz 15y agoI can't wait to use them when this is implemented in 2020.
- cheald 15y agoThis was exactly my first thought, too. Neat feature. Probably won't be relevant by the time it's approved.
- Zirro 15y agoThe browser-makers seem to have grown tired of the approval-process. Implementation happens before that.
- JoshTriplett 15y agoJavaScript shims will start popping up far sooner than that; those shims can then fall back to native browser support when available.
- InclinedPlane 15y agoRelevant: https://twitter.com/#!/hugsformonsters/status/190151296521740290 https://twitter.com/#!/hugsformonsters/status/19015129652174...
- evoxed 15y ago2027 for IE13 to support it. Perhaps we've learned to hold our breath for too long...
- __float 15y agoI find this comment to be rather out of line. IE has really gotten its act together in terms of implementation of new features. I take it you haven't really given IE10 a serious try.
- XLcommerce 15y agothe problem isn't whether ie10 is good or not. It's that microsoft's update schedule runs at a glacial pace compared to chrome and firefox, both of which are on a 6 week(!!) rolling release schedule. Compare that to IE where literally years can go by between releases. I really don't get why MS don't fork their browser into corporate and consumer versions. Let the corporate users run on ie6/7 or whatever legacy crap they need and let the rest of the web move at a reasonable pace. Anyway that's where I think the hostility to IE is coming from.
- evoxed 15y agoYou're right, I haven't used version 10 so much as it isn't installed on my Windows partition. Barely one year ago I installed Windows 7 which for some reason still came with IE7, which I promptly upgraded to IE8. IE9 came out which I skipped on my laptop because Chrome and FF were more productive. What's hard to stomach is the fact that even while Microsoft is willing to push out version after version, the features that I care about (and really, should we still have to call standards compliance and consistency a feature?) seem to improve in only the smallest increments. What's worse is that all of those older versions stay out there, and each major release tends to leave behind its own black whole which I then have to support, for 2-4 more years. Now all that being said, if IE really has gotten it's act together as you say then I'd be happy to call it a day. Unfortunately no matter how wonderful it is, it probably won't matter until IE8 and IE9 virtually dead (<7.5% of sessions for a site). Edit: Release schedule of Internet Explorer... IE7: 2006, IE8: 2009, IE9: 2011, IE10: 2011 (announced "3 weeks in development")
- yuhong 15y agoWin7 ships with IE7?
- evoxed 15y agoIt ships with IE8 AFAIK but my copy was a dusty old uni OEM (still got the regular box and code though) which is the only explanation other than a completely shot memory. Some programs not launching right after install lead to a 12hr upgrade session leaving me with whatever shiny new service pack and Explorer was the latest and "greatest".
- deleted 15y ago[deleted]
- Zirro 15y agoThe issue wouldn't be implementation, that usually happens pretty quickly nowadays. The wait for older versions of browsers to become irrelevant, however, will probably be a long one.
- mrigor 15y agohttp://dev.w3.org/csswg/css-variables/ http://dev.w3.org/csswg/css-variables/
- gavinlynch 15y agofor posterity's sake, here is the Working Draft version, to go along with the above posted Editor's Draft link: http://www.w3.org/TR/2012/WD-css-variables-20120410/ http://www.w3.org/TR/2012/WD-css-variables-20120410/
- micheljansen 15y agoComing from Less.js, the first example does not exactly fill me with joy: :root { var-header-color: #06c; } h1 { background-color: var(header-color); } Compare that to Less: @header-color: #06c; h1 { background-color: @header-color; } I can understand why they opted out of the @-notation in favor of something a bit more in line with existing CSS, but it just looks overly complicated to me.
- carbon8 15y agohttp://www.w3.org/TR/css3-syntax/#at-rules http://www.w3.org/TR/css3-syntax/#at-rules As I understand it, at-rules are basically directives to the CSS parser and, according to the spec, should be ignored if the parser does not recognize the identifier. Given that, the use of at-rules for variable names has always seemed, IMVHO, to break the purpose of at-rules.
- Kilimanjaro 15y agoYep, I'd be happy with this: $header-color: #06c; h1 { background-color: $header-color; }
- Kilimanjaro 15y agoOr even this: :vars { header-color: #06c; header-font: helvetica; } h1 { font-family: $header-font; background-color: $header-color; }
- 15y ago
- tagawa 15y agoI'm probably a tiny minority but I don't like that CSS is becoming so bloated with features that overlap fully-fledged programming languages. Yes, it's becoming more powerful but I wonder if some of this is due to an inherent "right, what can we add next?" attitude which takes it further away from its presentational role. I also mourn the loss of a simplicity that meant that curious teenagers (like myself way back when) could look at a site's code and easily learn from it.
- TazeTSchnitzel 15y agoWell, I'm a curious teenager. Personally, I think source is somewhat easier to understand on modern sites. The use of CSS and divs instead of tables for layouts has had an interesting side effect: most elements of a page have IDs or classes. This makes it far more obvious what they are there for without having to use a web page inspector. That said, the continuing expansion of HTML, CSS and JavaScript APIs worries me too, but for a different reason. I'm worried that the stack will become so big that there is no possibility of new rendering engines or browsers.
- tagawa 15y agoGood points. I hadn't thought about the increased barrier to entry for new rendering engines but you're quite right.
- lbotos 15y agoI agree with your "what can we add next" qualm, but I'm not feeling that way about variables in CSS. I don't see variables hindering code readability/learnability. As a front-end guy have you ever exclaimed, "Man, I'm glad CSS doesn't have variables!"? I've done front-end stuff on and off for a few years and I've always thought variables would be the "easiest" thing for implementers to enhance CSS.
- mzarate06 15y agoCSS variables don't impact CSS' simplicity. If you need CSS to be simple, its still gonna have that, but when you get around to needing: css variables, transforms, gradients, border-radius, multiple background images, etc. ... you'll be glad to know that those features are available as well and that you don't have to add complexity to whatever you're building to hack those in. I also don't see how CSS variables, or other recent CSS features, hinder anyone from learning from a site's code. All these things make it easier to create stuff. My only complaint is that they're not added soon enough.
- etherealG 15y agoI don't understand the use of something like this. Instead of: .selector-1{a:b;color:red;} ...hundreds of other things... .selector-2{c:d;color:red;} someone can just: .selector-1, .selector-2{color:red;} ...hundreds of other things... It seems to me most cases where variables are used they are needed because of writing bad css in the first place. Use a colour only once and you only need to change it in 1 place, why do you need a variable for that?
- powrtoch 15y agoYou seem to go about CSS very differently then most. The typical way of doing styleshets is more or less "What properties does this type of element have? Now what about this type?..." Rather than "Now which elements on my site have this property-value? What about this property-value?..." Which isn't to say that comma syntax is in any way rare, just that CSS is usually approached by pairing properties to selectors, not the other way around. I would say this helps your style sheet make intuitive sense too. If you want to change the color of the sidebar text, you find the part of your style sheet for #sidebar and then change the color property, rather than finding the section for "blue", removing the sidebar from a big comma separated list of selectors, then placing it into a similar list for "green". From this standpoint variables make a lot of sense.
- catshirt 15y agoorganizing your css by property value sounds like a nightmare. it's much easier to organize hierarchically, which means your colors can scatter.
- pbhjpbhj 15y agoBut then when quarter of your red things have one width, and that's the same width as quarter of your green things, and another quarter of the reds have another width, which is the same as quarter of your orange things ... then you need variables again or you end up using multiple classes for each object just so that you can apply multiple properties.
- lambda 15y agoNo, you would end up with: .selector1, .selector2 { color: green } .selector3, .selector4 { color: red } .selector1, .selector3 { width: 100px } .selector2, .selector4 { width: 200px } No variables, no multiple classes. Now, I'm not saying that this is better than variables, or that variables won't make it easier to manage. But you don't have to repeat attributes or use many classes for each element currently in CSS, you just have to organize it a bit differently than you might expect at first.
- Kilimanjaro 15y agoFor those asking why, color replacement is enough to have them implemented. Once your stylesheet grows, you'll have your theme colors scattered all over the place. So having them in one place at the top and making minor changes to the theme is a great time saving feature.
- SquareWheel 15y agoMaybe this is a bad practice, but I've just been using PHP inside CSS for quite a while. You may need to tweak your .htaccess to allow PHP in .css files, assuming you're on Apache. p {color: <?php echo $mainColor; ?>} I did some basic testing and it didn't seem to hurt resource usage, but it wasn't a large site or anything.
- deleted 15y ago[deleted]
- underwater 15y agoThe spec allows the same variable to be defined multiple times, and have cascading determine which value is used. As far as I can see this completely removes the ability to implement variables in a preprocessor (i.e. serve a style sheet with variables substituted with their values to Internet Explorer). So developers can't use the feature until it's made available on all browsers. Consider the following code. It can't be translated back into standard CSS without knowing the DOM structure of the document it will be applied to. #nav { var-color: red; } #side { var-color: blue; } body p { color: var(color); }
- wtn 15y agoThis guarantees that people will write programs in CSS now. And they will be horrible.