What I want from CSS3 – nested declaration blocks

Back in October, Andy Budd wanted to have min- and max-padding in CSS3, so it seems only fair that for my 200th post here I can also give my $.02 and ask (and maybe stomp my little feet) for something in CSS3 (after all we can celebrate together in well, roughly 2010 when all browsers support it – that is if we still use browsers then):

I want nested declaration blocks!

I basically want them as I hate repeating myself, and I hate repeating code when it is not needed.

Currently there is a lot of repetition going on, especially when you use links:

#content ul{
list-style:square;
margin:0 2em;
}
#content li{
list-style:square;
padding:2px 5px;
line-height:1.3em;
}
#content a:link{
[...]
}
#content a:visited{
[...]
}
#content a:active{
[...]
}
#content a:hover{
[...]
}
#nav ul{
list-style:none;
margin:0;
}
#nav li{
list-style:none;
padding:2px 5px;
line-height:1.3em;
}
#nav a:link{
[...]
}
#nav a:visited{
[...]
}
#nav a:active{
[...]
}
#content a:hover{
[...]
}

Wouldn’t it be the cat’s pijamas to be able to do something like this?

#content {
ul{
list-style:square;
margin:0 2em;
}
li{
list-style:square;
padding:2px 5px;
line-height:1.3em;
}
a{
:link{[...]}
:visited{[...]}
:active{[...]}
:hover{[...]}
}
}
#nav {
ul{
list-style:none;
margin:0;
}
li{
list-style:none;
padding:2px 5px;
line-height:1.3em;
}
a{
:link{[...]}
:visited{[...]}
:active{[...]}
:hover{[...]}
}
}

Ok, I don’t necessarily need the pseudo selector nesting bit, but the main idea would be such a great shortcut.

Imagine how easy it would be to give instructions to CSS designers how to differentiate between JavaScript enhanced and normal styles. Imagine a script that adds a class called ‘dyn’ to a UL with the id ‘nav’ when JS and DOM is available. The CSS file could have the following instructions.

/* Styles for the static version */
ul#nav{
/* go nuts! */
}
/* Styles for the dynamic version */
ul#nav.dyn{
/* go even nuttier! */
}

Progressive enhancement would also be a snap:

/* For CSS3 browsers, like Opera 16
and Firefox 1.831425243 release candidate 2 */
html {
body{
[...]
}
}

I checked the W3c CSS3 syntax reference but so far there is nothing of the sort in there. There is a rather cryptic example, which basically shows that you can use curly braces in a selector when you embed them in quotationmarks:

p[example="public class foo
{
private int x;

foo(int x) {
this.x = x;
}

}"] { color: red }

Which somehow confuses the heck out of me. What is this selector supposed to be?

Ok enough dreaming. Let’s see that we can get more people out there to upgrade first…