They don’t exist, but wouldn’t that be so cool? I’ve no idea how hard it would be to implement, or how to expensive to parse, but wouldn’t it just be the bomb?
Let’s say I have a bunch of elements, all with similar class names, which have some shared styling but also need individual rules, for example:
<ul id="menu">
<li id="menu-home"><a href="/">Home</a></li>
<li id="menu-products"><a href="/products/">Products</a></li>
<li id="menu-about"><a href="/about/">About</a></li>
</ul>I could do image replacement on those list-items to create a graphical navigation bar, with rules like this:
#menu li
{
background:none #fff no-repeat;
}
#menu li#menu-home
{
background-image:url("home.png");
}
#menu li#menu-products
{
background-image:url("products.png");
}
#menu li#menu-about
{
background-image:url("about.png");
}Not too bad, but as the structure grows in size, so the CSS grows too. If the structure got very large so the CSS would become equally verbose; not to mention the fact that I have to manually edit it each time a new item is added.
But what if I could just do this:
#menu li[id%="/^menu\-([a-z]+)$/"]
{
background-image:url("$1.png");
}Now my menu styles are infinitely extensible — I can add any number of new items, without ever having to touch the CSS!
Just a thought…
July 29th, 2008 at 12:03 pm
A very interesting idea; I can see this potentially saving a lot of time for long lists and in other special cases. Would it be possible to do something similar with Javascript (possibly jQuery or similar) to modify CSS rules on-the-fly based on ids?
July 29th, 2008 at 1:51 pm
This is definately possible with javascript, jquery especially.
July 29th, 2008 at 2:58 pm
This would be extremely easy to implement in SASS. Maybe it already is? I haven’t look at the documentation lately. But if you want to write CSS the way it should be, take a look at SASS.
July 29th, 2008 at 5:28 pm
Oh, I would so love that! Genius idea.
July 29th, 2008 at 5:46 pm
Er - unless I’m being dumb… these already (kinda) exist (although not very widely implemented yet):
From CSS 3:
E[att^=”val”] Matches any E element whose att attribute value begins with “val”.
E[att$=”val”] Matches any E element whose att attribute value ends with “val”.
E[att*=”val”] Matches any E element whose att attribute value contains the substring “val”.
I mean, they’re not regex’s, but they’re not bad…
July 29th, 2008 at 10:05 pm
Agreed, I think that’s a fantastic idea. To the W3C, Batman!
July 29th, 2008 at 11:13 pm
Does it validate?
July 30th, 2008 at 6:12 am
Imagine indeed… taking output from a CMS (e.g. a list of pages), giving the element an ID value based on the value of the outputted text, passing through the value to the stylesheet then having the background image be the URL to a server-side script that outputs an image based on the querystring which contains that text value…. maybe thats taking it a bit too far!
July 30th, 2008 at 4:24 pm
@Sergeant Rock - yeah CSS3 has some substring-matching selectors, and they’re implemented in all recent browsers (Firefox 2+, Opera 9+, Safari 3+).
But like you say, they’re not regexes, they’re limited to known substrings. But it was the potential for backreferences that most interested me in this idea.
July 30th, 2008 at 6:30 pm
This would be fantastic. I remember one of the reasons they haven’t implemented variables in CSS yet is something to do with CSS being about the styles only, and introducing variables would be outside the scope of the language or something, which I find a bit silly really. The purpose of the language is still about styles, it just means instead of repeating declarations everywhere for colour, you can set it once at the top and use variables down below, for even easier updating of styles - or set padding/margin values which are used in several places (as they often are).
I think CSS needs to evolve a bit to include things like this, and variables, and it would be great to see them and create an even better way of applying styles. It would save on lots of bandwidth as well, make things more compact and scalable as well.
July 31st, 2008 at 2:27 am
@James,
I really think this is overall a great idea, but I can also see how it can have its flaws. This could only apply to a global fixed-width image for menu items, and many times people will have variable width elements (yes, this could be tweaked with a dom:loaded js iterator). This could also break the technique of matrix menus as well. I think this is an interesting use-case where this could definitely save time and CSS-sanity, but in the end, I agree with the W3C, this is a bit more programming/logic than it is presentation. Although, I would love something like to clean up CSS code :)
July 31st, 2008 at 2:14 pm
@Stormrider - It would be great to be able to use variables and perhaps even pass them in the query string.
One other thing I’d love to see a declaration that removed all styling. Something like:
body{
style: remove;
}
That way you wouldn’t have to reset all the properties if you wanted to start from a “clean sheet”.
July 31st, 2008 at 7:59 pm
These are different things though. The end result is that the CSS controls the presentation, but this has no bearing on what should be able to be done within the stylesheet as well. Why can’t you have more advanced programming in a stylesheet? Its still all only about the styles.
I just never understand this argument at all.
August 10th, 2008 at 10:20 am
You can already do that easily with PHP. I have to admit I like the concept though.
August 11th, 2008 at 1:46 pm
what next , add if , else, while loop into css?
August 11th, 2008 at 10:00 pm
Why not?