Different CSS files for different browsers

Question

I want to use different CSS files for different types of browsers. Is there any simple HTML that can detect different types of browsers and contain CSS files accordingly?

Answer 1

I only know that:

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

also js detection

Answer 2

Do not use CSS hacks, Javascript to switch stylesheets, or anything like that.

I've never had to use multiple stylesheets for different browsers or any invalid CSS hacks.

It is not necessary. Conditional comments are probably useful for IE6 and lower for PNG fix files, but it follows that if you know CSS and various browser errors, you can easily code XHTML and CSS for IE 5.5 without any problems.

Answer 3

This is an object of type javascript. Javascript is very good for choosing a browser. Just use browser detection to point to another css file.

Put something like this in your head:

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

I can not confirm js, but it seems like what you need to do.

Answer 4

you need to use the server side for this in all browsers. If you choose the server path, you will have to parse the User-Agent header and add valid CSS from this parsing. I advise you not to do this , because parsing User-Agent partners is a tedious task, and there is a more elegant way to solve browser problems.

It is worth noting that if you are only interested in adding special CSS rules (files) for Internet explorer, there is a special syntax:

 <!--[if lte IE 6]> 

for IE 6 and up

Also note that there is some CSS framework to avoid using browser rules. The largest, in my opinion, is probably the YUI 3 Grid . This will provide you with the same look and feel in all browsers when used properly.

Answer 5

There are several different methods for browser-specific style sheets:

1) As already mentioned, you can use conditional operators to detect versions of IE, for example.

2) If you use a server language such as PHP, Ruby, etc., you may find a browser based on the HTTP_USER_AGENT server variable, for example.

 if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){ print "Firefox user."; $firefox = true; // process here for firefox browser } 

This method is powerful because you can detect almost any browser, and based on this you can include (or print, to be precise) any necessary .css file in your PHP template. For instance.

 if ($firefox) print '<link rel="stylesheet" href="http://site.com/firefox.css">'; 

The advantage of this method is that it happens first of all, even before the page begins to receive a message to the user, and you can accurately determine the version of the browser.

3) And, of course, you can detect the browser version using javascript, it only requires a couple of variables, for example.

 var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); 

But you need to use code that analyzes the values ​​of these variables, for example this example .

Answer 6

It is usually easier to use hacks in one style sheet.

This does not mean justifying their use (because I do not want the evangelists to change me :))

http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks

http://www.dynamicsitesolutions.com/css/filters/support-chart/

http://ajaxian.com/archives/css-browser-hacks

http://www.456bereastreet.com/archive/200411/the_underscore_hack/

For different versions of IE (usually the most important) there is a conditional IE "if", which can handle many parameters: http://www.quirksmode.org/css/condcom.html

Answer 7

HTML conditional comments work if you are trying to include CSS files specific to Internet Explorer. See this quirksmode attribute article for more information.

For other browsers, you need to either use JavaScript or on the server side, determine which browser the visitor uses, and depending on the result, include the appropriate CSS file. Another great article about quirksmode about what's here .

Answer 8

You should consider changing your desire to use different stylesheets for different browsers.

Almost everything is possible to do with the same stylesheet for all browsers. It takes a little more work to create clean markup and use robust styles, but what you get is not only less css files, but also a page that will most likely work in browsers you have never heard of , and future browser versions. Also thoughtful markup makes the page accessible to blind surfers, and this makes it easier for search engines to index more of your content.

This is what I used on our company website. I didn't need to change a single thing to make it work when IE 8 was released. :)

Please note that the right type of document is critical to ensure consistent browsing behavior. Without it, IE emulates most of the rendering errors from IE 4, including the wrong window model .

Answer 9

 <head> <link rel="stylesheet" type="text/css" href="generic.css" /> <![if gte IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]> <![if !IE]> <link rel="stylesheet" type="text/css" href="notie.css" /> <![endif]> </head> 

Answer 10

You can use JavaScript to detect and change css for different browsers, but the code is a bit cumbersome.

 <script type="text/javascript"> var nAgt = navigator.userAgent; var browserName = navigator.appName; var nameOffset,verOffset,ix; // In Opera, the true version is after "Opera" or after "Version" if ((verOffset=nAgt.indexOf("Opera"))!=-1) { browserName = "Opera"; } // In MSIE, the true version is after "MSIE" in userAgent else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) { browserName = "Microsoft Internet Explorer"; } // In Chrome, the true version is after "Chrome" else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) { browserName = "Chrome"; } // In Safari, the true version is after "Safari" or after "Version" else if ((verOffset=nAgt.indexOf("Safari"))!=-1) { browserName = "Safari"; } // In Firefox, the true version is after "Firefox" else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) { browserName = "Firefox"; } // In most other browsers, "name/version" is at the end of userAgent else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) { browserName = nAgt.substring(nameOffset,verOffset); fullVersion = nAgt.substring(verOffset+1); if (browserName.toLowerCase()==browserName.toUpperCase()) { browserName = navigator.appName; } } if (browserName == "Microsoft Internet Explorer") { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ms.css\">"); } else if (browserName == "Firefox") { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ff.css\">"); } else { document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/other.css\">"); } </script>