CSS Variables proposal released (Very cool!)
A new specification was released today for CSS variables. What this means it that you would be able to centralize certain values and call them with CSS. It might look like this:
@variables { keyColor: #f00; }
h1 { color: var(keyColor); }This means that you wouldn't have to keep repeating things like your colour values. If these values change, you only have to change the variable, not every instance of that colour in your CSS files. It would also make it easier to keep design elements consistent, such as a consistent margin.
The proposal requirements also note that:
- The definitions of variables should cross @import boundaries so variables can be contained in a standalone stylesheet and imported by all stylesheets needing them. Use case: company-wide graphical charter for a set of corporate web sites.
- The value of variable should be modifiable by script. Such a modification should instantaneously update the value of all properties calling the corresponding variable's value, possibly triggering changes in the rendering of the document.
Very cool!
Jack Michaelson posted this at 18:27 — 9th April 2008.
He has: 1,733 posts
Joined: Dec 1999
Now that would be awesome! Praying for this a long time!
Michelle posted this at 03:13 — 10th April 2008.
She has: 70 posts
Joined: Nov 2007
Neat.
As a programmer, I've often wished CSS had variables. What does this actually mean, though? Is this somethign the next generation of browsers will have? When CSS changes, is there any way for it to work with existing browsers?
Michelle
Megan posted this at 13:26 — 10th April 2008.
She has: 11,421 posts
Joined: Jun 1999
The link I posted above has one example that includes a back-up for legacy browsers. It will take a long time for this to be supported to the point where you don't need to incliude that back-up value.
The next thing that would be really good to have is simple math using numeric variables. It would be a great way to enforce grid design and even do flexible layouts without having to do a lot of manual calculations.
For example:
@variables {
gridWidth: 100px;
margin: 10px;
}
#sidebar {
width: var(gridWidth)*2;
padding: var(gutter);
}
#content {
width:
width: var(gridWidth)*4;
}
Megan
Connect with us on Facebook!
Michelle posted this at 00:48 — 11th April 2008.
She has: 70 posts
Joined: Nov 2007
Ah, sorry. I totally missed there was a link in the text since the color is so close to the text color. I see it now. Thanks.
Michelle
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.