How to add CSS Hack specifically for IE10?
You can easily track the latest versions of IE (mostly IE 10 and IE 11) using
1. CSS media query hack:
/*
#ie10,11 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
//-- Put your IE specific css class here
}
OR
@media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
Read this
Working Example
2. Browser Detection:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
3. Using script (NOT Tested):
<script>
/*@cc_on
@if (@_jscript_version == 10)
document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
@end
@*/
</script >
Note : I know document.write
is considered bad practice.
Conditional comments (ie10 dropped conditional comments):
if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.
microsoft drop conditional comments in ie10.
How to write a CSS hack for IE 11?
Use a combination of Microsoft specific CSS rules to filter IE11:
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Filters such as this work because of the following:
When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.
<!doctype html><html> <head> <title>IE10/11 Media Query Test</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> @media all and (-ms-high-contrast:none) { .foo { color: green } /* IE10 */ *::-ms-backdrop, .foo { color: red } /* IE11 */ } </style> </head> <body> <div class="foo">Hi There!!!</div> </body></html>
IE 10 specific CSS
You can try this,
IE6 Only
==================
_selector {...}
IE6 & IE7
==================
*html or { _property: }
IE7 Only
==================
*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.
IE8
==================
.selector/*\**/ { color:#f00; }
**NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/
IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector
The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.
IE9 Only
==================
:root .class/#id { property:value \0/IE9; }
**NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx
IE10 Only
http://css-tricks.com/ie-10-specific-styles/
==================
Use this JavaScript:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }
IE10 and IE11
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}
Refer https://gist.github.com/ricardozea/5549389
Are There Specific CSS Selectors Targeting IE10?
The following example shows how to do this
/*
#ie10 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#ie10 { color: red; }
}
Warning: will probably work in IE11+, too.
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.
How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
Perhaps you can try some jQuery like this:
if ($.browser.msie && $.browser.version === 10) {
$("html").addClass("ie10");
}
To use this method you must include the jQuery Migrate library because this function was removed from the main jQuery library.
Worked out quite fine for me. But surely no replacement for conditional comments!
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/
Related Topics
Avoid Having to Double-Click to Toggle Bootstrap Dropdown
How to Create a Marquee Using CSS or JavaScript
Document.Createelement('Div') with a Class
Detecting Width: Auto in Jquery
Are There Any Standards for Mobile Device Web Browsers in Terms of Thread Sleeping
How to Horizontal Scroll When Scrolling Vertical
Gulp Less Not Handling Includes Properly, Included Variables Not Defined
Javascript: Advantages and Disadvantages of Dynamically (On Fly) Creating Style Element
In Android Webview, am I Able to Modify a Webpage's Dom
How to Prevent Material Icon Text from Showing Up When Google's Js Fails to Convert Them
Indicate That Processor-Heavy Js Function Is Running (Gif Spinners Don't Animate)
Detect Scale Settings (Dpi) with JavaScript or CSS
Handle Webpack CSS Imports When Testing with Mocha and Babel
Android Webview JavaScript from Assets
Elements Positioned Relatively Don't Move When the Dom Is Updated (IE6 and IE7)