How to write specific CSS for mozilla chrome and IE

Question

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

User · Answer

You could use php to echo the browser name as a body class, e.g.

<body class="mozilla">

Then, your conditional CSS would look like

.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}

User · Answer

use agent detector and then with your web language create program to create css   for example in python  csscreator       useragent   detector       if useragent     Firefox            css    your css              return css

User · Answer

you can use this code in your css file    -webkit-top 9px    -moz-top 7px   top 5px          the code -webkit-top 9px  is for chrome  -moz-top 7px is for mozilla and the last one is for IE     Have Fun

User · Answer

Check out this link   http   webdesignerwall com tutorials css-specific-for-internet-explorer 2 CSS Rules Specific to Explorer  IE CSS hacks  Another option is to declare CSS rules that can only be read by Explorer  For example  add an asterisk     before the CSS property will target IE7 or add an underscore before the property will target IE6  However  this method is not recommended because they are not valid CSS syntax  IE8 or below  to write CSS rules specificially to IE8 or below  add a backslash and 9   9  at the end before the semicolon  IE7 or below  add an asterisk     before the CSS property  IE6  add an underscore     before the property   box   background  gray     standard     background  pink 9     IE 8 and below      background  green     IE 7 and below      background  blue     IE 6

User · Answer

Place your css in the following script and paste it into your CSS file    media screen and  -webkit-min-device-pixel-ratio 0    your complete css style     For example   media screen and  -webkit-min-device-pixel-ratio 0    container   margin-top  120px       Works like a charm

User · Answer

Since you also have PHP in the tag  I m going to suggest some server side options   The easiest solution is the one most people suggest here   The problem I generally have with this  is that it can causes your CSS files or  lt style gt  tags to be up to 20 times bigger than your html documents and can cause browser slowdowns for parsing and processing tags that it can t understand -moz-border-radius vs -webkit-border-radius  The second best solution i ve found  is to have php output your actual css file i e     lt link rel  stylesheet  type  text css  href  mycss php  gt   where    lt  php header  Content-Type  text css    if  preg match   chrome      SERVER  HTTP USER AGENT             output chrome specific css style   else        output default css style     gt    This allows you to create smaller easier to process files for the browser   The best method I ve found  is specific to Apache though   The method is to use mod rewrite or mod perl s PerlMapToStorageHandler to remap the URL to a file on the system based on the rendering engine   say your website is http   www myexample com  and it points to  srv www html   For chrome  if you ask for main css  instead of loading  srv www html main css it checks to see if there is a  srv www html main webkit css and if it exists  it dump that  else it ll output the main css   For IE  it tries main trident css  for firefox it tries main gecko css   Like above  it allows me to create smaller  more targeted  css files  but it also allows me to use caching better  as the browser will attempt to redownload the file  and the web server will present the browser with proper 304 s to tell it  you don t need to redownload it   It also allows my web developers a bit more freedom without for them having to write backend code to target platforms   I also have  js files being redirected to javascript engines as well   for main js  in chrome it tries main v8 js  in safari  main nitro js  in firefox  main gecko js   This allows for outputting of specific javascript that will be faster less browser testing code feature testing    Granted the developers don t have to target specific and can write a main js and not make main  lt js engine gt  js and it ll load that normally   i e  having a main js and a main jscript js file means that IE gets the jscript one  and everyone else gets the default js  same with the css files

User · Answer

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   http   php net manual en function get-browser php http   techpatterns com downloads php-browser-detection-basic php http   techpatterns com downloads php browser detection php  contains JS also    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 gt body  tres   color  red       IE8  FF  Saf  Opera  Everything but IE 6 7     html gt     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   gt   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

User · Answer

For clean code  you might make use of the javascript file here  http   rafael adm br css browser selector   By including the line    lt script src  css browser selector js  type  text javascript  gt  lt  script gt    You can write subsequent css with the following simple pattern    ie7  thing      background-color  orange    chrome  thing      background-color  gray

User · Answer

Paul Irish s approach to IE specific CSS is the most elegant I ve seen   It uses conditional statements to add classes to the HTML element  which can then be used to apply appropriate IE version specific CSS without resorting to hacks   The CSS validates  and it will continue to work down the line for future browser versions   The full details of the approach can be seen on his site   This doesn t cover browser specific hacks for Mozilla and Chrome    but I don t really find I need those anyway

[php] How to write specific CSS for mozilla, chrome and IE

Examples related to php

Examples related to html

Examples related to css

Examples related to browser-detection