Semantic code: put more in, get more out
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.
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 [...]