How to provide CSS properties for different browsers like Mozilla and Chrome

Question

If I would like to provide a unique page property (e.g. index.html) for different browsers. For example: blue background for Chrome and Red Background for Firefox, then how can I write CSS code for this case?

Answer 1

Using CSS Media Queries (Chrome / Safari)

@media not all and (-webkit-min-device-pixel-ratio:0) { #example { width: 200px; } } 

Special css file for Chrome / Safari (Chrome / Safari)

 <link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" /> 

Here is a list of CSS Hacks

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

Answer 2

Firstly, browser sniffing is bad, and you will almost certainly regret it.

However, if you need to, you can do this on the server side as follows: Browser bypass with .htaccess

Ideally, stick to the best practice, which is to use conditional comments in your HTML to handle older versions of IE and write CSS, which intentionally works in sequence with a cross browser.

Answer 3

You can try the following:

 <script type="text/javascript"> var browser=navigator.appName; if browser == "Microsoft Internet Explorer" { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">"); } else if browser == "Firefox" { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">"); } else { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">"); } </script> 

Source: fooobar.com/questions/1442591 / ...

Or you can use commands such as:

 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]--> <![if !IE]> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <![endif]> 

Answer 4

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari">

This is a bug in WebKit / Blink, and Chrome plans to fix it in version 50, so it will no longer work.

http://code.google.com/p/chromium/issues/detail?id=286682

https://groups.google.com/a/chromium.org/forum/m/#!topic/blink-dev/nH1O6WszMgo