Make your website cross-browser compatible

Forget about CSS hacks as they should only be temporary solutions and will eventually break upon browser updates.  You want robust CSS with minimal amount of HTTP calls for the best performance.  So here’s the code using conditional comments adding a class to theelement:

[code]<!–[if LTE 7 ]><html class="ie7"><[endif]–>
<!–[if IE 8 ]><html class="ie8"><![endif]–>
<!–[if IE 9 ]><html class="ie9"><![endif]–>
<!–[if gt IE 9 ]><!–><html><!–>![endif]–&gt;[/code]

The first line gives the body a class of “ie7” if the browser is Internet Explorer 7 or less, followed by lines detecting versions 8, 9, and greater than 9.   Now you can change the styles with CSS code as such:

 

[code]
#header { background-color: yellow; //default rule }
.ie7 #header { background-color: orange //rule for IE7 }
.ie8 #header { background-color: red //rule for IE8 }
.ie9 #header { background-color: blue //rule for IE9 }
[/code]

 
I didn’t discover this method so the credit goes to Paul Irish.

Limiting the number of stylesheets you are will improve the performance for a high-traffic website. So keep your media queries for alternative resolutions in the same file.

 

[code]
@media screen and (max-width: 320px) {
.iphones { width: 320px }
}
[/code]

Using a media query inside a link tag will actually load the css file and the images in it, even if the display is set to none,; except for Firefox and Opera.

[code]&lt;link href="iphone.css" rel="stylesheet" media="screen and (max-width: 320px)" />;
[/code]

For browser vendor specific CSS you can speed up your coding time with the web app PREFIXR.  It reads CSS3 styles and automatically applies your rule to work for the main other browsers.

  • -mos- for Mozilla
  • -webkit- for Apple browser Safari
  • -ms- for Microsoft
  • -o- for Opera