Question

Sometimes when I see a website I like or sites from respected people, I see the source codes and try to understand them (as we all do).

On Jeremy Keiths site he uses the following code:

[role="navigation"] a {
font-weight: bold;
text-decoration: none; }

I have never seen this before, and a few other times I saw code (which can be considered a “trick”) that I had never seen before.

Other than asking what the above code means, my question is – is there any documentation, book or blogs that go through to learn about the advanced/less known CSS “tricks”?

Answer 1

In this example, the <nav> is wrapped in a <div> and then then assigned a navigation role. The same can be achieved with just

nav a {}

A lot of sites seem to mix a “little” HTML5 with XHTML. I really don’t see a reason why they don’t use HTML5 “completely”. The whole point of HTML5 is to be more semantic and to write less code that’s more meaningful.

Some useful links.

http://html5doctor.com/

http://htmldog.com/

http://desizntech.info/2009/03/discover-the-cool-of-css-25-advanced-css-techniques/

As of now, you’ll need a bit of javascript to make HTML5 elements work in IE. These links should help

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

http://remysharp.com/2009/01/07/html5-enabling-script/