CSS Hacks Per Browser

First of all, most CSS hacks are generally considered bad practice and should be avoided whenever possible. With that said, there are times when using a CSS hack is necessary to target browser specific technologies.

Internet Explorer

IE is at the root of most CSS problems. To target IE specifically, create a seperate stylesheet for IE and another stylesheet for all other browsers. Then use conditional comments to load the IE-specific stylesheet.

<link rel="stylesheet" href="main.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->

You can even target specific versions of IE.

<!--[if IE 6]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->

Conditional comments are the ideal way to target IE and is considered a best practice.
IE 10 can be targeted by using the -ms prefix combined with a media query.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #searchButton { top:5px; }
}

Firefox

To target Firefox you would use the -moz prefix combined with the -document url-prefix() selector, which is how Firefox add-ons define their styles. This prefix only applies to Firefox and will be ignored by all other browsers.

@-moz-document url-prefix() {
    #searchButton { top:7px; }
}

Safari, Chrome and Opera (Webkit browsers)

Since all three browsers use the Webkit engine, it’s easy to target all three browser using the -webkit prefix. For the time being, Chrome is still using Webkit but will soon drop Webkit for the Blink engine. When that happens the -webkit prefix will no longer apply to Chrome. This example combines the -webkit prefix with a media query.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #searchButton { top:9px; }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Do the Math      
 

*