Proposal for CSS Variables
Since the release of CSS Level 2 Recommendation ten years ago in may 1998, the Web authors' community has been requesting a way of defining variables in CSS. Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations. If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair. Apple, Inc. and Disruptive Innovations expect CSS Variables to receive a very positive feedback from both the Web authors' community and browser vendors.
Comments
I love it. Concise, clear, easy for authors, and providing significant benefit. I see nothing to complain about on initial reading of the spec.
Thanks, Daniel and Hyatt!
I just had a superficial read of the spec, but I'm wondering what happens if two variables of the same name are definied in different referenced stylesheets. Do the usual cascading rules take place in case of a naming conflict? What if the two variables with the same name refer to different css properties?
It seems like everybody, I run into, after a few months of using CSS ask for this.
Glad to see someone besides you, maybe, had a conversation with someone outside the working group.
Really cool! Very useful, esp. for colours!
Nice.
I just noticed in the second example in 3.3 probably a mistake - it should be :
@variables print {
myMargin1: *10px*;
}
3.1 para 2: "... as CSS style declarations of an identifier, a semi-colon and one value." Either I'm parsing very badly, or that should say colon.
4.1 : both "variables" and "variableset" have a set of braces; does that mean @variables { { varable: 0 } } ?
In general though, yay! This is something we (as random XUL developers) wanted as well
I do remember I was asking in a forum (dotclear ? mozilla ?) why such a system cannot exists, and someone responded "security concerns".
Constant values would be a very good first step, but the main problem is how to implement it without breaking old browsers ? My solution was to do it server-side.
For a long time, I use code-inclusions to have constats in my css. I can change entirely the color of my website without the pain of search&replace. Or the margin of my blocks, or the images in certains ul li...
Désolé my bad French
Daniel,
You mention that you expect CSS Variables to receive very positive feedback. I guess you probably already know you should expect to receive other kinds of feedback about this as well.
And for the record, can you say where the public should submit their comments on this? The Abstract of the doc says "Authors welcome suggestions on this document", but you don't mention any mailing-list for them to send suggestions to.
--Mike
Subject to the comment by franCk it looks a great and much needed proposal. Thanks.
Good work as ever!
Thanks.
From 3.1,
“The definition of a variable must precede all style rules contained or imported in the stylesheet.”
Isn’t that better with a should, rather than must?
I can see developers using it to simplify larger blocks of CSS, without wanting to relocate all the defines to the top of the file – if variables are not used until after the definition, where’s the problem? Seems a bit arbitrary to constrain the developer.
Daniel,
With the current version of the spec, we have to do this to modify a variable:
document.styleSheets[0].cssRules[0].variables.setVariable('CorporateLogoBGColor', '#000');
However, it's a bit long, and if changes are made in the stylesheet, like the order of rules, we have to modify the javascript code. I propose to allow to do:
document.styleSheets[0].setVariable('CorporateLogoBGColor', '#000');
Really great proposal, simple and utterly useful!
Just a side note: isn't the name "variable" somewhat misleading, as these are not really "variables" but rather "named constants"?
@chrisj : those are variables since you can change their values via DOM objects.
Nice! Some comments:
"The definition of a variable must precede all style rules contained or imported in the stylesheet."
This does not make sense to me.
If style sheet A imports style sheet B and then C, you are not allowed to declare variables in style sheet C? You are not allowed to declare variables in the middle of the style sheet, but it is fine to do it later using JS?
What happens if you use a non-existing variable and later declare it using JS?
What is the base url for url() if you use variables accross @import?
Isn't var() a little verbose? Why won't something shorter do, like placing some special character in front of the variable name?
Music to my ears!