3 Examples from the Future of CSS

More html news from Gaks[1]...

Following on from the W3C announcement of a 'Tags' attribute, I'll show you how this tags information can be utilized using CSS 2.0, today, and CSS 3.1, in the future.

First, a simple example, using just plain old CSS 2.0 attribute selectors, available today in firefox.

Consider the following chunk of style information:

<STYLE type="text/css">
p[tags] { background : lightgreen }

It basically says "All p elements that have a Tags attribute should be shown in green." (You can use this today in firefox.)

[continues with code examples]

Hence the following html:

<p tags='example text css2 tutorial'>an example paragraph</a>

will render like this:

an example paragraph

Another example

This is also available in CSS2, and can be used today in firefox. [I've uninstalled IE7 and can't test it here]. The following style information:

<STYLE type="text/css">
a[tags~='warning'] { background : red }

Basically says "all a elements with a 'tags' attribute containing the value 'warning' should have red background."

The little squiggle before the equals sign (i.e. "~=") is because tags could hold a lot of different space-delimited values: and we only need one of them to match. We don't need the entire attribute value to match.

If we apply the above style to the following snippet of html:

<a href='linksomewhere' tags='warning'>don't follow this link</a>

will render like this:

don't follow this link

Basically, the rule is applied to the anchor element, because the value of its tag matched.

You can do some pretty cool things with this. If your browser supports it.

[All elements with an 'rss' or 'atom' tag could have a cute little feed icon beside them. Those with a 'microsoft' tag could have that oh so amusing "bill gates as locutus of borg" icon from slashdot circa 2001. And so on.]

Back to the future: A third example

Now, using the "attribute value" selector from CSS 3.1:

<STYLE type="text/css">
a[Tags]@ { display: inline; padding: 10 }

The following html

<a href='linksomewhere' tags='warning'>don't follow this link</a>

will render like this:

warningdon't follow this link

which is semantically equivalent to injecting a span element at the front of the link, like this:

<a href='linksomewhere'><span style='padding: 10'>warning</span>don't follow this link</a>

The "@" in the above selector means, 'select the value of the attribute itself (rather than selecting the element it belongs to)'

So if we want to reveal the href of every link we can say:

<STYLE type="text/css">
a[href]@ { display: inline; padding: 10 }

And thus a link to google, written like this:

<a href='http://www.google.com'>googleLink</a>

Would display like this:


[Okay -- I couldn't convince Gaks to forward me any further details of the CSS 3.1 spec, so you'll have to hassle Hixie, Tantek or Glaz directly if you want to know the future. Too bad ;-<]


I'm currently writing a book about how to build your first product. If you want to build your first product, please sign up to be notified when the book is available.

(By the way, I read every comment and often respond.)

Your comment, please?

Your Name
Your Url (optional)
Note: I may edit, reuse or delete your comment. Don't be mean.