Browser specific CSS rules you Must Memorize Part-1

By

September 20, 2012CSS3 Comments

This tutorial is intended for those who know about basic CSS rules and selectors. If you are a beginner to CSS it would be better to learn about basic CSS rules and follow this tutorial.

Writing a single CSS rule for an element to support in all major browsers is a big headache. So we must memorize few rules specific to the browsers to keep the same look and feel in all browsers. In this tutorial we are going to focus on IE (6, 7, 8 &  9) , Firefox, Chrome, Safari and Opera CSS hacks tips.

SELECTOR HACK:

html, body, div, span, label …. are selector elements. ‘html’ is the parent selector for all elements in a web page hope you can understand the selector elements accordingly.

If specific rules needs to be applied in IE 6 & IE 7 you can make use of the below selector hack rules,

/* IE6 and below */
* html #element_id  { color: red }

/* IE7 */
*:first-child+html #element_id { color: red }

 

For IE 7, Firefox, Safari and Opera you can use below selector hacks,

html>body #element_id { color: red }

 

For IE 8, Firefox, Safari and Opera you can use below selector hacks,

html>/**/body #element_id { color: red }

 

For Safari 2 and Opera 9(&below) you can use below selector hacks,

html:first-child #element_id { color: red }

 

For Safari 2 & 3 you can use below selector hacks,

html[xmlns*=""] body:last-child #element_id { color: red }

 

For Safari 3+, Chrome 1+, Opera 9+ and Firefox 3.5+ you can use below selector hacks,

body:nth-of-type(1) #element_id { color: red }
body:first-of-type #element_id {  color: red }

 

For Safari 3+ and Chrome 1+ you can use below selector hacks,

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #element_id  { color: red  }
}

 

For iPhone / Mobile webkit you can use below selector hacks,

@media screen and (max-device-width: 480px) {
 #element_id { color: red  }
}

 

For Safari 2-3.1 you can use below selector hacks,

html[xmlns*=""]:root #element_id  { color: red  }

 

For Safari 2-3.1 & Opera 9.25 you can use below selector hacks,

*|html[xmlns*=""] #element_id { color: red  }

 

For exclude IE 6-8 you can use below selector hacks,

:root *> #element_id { color: red  }

 

For IE 7 you can use below selector hacks,

*+html #element_id {  color: red }

 

For Firefox only you can use below selector hacks,

#element_id,  x:-moz-any-link  { color: red }

 

For Firefox 3+ you can use below selector hacks,

#element_id,  x:-moz-any-link, x:default  { color: red  }

 

For Firefox 3.5+ you can use below selector hacks,

body:not(:-moz-handler-blocked) #element_id { color: red; }

 

In this tutorial we have covered selector Hacks there is one more called Attribute hack which you can see in browser-specific-css-rules-you-must-memorize-part-2 .

  • http://www.formandfunction.com/ Jonathan

    Excuse me, how do you call this article a Tutorial? It’s a list of hacks w/o much else.
    This was little help for myself trying to apply css to Chrome w/o affecting Safari.

    • mydons

      Hi Jonathan! since its based on Browser uniformity we call it as Tutorial simple.

  • anteas38

    hi,
    I dont understeand why you write FF 3.5+, version recent is 26 :(