-
200716 Jan
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.
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.
-
03.
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 :) -
04.
-
05.
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 […]
-
07.
[…] 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. […]
-
08.
70 Must-Have CSS3 and HTML5 Tutorials and Resources - Iconlandia says:Comment » August 10th, 2009 at 5:02 pm
[…] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. […]
-
09.
70 Must-Have CSS3 and HTML5 Tutorials and Resources - Programming Blog says:Comment » August 12th, 2009 at 2:31 am
[…] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. […]
-
10.
[…] Semantic Code: Put More In, Get More Out – 一个快速教程,涉及 CSS3 选择器使用和语义,以及为网站添加新功能的方法。 […]
-
11.
CSS3 y HTML5: Tutoriales y recursos para el nuevo diseño web | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog says:Comment » August 31st, 2009 at 10:46 am
[…] Semantic Code: Put More In, Get More Out – Ejemplo sobre como utilizar selectores CSS3 para añadir funcionalidades a un web site. […]
-
12.
70 Must-Have CSS3 and HTML5 Tutorials and Resources « Adept - Design & Development Royalty says:Comment » September 2nd, 2009 at 10:31 pm
[…] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. […]
-
13.
[…] 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. […]
-
14.
SmashingWebs: Online Show case for Designers » » 50 CSS3 Tutorials That Makes Your Works Perfect says:Comment » January 17th, 2010 at 7:52 am
[…] 43. Semantic code: put more in, get more out with CSS3 […]
-
15.
50 CSS3 Tutorials That Makes Your Works Perfect – multimediaDev says:Comment » January 17th, 2010 at 12:06 pm
[…] 43. Semantic code: put more in, get more out with CSS3 […]
-
16.
[…] 21. Semantic Code: Put More In Get More Out […]
-
17.
70 Fantastic CSS3 and HTML5 Tutorials and Resources | Designer Wall | The Best of Css, Web Design, Tuts & Inspiration says:Comment » April 14th, 2010 at 8:47 am
[…] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. […]
-
18.
50 CSS3 Tutorials That Makes Your Works Perfect - Smashingwebs says:Comment » June 29th, 2010 at 7:39 pm
[…] 43. Semantic code: put more in, get more out with CSS3 […]
-
19.
[…] Semantic Code: Put More In, Get More Out – 一个快速教程,涉及 CSS3 选择器使用和语义,以及为网站添加新功能的方法。 […]
-
20.
25 Essential Tutorials And Resources For Learning CSS3 | CSSReflex.com says:Comment » August 10th, 2010 at 11:48 pm
[…] 21. Semantic Code: Put More In Get More Out […]
-
21.
70 CSS3 and HTML5 Tutorials and Resources « W3 Web Designer | Kerala Web Designer says:Comment » September 15th, 2010 at 7:12 am
[…] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. […]
-
22.
[…] Semantic Code: Put More In, Get More Out – 一个快速教程,涉及 CSS3 选择器使用和语义,以及为网站添加新功能的方法。 […]
-
23.
[…] Semantic Code: Put More In, Get More Out – 一个快速教程,涉及 CSS3 选择器使用和语义,以及为网站添加新功能的方法。 […]
-
24.
[…] Semantic Code: Put More In, Get More Out – 一个快速教程,涉及 CSS3 选择器使用和语义,以及为网站添加新功能的方法。 […]
-
25.
Wow, great article.Really looking forward to read more. Awesome.
-
26.
70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Help 101 says:Comment » May 18th, 2012 at 1:22 am
[…] Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site. […]
-
01.