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.
"As defined here, the syntax for variable usage is different from the syntax for variable definition (i.e. var-foo for definition, var(foo) for usage). Some have suggested that the syntaxes should should match, using functional syntax in both cases. Others have suggested using a prefixed symbol instead of functional syntax (e.g. $foo) for both the property and usage."
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.
The 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.
I 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.
You'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")
It 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".
the 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.
I'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.
Well, 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.
I 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.
The key difference here being that rather than looking at whatever bloat they can add this time, CSS variables are actually derived from an acute need in the community. So much, that there are even two CSS preprocessors/frameworks that already add this (SASS and Less).
This lack of variables in CSS is already being solved in a nonstandard way. Might as well standardise a solution.
CSS 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.
For 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.
The 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); }
I 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?
You 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.
But 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.
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.
And that's a lousy way to go, considering how spread out your properties can get. It's okay in small amounts when applied to a group of adjacent elements, but going any further makes no sense (unless you like using Ctrl+F a lot).
I need an editor/IDE with a dropdown that displays the properties of any element in one panel, perhaps showing me where the actual stylesheet changes are made in a side column. Like editing styles in Firebug, only smarter. Anyone got a recommendation?
First, I think it is inappropriate to down vote this comment as it is a valid point that you can actually solve the color problem in current CSS.
However, building your CSS in this way probably takes a lot longer to render since the selectors are expensive and setting attributes is cheap. Further, I have never seen a page of any complexity where this would make sense.
Maybe 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.
