Target IE9 Only via CSS

Target IE9 Only via CSS

I suggest using condcoms to feed an IE9 css file or have a conditional html class, similar to:

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]--> 
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

Need hack for ie9 only

You can use this :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

How to target only IE (any version) within a stylesheet?

Internet Explorer 9 and lower :
You could use conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that you wanted to specifically target.like below using external stylesheet.

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

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11 :
Create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

Microsoft Edge 12 : Can use the @supports rule
Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}

Inline rule IE8 detection

I have 1 more option but it is only detect IE8 and below version.

  /* For IE css hack */
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */

As you specefied for embeded stylesheet. I think you need to use media query and condition comment for below version.

How to define specific CSS rules for IE9 alone?

Note the accepted answer also targets IE10. As such, for a more complete list:

IE 6

* html .ie6 {property:value;}

or

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
.ie67 {property:value;}
}

or

.ie67 { *property:value;}

or

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
.ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

or

@media \0screen {
.ie8 {property:value;}
}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {
.ie8910 {property:value;}
}

IE 9 only

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
// IE9 CSS
.ie9{property:value;}
}

IE 9 and above

@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}

IE 9 and 10

@media screen and (min-width:0) {
.ie910{property:value;}
}

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript alternatives

Modernizr

Modernizr runs quickly on page load to detect features; it then
creates a JavaScript object with the results, and adds classes to the
html element

User agent selection

The Javascript:

var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Adds (e.g) the below to the html element:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Allowing very targetted CSS selectors, e.g.:

html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}

Footnote

If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.


Attribution / Essential Reading

  • Keith Clarke
  • Paul Irish
  • Web Devout
  • The Spanner

how to target css for ie9 only?

Use like this:

li{
float: none !important;
float: left \9 !important;/* \9 is used after left not after important*/
}

!important should always be at the end.

Is the css :target selector supported in IE9 in spite of w3schools saying it's not?

Yes, IE9 is the first version of Internet Explorer to support the :target pseudo-class, so you are safe to use it with IE9

That aside, w3schools is not generally considered to be the best resource for up-to-date information. I find Can I Use... a cleaner and more comprehensive resource, as shown by the search result for :target.

You will often see people mentioning http://w3fools.com/ which explains why some people think w3schools is a bad resource. I recommend reading this and making your own mind up on continuing to use it. Personally I don't use w3shcools and prefer Can I Use... and the Mozilla Developer Network.

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.


Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.

disabling css styles for specific styles for IE9

I would advise you to use CONDITIONAL COMMENTS (http://msdn.microsoft.com/en-us/library/ms537512.ASPX).

You can create a separate CSS file for your IE9 workarounds to avoid browsers that support styles that aren't supported in IE9 from downloading your css file. thus resulting on a faster load time.

<!--[if lte IE 9]>
<link href='yourstylesheet' rel='stylesheet'/>
<![endif]-->


Related Topics



Leave a reply



Submit