Microsoft announced that now IE supports everything, but in fact - with flexes, trouble, with the bootstrap - trouble (indenting differently).

How can these problems be solved now if conditional comments were canceled in versions of IE10 +?

  • Updated the answer, added a solution in pure CSS. Most likely (in some cases), you will need special styles only IE10. Especially for flexbox. - Vadim Ovchinnikov

4 answers 4

here is an option using javascript

javascript

var doc = document.documentElement; doc.setAttribute('data-useragent', navigator.userAgent);

css

 html[data-useragent*='MSIE 10.0'] h1 { color: blue; }

original

  • This example is most likely for individual cases, and if there is a lot of things to edit, then the code will swell, probably ... - Vladislav Kuraev
  • @ Vladislav Kuraev Your business, of course, but why did you choose this one? You seemed to have another answer ... - Vadim Ovchinnikov
  • Well, this answer also gives a solution. - Vladislav Kuraev

There is also such a css hack:

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10 IE11 */ }

If you need to use it in combination with other media queries, for example, for organizing adaptive layout, you can combine queries. For example:

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width : 768px){ /* IE10 IE11 Π΄ΠΎ 768px ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅*/ }
  • Comments are not intended for extended discussion; conversation moved to chat . - PashaPash ♦

Clean CSS: Conditional Browser Styles (Hacks)

By .selector meant the selector you need.

 /* Internet Explorer 11+ */ _:-ms-fullscreen, :root .selector { /* НуТныС стили */ } /* Internet Explorer 10+ */ _:-ms-lang(x), .selector { /* НуТныС стили */ } /* Internet Explorer 9+ */ _::selection, .selector { /* НуТныС стили */ } /* Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ для IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* НуТныС стили */ }

Separate files for each browser and their connection through JavaScript

Create a separate file, for example, ie.css .

Next, connect it depending on the browser.

  1. Determine whether the client browser is IE. You can also determine the version and for it to give specific styles.
  2. If, yes, then create a link element and point it to the href in our ie.css file.

Code example

 var isIE = false || !!document.documentMode; if (isIE) { var head = document.getElementsByTagName("head")[0]; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "ie.css"; head.appendChild(link); } 
     /* стили Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для IE9 */ @media screen and (min-width:0\0) { button:active, button:focus { top: -1px; left: -1px; } } /* стили Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для IE10 ΠΈ IE11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { button:active, button:focus { top: -1px; left: -1px; } }