I need to detect the browser and apply the matched CSS file.
I have created 3 css files: __ie.css, ff.css, opera.css. Now I need to detect the browser in order to include the good one.
I know this
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css"/>
<![endif]-->
But how do I do the same with Firefox and Opera/Chrome?
The closest you can come with pure CSS is with feature queries. Instead of detecting the browser type/version, it allows you to check if a specific property/value combinations are supported by the browser.
The following is an example of using the transform property for vertical centering. If the browser doesn't support transform, then we don't want to adjust its positioning:
@supports (transform: translateY(-50%)) {
.foo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
If you have to detect browsers just to apply CSS, then you might want to rethink your CSS before going to browser-specific stylesheets. All it takes is for one browser to mimic another's user agent string, or a new version to be released, and everything breaks. Use the current standards and validate your code (http://validator.w3.org/), and you'll have to worry about far fewer cross-browser issues. Even just using <!--[if IE]><![endif]--> without a version number could break the layout in later versions.
That being said, if you want to style the page differently based on what CSS features are available, take a look at Modernizr. This way, you're only checking features, which won't be broken if a new version of the browser is released.
If all else fails and you really need to detect the visitor's browser, try jquery.browser. It's built into jQuery, and is simple to use. http://api.jquery.com/jQuery.browser/.
I got a requirement of adding pure CSS to show thin scrollbars in my application which should apply for every browser, so I did it in this way. This code will detect the browser and sets the style to the scrollbars in entire application.
// Scroll bar css settings in global css file like styles.css
/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
html,
body,
div {
scrollbar-face-color: #d1d8da;
scrollbar-track-color: #dcd5d5;
scrollbar-3dlight-color: #dcd5d5;
scrollbar-darkshadow-color: #dcd5d5;
scrollbar-arrow-color: #dcd5d5;
-ms-overflow-style: -ms-autohiding-scrollbar; // this one will hide scroll-bars after sometime
scrollbar-width: thin;
}
}
/* for chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
::-webkit-scrollbar {
width: 8px;
height: 5px;
border-radius: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #dcd5d5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #d1d8da;
}
::-webkit-scrollbar-thumb:hover {
background-color: #767979;
}
}
/* for firefox */
@-moz-document url-prefix() {
html,
body,
div {
scrollbar-width: thin;
scroll-behavior: smooth;
}
}<div style="height: 150px;width: 400px;overflow: auto;">
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
Sometimes you can use prefixed properties that each browser apply their own properties based on their prefixes and ignore others. Following code fills a background by CSS3 gradient:
background-color: green;
background-image: url(my-img.png);
background-image: -webkit-linear-gradient(top right, #b51111, #eeeeee);
background-image: -moz-linear-gradient(top right, #b51111, #eeeeee);
background-image: -ms-linear-gradient(top right, #b51111, #eeeeee);
background-image: -o-linear-gradient(top right, #b51111, #eeeeee);
background-image: linear-gradient(top right, #b51111, #eeeeee);
In this code:
But generally speaking, browser sniffing is not the best way, because it can easily fail in newer browsers. In that way, you have to get User Agent string of the browser and parse it. Then apply specific css rules for each browser based on its supported features. If User Agent string of the browser change in newer versions, you must modify your browser sniffing code. Imagine that you want to support multiple browsers and each of them may release some new versions in one year! You can query the browser that if it supports a given feature. e.g. HTML5 video:
if(!!document.createElement('video').canPlayType === true) {
// run some code that relies on HTML5 video
} else {
// do something else
}
There is a feature detection library named Modernizr that is written based on JavaScript. You can download it and include it using in your html page. Also you must add 'no-js' class to your element. Modernizer runs all of its feature detection tests and and some classes to element; something like this:
<html lang="en-gb" class=" js no-flexbox no-flexbox-legacy canvas canvastext
webgl no-touch geolocation postmessage websqldatabase no-indexeddb
hashchange history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-cssreflections csstransforms
no-csstransforms3d csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache svg inlinesvg
smil svgclippaths">
So, you can apply CSS rules selectively. For instance, you want to apply an animated 3D transform in supporting browsers or display something in others. Consider the following code:
#my-div:hover {
transform: rotateY(90deg);
}
for default case and below for alternative:
.no-csstransforms3d #my-div:hover {
position: relative;
right: 200px;
}
This is a good article describing the concept.
If you need to browser detect for Firefox, Opera and Chrome, then you're doing something wrong. The same CSS should work in all of them.
There are exceptions to this of course -- all the browsers have missing features and bugs which don't appear in the other browsers. An example would be text-overflow:ellipsis which isn't supported by Firefox.
However, if you're sticking to commonly used features, these cases are few and far between, and in general, you really shouldn't need to do browser detection these days, except for various versions of IE.
If you're not sure whether the features you want to use are supported by most browsers, you can find out at CanIUse.com or Quirksmode.
If you're using seriously cutting-edge features, then yes, you will have problems with cross-browser support. But in this case it's generally better to do feature detection, using a product like Modernizr, rather than browser detection, since this will be a more reliable way of ensuring you cover all browsers and all versions, including future versions (which is an inherent weakeness of browser detection).
There are no conditional comments for browsers other than IE.
But you can do it with javascript: http://www.quirksmode.org/js/detect.html
Maybe I'm too late, but. The better solution is to use CSS/JS Browser Determiner (4kb minified). Disclaimer: This is a commercial product that I sell.
To separate CSS and JS files, past this code to your <html> tag:
<head><script src="js/cssjs-browser-determiner.min.js"></script>
<!-- Old Browsers -->
<script>
browser.is_old && document.writeln(
'<link href="styles/old-browser.css" rel="stylesheet">'
);
</script>
This file will be only loaded for old browsers (by default, those that does not support CSS3 transition). If you want to separate files for each specific browser you can do the same but change browser.is_old to browser.chrome or browser.webkit etc...
Then, write some CSS for specific browser inside old-browser.css (or any other CSS file):
.opera9 .my-el { ... }
.firefox1_5 .my-el { ... }
.ie8- .el { ... } // IE8 or less
.ios .el { ... } // iPhone, iPad, iPod
etc...
