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:

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:

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:

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:

will render like this:

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:

The following html

will render like this:

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

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:

And thus a link to google, written like this:

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 ;-<]

My book "Choose Your First Product" is available now.

It gives you 4 easy steps to find and validate a humble product idea.

Learn more.