IE7 is gaining market share and we can start to use more CSS3 selectors in our day to day code. Because of this, it’s worth a quick reminder that the more semantic we make our (X)HTML, the easier to implement the selectors will be.
For example, imagine the opportunities with the XFN microformat; by combining this with the partial attribute selector, you can add a little flourish to your pages.
Using these examples:
<li><a href="" rel="friend">Tom's Site</a></li> <li><a href="" rel="colleague met">Dick's Site</a></li> <li><a href="" rel="acquaintance met">Harry's Site</a></li>
You could use the new selector to highlight anyone you’ve met:
a[rel*='met'] { color: red; }
To have your list like this:
Obviously this is only a very quick and basic example, but with a little imagination and some good semantic text you could really get the new selectors working for you.
Peter Gasston
This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.
16 Responses to “Semantic code: put more in, get more out”
That’s making good use of XFN information. One could feasibly stuff a little icon of the person next to the link to their site using :after and a CSS background definition.
Cool stuff Peter :)
I use these for external links… for all hyperlinks a small background image is added, and with
a[href^="#"]anda[href^="http://[domain-name]"]I delete these images. See my site for a demo :)Looking cool Arjan, looking cool :)
this seems very neat, but I’m not sure how usable it is quite yet. I manage a quasi-heavily trafficked site (about 3,000 visitors a month) and the stats are saying that IE7 is only used by 30% of IE users (15% overall). I’d estimate that about 55% of users could see the semantic code right now. I know some people who still haven’t gotten the auto update from Microsoft. Hopefully it’ll get out soon!
[...] 15.Semantic code: put more in, get more out with CSS3 [...]
[...] Semantic code: put more in, get more out with CSS3 – A quick tutorial on how to use semantics so that you get more out of CSS3 selectors. [...]
[...] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. [...]
[...] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. [...]
[...] Semantic Code: Put More In, Get More Out – 一个快速教程，涉及 CSS3 选择器使用和语义，以及为网站添加新功能的方法。 [...]
[...] Semantic Code: Put More In, Get More Out – Ejemplo sobre como utilizar selectores CSS3 para añadir funcionalidades a un web site. [...]
[...] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. [...]
[...] Semantic code: put more in, get more out with CSS3 – A quick tutorial on how to use semantics so that you get more out of CSS3 selectors. [...]
[...] 43. Semantic code: put more in, get more out with CSS3 [...]
[...] 43. Semantic code: put more in, get more out with CSS3 [...]
[...] 21. Semantic Code: Put More In Get More Out [...]
Leave a Reply