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 }
</STYLE>
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:
<STYLE type="text/css">
a[tags~='warning'] { background : red }
</STYLE>
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:
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 }
</STYLE>
The following html
<a href='linksomewhere' tags='warning'>don't follow this link</a>
will render like this:
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 }
</STYLE>
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 ;-<]
'claire rand' on Fri, 21 Jul 2006 05:17:44 GMT, sez: thats actually pretty useful, specifically for highlighting *where* a link goes, ala RSS feeds getting icons etc automatically. and having said icons change site wide as the stylesheet changes (e.g. allowing a CSS skining feature) without having to adjust server side graphics.
oh and the 'warning' feature is pretty good to. i want the ability to merge stylesheets, with *mine* taking priority, then i can probably highlight spam links when they start abusing all this (as they of course will).
if used right though it will make searching an article easy (if you can search on the tags) to extract info.. hmm..
could be good, but will be spammed to hell and back.
'karl' on Sat, 22 Jul 2006 00:14:08 GMT, sez: not an announcement of W3C and you can already do that with the class attributes being valid.
'Pedro Rogério' on Tue, 05 Sep 2006 23:04:49 GMT, sez: Thanks for the tips. It's cool!!!
'Nick Hebb' on Thu, 05 Apr 2007 16:42:04 GMT, sez: I want variables for CSS so I can declare colors at the top of the file and change them in only one place.
'lb' on Tue, 10 Apr 2007 02:33:37 GMT, sez: @Nick:
Rory Blyth has provided a tool for this, as has Mads Kristensen.
http://www.madskristensen.dk/blog/AddVariablesToStandardCSSStylesheetsInASPNET.aspx
'Josh' on Wed, 11 Apr 2007 18:56:27 GMT, sez: Out of pure curiosity, isn't this bordering the line of content and presentation a bit? If the idea behind CSS is to clearly seperate the two, doesn't this technique start to open up a whole new realm of possibility for blending them back together? I am a humble programmer, and not a designer, but I can smell coupling a mile away and it is usually never good.
':-:s€zær->' on Sat, 03 May 2008 09:34:32 GMT, sez: CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
|
secretGeek .:dot Nuts about dot Net:.
NimbleText 2.0: More Than Twice The Price!
Complete secretGeek Archives
The Best Software Writing I
The Business Of Software (Eric Sink)
