Semantic code: put more in, get more out

200716 Jan
Semantic code: put more in, get more out
by Peter Gasston
Posted in Declarations, News, Tutorials
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.
You can skip to the end and leave a response.
Comments
- 01.
  
  Devon says:Comment » January 16th, 2007 at 3:47 am
  
  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.
- 02.
  
  Joost de Valk says:Comment » January 16th, 2007 at 9:54 am
  
  Cool stuff Peter :)
- 03.
  
  Arjan Eising says:Comment » January 16th, 2007 at 4:30 pm
  
  I use these for external links… for all hyperlinks a small background image is added, and with a[href^="#"] and a[href^="http://[domain-name]"] I delete these images. See my site for a demo :)
- 04.
  
  Joost de Valk says:Comment » January 17th, 2007 at 12:11 am
  
  Looking cool Arjan, looking cool :)
- 05.
  
  Tim Wright says:Comment » January 19th, 2007 at 8:22 pm
  
  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!
- 06.
  
  20 Very Useful CSS3 Tutorials | Speckyboy - Wordpress and Design says:Comment » April 22nd, 2008 at 8:31 pm
  
  [...] 15.Semantic code: put more in, get more out with CSS3 [...]

Subscribe to our RSS

OUR SPONSORS

Advertise here?

CATEGORIES

FRIENDS

Meta

CSS3

Comments

Leave a Comment