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]-->
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 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.
Apply CSS to all browsers except IE using media query
Use a @supports
query for browsers that are not Internet Explorer. @supports
queries are compatible with all browsers except Internet Explorer.
@supports not (-ms-high-contrast: none) {
/* Non-IE styles here */
}
Example on Codepen
How can I to specific the css rules for Chrome and IE in my HTML page or in SCSS file?
You can use IE conditional comments such as this:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
So you could use something like this:
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 10]>
<link href="iestyles.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
You can learn more about them here
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>
Related Topics
Bootstrap - Removing Padding or Margin When Screen Size Is Smaller
Using @Font-Face with Rails 3.1 App
Chrome Issue with Background-Attachment Fixed and Position Fixed Elements
Label on the Left Side Instead Above an Input Field
How to Indicate Long Text into a Smaller Fixed Column with CSS
How to Center Multiple Inline-Block Elements with CSS
How to Inspect and Tweak :Before and :After Pseudo-Elements In-Browser
How to Give One CSS Class Priority Over Another
Ie Crossing Out Pseudo Element CSS
Detect Different Device Platforms Using CSS
How to Change Font-Color for Disabled Input
Immediate Child Selector in Less
Flexbox: How to Get Divs to Fill Up 100% of the Container Width Without Wrapping
How to Apply Vendor Prefixes to Inline Styles in Reactjs
How to Set a Common Image Path for Less Files
How to Show the First N Elements of a Block and Hide the Others in CSS