CSS Browser Specific Hacks

 
internet browsers

Browser compatibility issue is one of the major headache of web developers specially the earlier Internet Explorer (IE6, IE7 and IE9). As a web / front-end developer I need to test websites in different browsers such as Chrome, Firefox, Internet Explorer, Safari and Opera before launching it. Good thing that there’s a browser specific hacks that helps me on layout issues. I compile some of the hacks below:

Selector Hacks

IE6 and below
* html #id { color: black }

IE7
*:first-child+html #id { color: black }

IE7, FF, Saf, Opera
html>body #id { color: red }

IE8, FF, Saf, Opera (Everything but IE 6,7)
html>/**/body #cuatro { color: red }

Opera 9.27 and below, safari 2
html:first-child #cinco { color: red }

Safari 2-3
html[xmlns*=””] body:last-child #seis { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+
body:nth-of-type(1) #siete { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+
body:first-of-type #ocho { color: red }

saf3+, chrome1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

iPhone / mobile webkit
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

Safari 2 – 3.1
html[xmlns*=""]:root #trece { color: red }

Safari 2 – 3.1, Opera 9.25
*|html[xmlns*=""] #catorce { color: red }

Everything but IE6-8
:root *> #quince { color: red }

IE7
*+html #dieciocho { color: red }

Firefox only. 1+
#veinticuatro, x:-moz-any-link { color: red }

Firefox 3.0+
#veinticinco, x:-moz-any-link, x:default { color: red }

Attribute Hacks

IE6
#once { _color: blue }

IE6, IE7
#doce { *color: blue; /* or #color: blue */ }

Everything but IE6
#diecisiete { color/**/: blue }

IE6, IE7, IE8
#diecinueve { color: blue\9; }

IE7, IE8
#veinte { color/*\**/: blue\9; }

IE6, IE7 — acts as an !important
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Reference: CSS Tricks


Related Entries