IE11にのみ適用するスタイルシート

いまどきIEだけ崩れてるなんてないだろ〜

...

＿人人人人人人人人人人人人人人人人人人＿
＞　 IEはGoogle Fonts 非対応　 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

CSS hack を使用する

弊社はほとんどの案件でブラウザ対応は最新版というありがたい環境だが、
それでもIEは崩れたりすることがある。

一番致命的なのがGoogle Fontsによる Webフォントが使用できないことだ。

条件付きコメントはIE9までしか対応できないため、
最新ブラウザなのにcss hackという古い手法に頼るというよく分からない状態になる。

IE11のみ

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .hoge {
    // スタイル
  }
}

IE10以降

@media all and (-ms-high-contrast:none){
  .foo { color: green } /* IE10 */
}

IEではWebフォントを諦める

一思いにバッサリ1つのフォントを指定してやる。

ie.css

@media all and (-ms-high-contrast:none){
  * {
    font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important;
  } 
}

IE用にWindowsに標準的に入っているフォントを使用して体裁を整えてあげることはできるのだが、
そこまで時間をかけるのはコストに見合わないと判断。