IE11, Microsoft EdgeのみにCSSを適応させる時のメディアクエリ

スポンサーリンク

IE10から従来のHTML上にif文でIEのみ対象にしたCSSを読み込ませることができなくなった模様。(正確にはHTML5を使用している時にだが)

HTML5 Parsing in IE10

よって今後はどうすればいいかというと、メディアクエリを使用する。以下IE10,IE11それぞれに適応させる時のメディアクエリ。

/* for IE 11 */
  @media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .selector {
      some-syntax: some-property;
    } 
  }

/* for IE 10 */
  @media all and (-ms-high-contrast:none){
    .selector {
      some-syntax: some-property; 
    }
  }

Edgeの場合はこちら

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
  .class-name {
    some-syntax: some-property;
  }
}

以下の記事を参考:

Targeting IE10 & IE11 Browsers with CSS

CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser

タイトルとURLをコピーしました