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

by

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="https://stackoverflow.com/questions/28417056/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.

More Related Contents:

  1. How do CSS triangles work?
  2. CSS Selector that applies to elements with two classes
  3. Set size on background image with CSS?
  4. How to make flexbox items the same size?
  5. CSS media queries: max-width OR max-height
  6. Center a column using Twitter Bootstrap 3
  7. CSS text-decoration property cannot be overridden by child element [duplicate]
  8. How to add a scrollbar to an HTML5 table?
  9. :not() selector not behaving the same between Safari and Chrome/Firefox
  10. IE8 display inline-block not working
  11. How do I style the HTML5 form validation error messages with CSS?
  12. override css for html5 form validation/required popup
  13. Custom Cursor Image CSS
  14. Input widths on Bootstrap 3
  15. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]
  16. Maintain aspect ratio according to width and height
  17. Combine :after with :hover
  18. What are the differences between flex-grow and width?
  19. CSS: bolding some text without changing its container’s size
  20. :active css selector not working for IE8 and IE9
  21. Can a CSS pixel be a fraction?
  22. How to vertically center an image inside of a div element in HTML using CSS?
  23. layer on top of PDF
  24. Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
  25. Sass negative variable value?
  26. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  27. Using “word-wrap: break-word” within a table [duplicate]
  28. Why adds extra top margin?
  29. Are alternate nested styles possible in CSS?
  30. Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Leave a Comment