As a language, I like CSS, it has a simple elegance that achieves it’s humble goals very nicely.
It’s these humble goals that bother me.

HTML is an XML based language, and fundamentally, all CSS is doing is targeting nodes within this XML and modifying their attributes. Of course, it’s not possible to, for example, modify the href property in an anchor tag, and this shows that the implementation of CSS is stifled by it’s modest goals.

Also, CSS’ ever-growing list of selectors shows a fundamental inflexibility in it’s syntax. Selectors basically target specific nodes within your HTML, this sounds to me an awful lot like the job for XPath.

Imagine a CSS where XPath statements replace selectors and a generalised set of property modifiers replaced style declarations.
In this way you could (for example) set all the target attributes within all anchor tags to "_self".

1
2
3
//a {
    target:set("_self");
}

Or you could remove all the width and height attributes from img tags that don’t have a src attribute.

1
2
3
4
//img[not(@src)] {
    width:remove();
    height:remove();
}

Or you could add some copyright info to the alt attribute of any img tags within any div tags with class="portfolio".

1
2
3
//div[@src="portfolio"]//img {
    alt:append(" © 2010");
}

The biggest issue I can see arising from this is that styles on HTML elements are not individual attributes but a collection of declarations compiled into a single attribute.
To get around this I have a few solutions.
Firstly we could create a Regular Expression based string modifier which gets executed on the specified attribute of the targeted nodes (in this case the ‘style’ node), something like this (here I’m setting line-height=20px; on all p tags).

1
2
3
//p{
    alt:mod("line-height\:.*;", "line-height:20px");
}

I think you can probably see that this is not ideal though, it is very verbose, difficult to read and would make cascading declarations a nightmare for the browsers reading this code.

The ideal system (IMO) would unfortunately require a modification to the HTML spec, it would require styles to be broken out into their own child node, for example:

1
2
3
4
5
6
<p>
    <style display="block" float="left"/>
</p>
<a>
    <style color="#00ff00"  color.hover="#00ffff"/>
</a>

And then, to set our style would be a normal attribute setting modifier.

1
2
3
//p.style {
    line-height:set("20px");
}

Alternatively, we could create a style specific attribute modifier. I am reluctant to vouch for this because it is a special case but it could be the more feasible (as it doesn’t require changes to the HTML spec). It’d look something like this:

1
2
3
//p{
    style:setStyle("line-height", "20px");
}

You can see that vastly broadens the scope of CSS to the point that Cascading Style Sheets is no longer an appropriate title (maybe XMod or something is better).
Here are several situations I can think of where such a system could be useful (outside of styling). Remember, none of these permanently affect the underlying XML, they’re more of a filter through which XML can be viewed.

  • Applying formatting to Word documents using the XDOC file format.
  • Creating a mobile friendly version of flash files using the XFL file format (i.e. removing filter effects, removing embedded fonts, etc).
  • Modifying the Firefox UI using the XUL interface files (as if we need another way to customise Firefox).