Home/ Questions/Q 3443608
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:48:44+00:00

What would be the CSS conditional statement you can use to include specific CSS

  • 0

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’ ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    See

    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 */

    Source: http://paulirish.com/2009/browser-specific-css-hacks/

    If you want to use Plugin then here is one

    http://rafael.adm.br/css_browser_selector/

    • 0