Monday, June 30th, 2008

CSS Variables are …. here!

Category: CSS, WebKit

<>p>We talked about how CSS variables are next a few months back, and now they are here!

WebKit now has an experimental implementation of CSS variables:

You can test this feature using a WebKit nightly

Test cases

Once again, via Dylan Schiemann.

Posted by Dion Almaer at 11:26 am
24 Comments

+++--
3.6 rating from 39 votes

24 Comments »

Comments feed TrackBack URI

will try :o

Comment by V1 — June 30, 2008

This is great news. Nice one WebKit!

Comment by kim3er — June 30, 2008

This will be nice once ALL browsers have implemented this and an additional 2 or 3 years have passed to allow legacy users to upgrade. Pretty useless in the meantime…

Comment by drlongghost — June 30, 2008

Hope this isn’t viewed as link spam, but I’ve implemented CSS variables (as per the spec implemented by webkit so that they’ll be usable once all browsers support them) using PHP to compile it down. Probably pretty easy to port to other runtimes.

http://interfacelab.com/variables-in-css-via-php/

Cheers.

Comment by IFlyHigh — June 30, 2008

great… now you only need to wait 10 yeasr untill even IE has it…
and then… maybe then we can use them.

Comment by SkaveRat — June 30, 2008

This is already useful for any application that will be Webkit-only (AIR, iPhone, Dashboard, anything with a Webkit view in OS X).

Comment by eyelidlessness — June 30, 2008

They are constants.

Comment by Gordon — June 30, 2008

Ugh, is this really necessary? I just think it’ll complicate things more than it’s worth.

Comment by richtaur — June 30, 2008

@richtaur: Of course it’s not necessary. Is any web technology necessary?
.
How will it complicate things to allow developers/designers to optionally choose to use variables at their discretion? How will doing so be more complicated than not doing so?

Comment by eyelidlessness — July 1, 2008

Huh.. So they still haven’t created something to group classes or assign classes to other classes or ids?
.someClass {…}
.anotherClass {…}
#someBox { class: someClass, anotherClass; }

Comment by sirhc — July 1, 2008

Any word from the Firefox crew on when this might show up in that browser?

@gordon: yes, it’s necessary. omfg, is it necessary! Without this, developers and designers for a product must agree on a process for documenting design changes (colors, spacing, font sizes) and making sure they are applied to the appropriate stylesheets. This is a non-trivial problem and the reality is that very few teams, if any, get it right. Web sites are constantly having design bugs introduced because of this, _and_ as the CSS grows more complex it becomes correspondingly harder to maintain.

Allowing developers and designers to express the critical elements of a design as variables that can be updated in a single place is a *huge* win!

Comment by broofa — July 1, 2008

Seriously, how exactly would you ‘progressively enhance’ using constants?

Comment by ashooner — July 1, 2008

@ashooner: You can define fallback values for legacy browsers. See the CSS variables spec.

I still think it’s wrong to call them variables instead of constants, unless browsers implement this by allowing the variables to be dynamically updated from javascript.

Comment by Joeri — July 1, 2008

@sirhc: Good point. The var(…) notation allows developers to centralize values, but it doesn’t allow them to create a centralized binding of properties and values. The “,” notation allows us to apply styles to more than one selector at a time. E.g.

#toolbar LI,
#sidebar LI {
width:80px;
margin:4px;
font-size:12pt;
font-weight:bold
}

#toolbar LI {
background-color: red;
}
#sidebar LI {
border: solid 1px red;
}

But this means copy/pasting the selectors in multiple places, which makes these rules a bit brittle. It’d be nice to have an “@templates” directive or something like that to support this. E.g.

@templates {
buttonGeometry: {width:80px; margin:4px}
buttonTypography: {font-size:12pt; font-weight:bold}
}
#toolbar LI {
template: buttonGeometry, buttonTypography;
background-color: red;
}
#sidebar LI {
template: buttonGeometry, buttonTypography;
border: solid 1px red;
}

Comment by broofa — July 1, 2008

@broofa: i’ve got no doubt they are necessary. I just said, they are constants, not variables ;)

Comment by Gordon — July 1, 2008

>>This is already useful for any application that will be Webkit-only (AIR, iPhone, Dashboard, anything with a Webkit view in OS X).

Not quite yet, though, if it’s only in the nightlies.

How often, I wonder, will Adobe update the webkit in AIR?

For that matter, how does AIR deal with apps that require a newer engine? Do you get a “your air is stale” message?

Comment by Nosredna — July 1, 2008

@Nosredna:
“Not quite yet, though, if it’s only in the nightlies.”
.
Heh, I should choose my words more carefully. My point isn’t that it’s already available, but that it will be available sooner for Webkit-based apps than for IE.
.
“How often, I wonder, will Adobe update the webkit in AIR?”
.
So far as I’ve seen, too little too late. They did just update it, but it’s still far behind the Safari release. But according to adoberob here: http://ajaxian.com/archives/adobe-air-v11-released-enhanced-support-for-internalization#comments

I hear you. The next version of AIR will include a much newer version of WebKit.

Whatever that means and whenever that is! :)
.
“For that matter, how does AIR deal with apps that require a newer engine? Do you get a “your air is stale” message?”
.
That’s a really good question. I imagine AIR has an update mechanism, but I have no idea how usable it is.

Comment by eyelidlessness — July 1, 2008

You make a good point. If iPhone and AIR are targets for us, it may be worth targeting these new features in WebKit now, and Safari users will get a better experience than FF, Opera, and IE until they catch up.
.
Seems like Webkit is not in the position of being able to dictate not just which features appear, but how they are implemented.
.
IE8 is lame because it doesn’t have native Canvas. Now all the other browsers are starting to look lame due to Webkit’s CSS improvements.
.
Seems like a bit o a nightmare, though. We’re in danger of having two significantly difference versions–Webkit and other.
.
And you have the age old problem of deciding whether to design for the lame ones and enhance, or design for the capable one and degrade.
.
Just when I thought we were getting down to a single version of code.

Comment by Nosredna — July 1, 2008

>>Seems like Webkit is not in the position of being able to dictate not just which features appear, but how they are implemented.

Er, I meant “now,” not “not.” Wish I could edit my posts. :-)

Comment by Nosredna — July 1, 2008

They are not constants. The introduction of the CSS Variables spec says:

CSS Variables allow authors to define variables that are reusable as property values anywhere in a stylesheet and queryable/modifiable through an extension of the CSS Object Model described in this document.

Comment by Amtiskaw — July 1, 2008

@Amtiskaw Interesting and puzzling

Comment by Gordon — July 3, 2008

I think most people have missed the point about how effective this is immediately – because of the great need to change stylesheets dynamically, many developers are already making their own css var notations and then coming back and rendering them with javascript (which unfortunately includes the overheads of abstraction – speed and script size) but this news is great because effective from NOW we can use the STANDARD notation in any browser in a forward compatible way just by parsing stylesheets js for legacy browsers.

Lets face it anyway, for anything perfectly flexible and scalable with xhtml/css, the whole design process will need to be wrapped in abstraction to iron out the bugs – and html/css will always be that way until browser renderings work all the same way – which is never because we will always have to support legacy.

Comment by laurei — July 4, 2008

I’d prefere native SASS support.

Comment by cheba — July 8, 2008

That seems odd to me to make it more differcult

Comment by Tribulus — September 22, 2008

Leave a comment

You must be logged in to post a comment.