CODEWITHSUNDEEP
cssbrowser
user1780677
user1780677

Reputation:

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

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

Upvotes: 4

Views: 30522

Answers (4)

j.j.
j.j.

Reputation: 2100

<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

Upvotes: 0

James Smith
James Smith

Reputation: 538

First up, browser sniffing is bad and you will almost certainly regret doing it.

However, if you must, you could do it server-side like this: Browser sniffing with .htaccess

Ideally though, stick with best practice, which is to use conditional comments in your HTML to handle old versions of IE, and write CSS that deliberately works consistently cross-browser.

Upvotes: 5

Victor Gutierrez
Victor Gutierrez

Reputation: 670

Using CSS Media Queries (Chrome/Safari)

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

Chrome/Safari specific css file (Chrome/Safari)

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

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

Upvotes: 10

FredFloete
FredFloete

Reputation: 659

You can try this:

<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: https://stackoverflow.com/a/1706221/1087653

Or you can use commands like:

<!--[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]>

Upvotes: 0

Related Questions