CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

Find the browser version using css

I have a problem with IE8, so I need to apply some css only if browser is not IE8

In html I can do it using

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

But I want to filter this using CSS

Is there a way where I can instruct browser apply these styles if its not IE8 ?

For example, how can i make this css not have any impact in IE8?

@font-face{
//some css
}

Upvotes: 0

Views: 88

Answers (3)

justtry
justtry

Reputation: 639

For only IE of specific version best way is to use conditional comments in HTML, like this (and like you mentioned):

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

But also you can do in this way for IE 8 only:

@media \0screen {
    body { background: blue; }
}

More info here : http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

Upvotes: 1

Luke
Luke

Reputation: 1377

IE 8 doesn't support media queries - you can use that (just insert your CSS inside some broad media query).

Have a look at list of browser-specific CSS hacks here or here. Below I copy-pasted some concerning IE 8:

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

Upvotes: 1

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

Conditional comments would work (<!--[if lte IE 8]><stylesheet><![endif]-->), but if you want to do it all in the stylesheet, there is a way:

body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE only */  
}

The important thing here is the "\9", which has to be exactly "\9". I'm not clear on exactly why this is.

EDIT: The \9 hack isn't enough by itself. To exclude IE9, you also need the :root hack:

:root body {
    color: red\9; /* IE9 only */  
}

Other browsers besides IE might support :root, so combine it with the \9 hack if you're using it to target IE9.

IE6

Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.

body {
 color: red; /* all browsers, of course */
 color : green\9; /* IE8 and below */
 *color : yellow; /* IE7 and below */
 _color : orange; /* IE6 */
}

For More Information

http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575

Upvotes: 2

Related Questions