Alternative To Conditional Stylesheets And CSS Hacks

When we  need to apply CSS for other browsers, we either create new CSS files and enclose it with conditional comments. This actually causes blocking issue, which slow downs  the site’s  loading speed for a few seconds. We might also use browser specific hacks which will create issues while getting W3C validation.

**What happens with Conditional Stylesheets?


Below I am using a typical example of using conditional stylesheets to work with various versions of Internet Explorer.

<!–[if IE 7]>

< ![endif]–>

<!–[if IE 6]>

< ![endif]–>

What happens when we use CSS Hacks?


.ClassName{ margin-right: 15px; _margin-right: 5px; float:right;}

Solution** **

We can make use of “Rob Larsen’s” technique which is used in Paul Irish’s boilerplate.

<!–[if lt IE 7 ]> <![endif]–>
<!–[if IE 7 ]> <![endif]–>
<!–[if IE 8 ]> <![endif]–>
<!–[if IE 9 ]> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–><!–<![endif]–>

So CSS experts out there, do you find this article useful? Do drop in your views and any other alternate solutions through your comments.

About Author

Huzaifa Darbar

Huzaifa Darbar

I am a Web Designer, CSS expert and love WordPress