Why YUI Reset CSS doesn't pass Validation?

Question

I tried to validate my site's CSS using the W3C CSS Validator. Unfortunately, reset-min.css from YUI framework produced parse error on the string " {*font-size:100%; ".

The validator results.

On further investigation I noticed the following error on Firefox's error console:

Warning: Expected declaration but found '*'. Skipped to next declaration.

I couldn't find any explanation for the meaning of the '*', nor references for a problem in this popular reset CSS.

What am I missing?

Chatterbox

Answer 1

This is a hack for IE7 and lower. IE7 and lower will skip the asterisk and continue to parse the CSS as normal. Other browsers will just ignore the entire rule.

As an example, since CSS will use the last declared version of a rule, doing the following will cause IE7 and below to use a font-size of 113%, while other browsers use a font-size of 100% for paragraphs.

p { font-size: 100%; *font-size: 113%; }

There is a little more information at webdevout.net.

Personally, I think that it is acceptable to use such hacks for the purposes of working around the brokenness of IE. Apparently, Yahoo! feels the same way.

Softball

While I'm no purist, I still prefer to throw that garbage into an IE conditional (more concerned about the ugly than the validity.) – Snare

Answer 2

It's probably an IE compatibility hack.

There are many CSS syntax errors that some browsers (notably IE 6) will ignore and others won't. Some CSS files will use the errors to make a rule that one browser will see and another browser won't.

EDIT: For a full list, see here. In your particular case, that rule will be seen only by IE 7 or lower.

Seem

Yep, just grab the declarations with the * and put them in an IE conditional CSS file without the * and then you can validate. – Snare