css hacks (tricks)

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 few other times i see code (which is considered as "tricks") that I have never seen before

other than asking what the above code means, me question is - is there any documentation, book or blogs that go through the advanced/less known css "tricks"

thanks a lot

Answer 1

The above targets elements that have a role attribute, such as:

<div role="navigation">
  <a href="...">...</a>
</div>

A class would make sense here too, but it's just another way of doing it. Attribute selectors are a standard part of CSS2, but at the time IE6 didn't support them so it hasn't been used much until recently.

There are many other such selectors that have been around for a long time but couldn't be used due to limitations imposed by IE. See Quirksmode for more examples.

Answer 2

That is a CSS attribute selector. It's saying "All <a> tags that are descendents of an element that has an attribute of role with a value of navigation should be styled in the following way ..."

He's using it for accessibility principally, and for styling only secondarily.

If you are looking to learn some of the newest things about CSS, I'd recommend css3.info and css3please.com. The first is a great source of examples of new tricks, and the second one lets you play with the new stuff in the browser. Other than that ... I've found that the best way to learn is to answer questions here (looking things up when you are not sure) combined with reading -- Eric Myers, Paul Irish, Quirksmode -- all of these are good resources for learning things that are new to you.

Answer 3

Role is a new XHTML2 attribute.

http://www.wait-till-i.com/2009/05/16/pitching-a-hack-or-a-product-dos-and-donts/

http://www.w3.org/TR/2008/WD-xhtml-role-20080407/

Answer 4

Cool, which browser did it work in?

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors

E[foo="bar"]

an E element whose "foo" attribute value is exactly equal to "bar"

Answer 5

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/