Identify Browser and OS with CSS? - css

Question

I know it is not the correct thing to do to code specific CSS for specific Browsers or OS's but in a site I am building there are certain elements which do not render well in specific browsers. For example certain elements are not supported in IE8 or look weird in small iphone display.
Therefore my question is - using just CSS is it possible to identify the users browser and os and allow me to code different display option?
Dank u wel.

Answer 1

Sadly I dont believe it possible with just pure css for each system.
However you can use combination of css and js to see system.
See here: http://rafael.adm.br/css_browser_selector/

Answer 2

You cannot sniff OS or browsers with CSS but you can use #media queries to target different screen sizes, for example:
#media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
#media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
#media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
#media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
To target different browsers you need to use HTML if statements:
<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
Then just link your CSS stylesheet inside these conditionals

Answer 3

To target devices depending on screen size, use CSS media queries:
#media screen and (max-device-width: 10cm) {/* Small screen, like iphone */ }
You can target IE versions with conditional comments:
<!--[if lt IE 9]>
<style>/* IE5,6,7,8 */</style>
<![endif]-->

Answer 4

You'll want to use conditional comments to serve IE-specific stylesheets and media queries to handle the mobile browsers.
<!--[if IE 8]>
... load stylesheets, JS or whatever here.
<![endif]-->
For media queries, see http://www.w3.org/TR/css3-mediaqueries/ and... well, http://www.google.com/search?q=media+queries+css3.

Answer 5

You could always use the CSS hacks outlined here: http://www.quirksmode.org/css/condcom.html

Answer 6

Well, there are browser CSS hacks which exploit known bugs in CSS parser engines, but it’s not recommended to use these unless you know what you’re doing.
Example:
selector { property: value; } /* regular, valid CSS */
selector { *property: value; } /* will only work in IE7 and older IEs */
selector { _property: value; } /* will only work in IE6 and older IEs */

Answer 7

For distinguishing between the different media types (print, screen, mobile, etc.) have a look at the CSS Media Type rules. For browser specific hacks, have a look at this article.

Answer 8

It is not possible to identify a browser or OS with CSS. It is for presentation only. You can target browsers with CSS hacks, but this will only serve the CSS to the browser, not detect it.
You can use JS to detect the browser like the CSS browser selector plugin does.

Answer 9

I would do it via server side (php or whatever you're using). What you do is you put the browser/os specific css in a separate file and load it if that browser is detected (which you can detect via server side scripting with a simple if statement)

Answer 10

Change CSS for specific OS:
I wrote this function that recognize if your OS is XP or different and puts specific CSS as consequence.
function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';
if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){ /* if is windowsXP */
css.href = 'styleXP.css';
} else {
css.href = 'style7.css';
}
document.getElementsByTagName("head")[0].appendChild(css);
return false;
}