3 Examples from the Future of CSS
secretGeek .:dot Nuts about dot Net:.
home .: about .: sign up .: sitemap .: secretGeek RSS

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:

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 }
</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




name


website (optional)


enter the word:
 

comment (HTML not allowed)


All viewpoints welcome. But the right to delete any post for any reason is reserved. Don't make me do it. Comments may be republished, emailed to your loved ones or printed and used as toilet paper. Who reads this legal bit anyhow?

TimeSnapper is a life analysis system that stores and plays-back your computer use. It makes timesheet recording a breeze, helps you recover lost work and shows you how to sharpen your act.

TimeSnapper won last year's Developer Competition at Larkware.com, and is used by over 10,000 people.

Articles

What then, is b? What then, is b?
SQLike: A simple editor SQLike: A simple editor
Yet Another BizPlan Generator. Yet Another BizPlan Generator.
HOT GUIDS: A hot or not site for guids HOT GUIDS: A hot or not site for guids
How does life get better? One tiny hack at a time. How does life get better? One tiny hack at a time.
24 things to do, and 100 things *not* to do (yet) for building a MicroISV 24 things to do, and 100 things *not* to do (yet) for building a MicroISV
Venture capital won't kill Jeff Atwood, it will only make him Jeffer. Venture capital won't kill Jeff Atwood, it will only make him Jeffer.
A handy workflow image for newbie mercurial users A handy workflow image for newbie mercurial users
Fractal Feedback, a diversion into recreational programming Fractal Feedback, a diversion into recreational programming
Hump-Jumping: How the Education of Computer Science can be Saved, err, maybe. Hump-Jumping: How the Education of Computer Science can be Saved, err, maybe.
Suggested User Experience Improvements for DiffMerge Suggested User Experience Improvements for DiffMerge
SQL Style Extensions for C# SQL Style Extensions for C#
The Movie Hollywood (And My Wife) Doesn't Want You To See: Weekend at Jacko's The Movie Hollywood (And My Wife) Doesn't Want You To See: Weekend at Jacko's
Sysi: the ultimate administrators toolkit Sysi: the ultimate administrators toolkit

Archives .: secretGeek :: Complete Archives
TimeSnapper -- Automated Screenshot Journal TimeSnapper.com    
Version 3.3: true productivity boost

Next Action NextAction
Managing the top of your mind

World's Simplest Code Generator (html edition) World's Simplest Code Generator

25 steps for building a Micro-ISV 25 steps for building a Micro-ISV
3 minute guides -- babysteps in new technologies: powershell, JSON, watir, F# 3 Minute Guide Series
Universal Troubleshooting checklist Universal Troubleshooting Checklist
Top 10 SecretGeek articles Top 10 SecretGeek articles
ShinyPower (help with Powershell) ShinyPower
Now at CodePlex

Realtime CSS Editor, in a browser RealTime Online CSS Editor
Gradient Maker -- a tool for making background images that blend from one colour to another. Forget photoshop, this is the bomb. Gradient Maker


[powered by Google] 


How to be depressed How to be depressed
You are not inadequate.



Recommended Reading

The Best Software Writing I
The Business Of Software (Eric Sink)

Recommended blogs

Jeff Atwood
Joseph Cooney
Phil Haack
Scott Hanselman
Julia Lerman
Rhys Parry
Joel Pobar
OJ Reeves
Eric Sink

Aggregated Links

proggit
dzone
hacker news
dot net kicks

Human Link Machines

interesting finds
a continuous learner's weblog
arjan's world
weekly link post

LinkedIn profile
LogEnvy - event logs made sexy
ShuffleText - fuzzy search for .net
PC Smart Buys - Computer Hardware in Australia
 
home .: about .: sign up .: sitemap .: secretGeek RSS .: © Leon Bambrick 2006 .: privacy

home .: about .: sign up .: sitemap .: RSS .: © Leon Bambrick 2006 .: privacy