How to write specific CSS for mozilla, chrome and IE

Tags: php,html,css,browser-detection

Problem :

What would be the CSS conditional statement you can use to include specific CSS for IE, Mozilla, Chrome.

If IE  
#container { top: 5px; }  

If Mozilla 
#container { top: 7px; }    

If Chrome  
#container { top: 9px; }

What would be the respective 'If's' ?

Solution :

For that

  • You can scan user Agent and find out which browser, its version. Including the OS for OS specific styles
  • You can use various CSS Hacks for specific browser
  • Or Scripts or Plugins to indentify the browser and apply various classes to the elements

Using PHP


Then then create the dynamic CSS file as per the detected browser

Here is a CSS Hacks list

/***** Selector Hacks ******/

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

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

/* IE7, FF, Saf, Opera  */
html>body #tres { 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 */


If you want to use Plugin then here is one

    CSS Howto..

    how to give margin between li using css?

    How to add a background to a boostrap grid row (including padding!)?

    how to apply div on hover my table td

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    How to shield a HTML tag from CSS?

    php search result images show across and fill a CSS div

    How to change the css color code permanent using php

    How to link to a CSS if a certain condition happens?

    HTML5/CSS3 how to force text to require a certain width for rendering

    how to fix menu bar css-adapter stuffs with IE

    How to hide a div with jquery or alternative?

    How to solve this HTML/CSS bug? [closed]

    how would i get the headline to fade in and move up very slightly on page load with css

    How to vertically center inline elements in CSS

    How to change/add CSS inside of iframe by jQuery

    WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?

    How to format text in input box with css

    How Polymer Hero Transition works

    How can I make a fade in function without using jQuery like this? (JavaScript)

    How to style DOM element with CSS that was created with JavaScript function

    How to make tabs with pure HTML/CSS

    Having problems implementing a jQuery photo slideshow

    How to prevent default Css scroll onclick and allow javascript event only?

    How do I align my radio button with associated text?

    How can I select complete
  • element in navigation bar when hovered or selected?
  • How to move a block of content to the right of another block without moving it in the DOM

    How to get full height of webpage with CSS?

    How to add padding and border that doesn't change width if using 960 grid system

    how to set html inline css from django

    How can I create a responsive web page layout with 'display:inline-block'?