CODEWITHSUNDEEP
css
aurel
aurel

Reputation: 3122

CSS hacks (tricks)

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"?

Upvotes: 8

Views: 487

Answers (5)

pixeltocode
pixeltocode

Reputation: 5308

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/

Upvotes: 3

Sean Vieira
Sean Vieira

Reputation: 159905

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.

Upvotes: 4

AJ Love
AJ Love

Reputation: 1

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"

Upvotes: 0

Ryan Ternier
Ryan Ternier

Reputation: 8804

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/

Upvotes: 0

Andrew Vit
Andrew Vit

Reputation: 19249

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.

Upvotes: 6

Related Questions