Define browser and OS using CSS?

Question

I know that it is incorrect to make CSS code for certain browsers or OS, but on the site I create there are certain elements that are not displayed in certain browsers. For example, some elements are not supported in IE8 or look weird on a small iphone display.

So my question is: using only CSS, is it possible to identify the user browser and os and allow me to encode various display options?

Duck and hello.

Answer 1

Unfortunately, I do not believe that this is only possible with pure css for each system.

However, you can use a combination of css and js to view the system.

See here: http://rafael.adm.br/css_browser_selector/

Answer 2

You cannot sniff the OS or browsers using CSS, but you can use @media queries to adjust different screen sizes, for example:

 @media screen and (max-width: 1000px) { ... } 

Above - for small screens for desktops and laptops.

 @media screen and (max-width: 700px) { ... } 

Above for iPad and VERY small screens for desktops / laptops.

 @media screen and (max-device-width: 480px) { ... } 

Above for iPhone 3GS and mobile devices in general.

However, the new iPhone 4 with the stylish Retina show Steve Jobs means it has a 2-1 pixel ratio, which means that 1 pixel actually appears in the browser as 2x2 pixels, which makes it resolution (960x640 is means that this will lead to the planning of the iPad, and not to the layout of the mobile device), so this requires another multimedia request (so far only webkit is supported):

 @media screen and (-webkit-min-device-pixel-ratio: 2) { ... } 

To target different browsers, you need to use the 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 bind the CSS stylesheet to these conventions

Answer 3

To customize devices based on screen size, use CSS multimedia queries :

 @media screen and (max-device-width: 10cm) {/* Small screen, like iphone */ } 

You can customize the version of IE using conditional comments :

 <!--[if lt IE 9]> <style>/* IE5,6,7,8 */</style> <![endif]--> 

Answer 4

You want to use conditional comments to serve IE style sheets and media queries for handling mobile browsers.

 <!--[if IE 8]> ... load stylesheets, JS or whatever here. <![endif]--> 

For multimedia queries, see http://www.w3.org/TR/css3-mediaqueries/ and ... well, http://www.google.com/search?q=media+queries+css3 .

Answer 5

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

Answer 6

Well, there is a CSS hacks browser that uses well-known bugs in CSS parser mechanisms, but it is not recommended to use it if you do not know what you are 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

To distinguish between different types of media (print, screen, mobile, etc.) see CSS Media Type . For specific browsers, check out this article .

Answer 8

Unable to determine browser or OS using CSS. This is for presentation only. You can target browsers with CSS hacks , but this will only serve CSS for the browser, not detect it.

You can use JS to detect the browser, for example, the browser CSS selector .

Answer 9

I would do it through server-side (php or something else that you are using). What you do is that you put the specific browser / os CSS file in a separate file and load it if that browser is detected (which you can detect using server-side scripts with a simple if statement)

Answer 10

Change CSS for a specific OS:

I wrote this function that recognizes whether your OS is XP or another, and puts the specific CSS as a 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; }