Spread the word

Saturday, January 10, 2009

How to Validate Browser Specific CSS Hacks

Almost everyone who is a XHTML/CSS Developer knows Browser Specific CSS Hacks. If you don't know then you can know what Browser Specific CSS Hacks are from here. While creating tableless websites on CSS the biggest issue we face is consistency of the pages over various browsers i.e. cross-browser compatibility. So to make the websites and pages cross-browser compatibile many times we use several Browser Specific CSS Codes or Hacks. Though it is advices to avoid those Hacks since they are not by the standards, many times we are unable to do that.



But the problem with browser specific CSS Hacks is Validation. As we also want our pages to be validated against the W3C stadards, we need to get those CSS validated. But while validating a CSS which has CSS Hacks, you will see that the "double slash (//)" and "underscore(_)" Hacks, which are Internet Explorer specific CSS Hacks, are not getting validated. You will have errors like: "Parse Error //" and "Property _ doesn't exist".

So here is an easy way to validate CSS with Internet Explorer specific CSS Hacks. Just simply use another hack instead of the "double slash (//)" and "underscore(_)" Hacks. Use the "* html" Hack for Internet Explorer.
For Example:
#header {
    margin-top: 10px;
}

* html #header {
    margin-top: 20px;
}

So here All browsers will take the first one and only Internet Explorer will take the second one. So all browsers will have margin-top 10px and only Internet Explorer will have margin-top 20x. So here is another Hack for you to use but this Hack is validated by the W3C CSS Validator.

5 comments:

Mark Turtle said...

Thanks buddy.
It's something I was looking for a pretty long time. I was always afraid of validating my CSS due to these hacks which i had to use for some designs.
Thanks for taking time and putting it here.

Anonymous said...

Doesn't * html only work on IE6 and below?

priteeksharma said...

Its not working w3c validation says
null parser error[empty string]
so plz find out new one.

Thamizharasi J said...

great tips thanks for your impressive enhancement of getting unique style of design a website. and it much more wonderful information to me. keep share many different ideas.
Best CAT Coaching in Chennai

Thamizharasi J said...

lot of things learnt from your blog. got more ideas for us. wonderful tips makes from yours. Executing digital marketing status very helpful one.
Best CAT Coaching in Chennai

Post a Comment