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
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.
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]-->
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.
Applying `css` internet explorer 9 specific css property affects ie10
The below should target IE9 only (and not IE10 etc as :root
does):
@media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.back{visibility:hidden;}
}
How can I set CSS only for specific IE browsers?
How about that?
http://www.quirksmode.org/css/condcom.html
Or that if you don't like those statements
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
Apply CSS rules if browser is IE
In browsers up to and including IE9, this is done through conditional comments.
<!--[if IE]>
<style type="text/css">
IE specific CSS rules go here
</style>
<![endif]-->
how to apply the height css property on ie9 just?
You can't do conditional css in the css file, but you can give each version of IE its own class. Just put this at the top of the HTML file:
<!doctype html>
<!--[if !IE]> <html class="not-ie" lang="en"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
Now all you need to do in your css file to target ie9 is this:
.ie9 div.whatever {
height: some value;
}
Related Topics
How to Use Images in CSS with Webpack
Horizontal Masonry Layout with Flexbox CSS Only
Difference Between "-Webkit-Text-Fill-Color" and "Color"
How to Make Card-Columns Order Horizontally
CSS Select Multiple Descendants of Another Element
Bootstrap 3 Align Text to Bottom of Div
When Using @Media Queries, Does a Phone Load Non-Relevent Queries and Images
Hex Colors: Numeric Representation for "Transparent"
Use Custom Fonts with Wkhtmltopdf
Change Bootstrap Carousel Fade Transition
CSS Transition Between Left -> Right and Top -> Bottom Positions
Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked
Media Queries - Mobile VS Desktop Browser
Google Font Not Working on Safari
Apply Webkit Scrollbar Style to Specified Element
CSS Background-Position Not Working in Mobile Safari (Iphone/Ipad)