-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由

事情があって游書体関連の話題をいろいろ読み漁っていたところ、「游ゴシックにすると IE では数ピクセル上にずれてしまうので、CSS ハックを使って別のフォントを適用する」という手法を紹介しているのがあった¹。どういうハックかと思って見てみたら次のようなもので、ちょっとこれどうなのよ? とか思ったのであった。

@media (-ms-high-contrast: none) {
  /* IE10/11 に適用する*つもりの*フォント指定 */
}

試しに “ms high contrast” で検索してみると同じコードがけっこう出てくるので、もしかしてある程度広く認知されてる手法なのだろうか…あまり信じたくはないのだけど、実際に広く使われてたりするとちょっと困ったことになるので、念のために書いておこうと思った次第。

結論から先にいうと、そもそも IE 向けの CSS ハックとしてこの手法は不完全なので、使ってはいけない。

-ms-high-contrast メディア特性

「ていうか -ms-high-contrast って何?」という人がいるかもしれないので、いちおう説明しておく。知ってる人は次のセクションまで読み飛ばして構わない。

これは Windows のハイコントラストモードの状態を判別するためのメディア特性 (media feature) だ。プレフィックスで分かるとおり Microsoft の独自実装、つまりブラウザでは IE と Edge に対して有効なものだけど、有効な値がふたつの間では少し異なる。

IE の場合

active（ハイコントラストモードがオン）/ white-on-black（黒地に白のハイコントラストテーマを使用中）/ black-on-white（白地に黒のハイコントラストテーマを使用中）/ none（ハイコントラストモードがオフ）のいずれか

Edge の場合

IE で有効な値から none を除いたもの、つまり active / white-on-black / black-on-white のいずれか

基本的には「ハイコントラストテーマを使うと認識できなくなる要素があった場合に、そのスタイル調整を行う」ために使用するのが有用だろう。Edge が none を認識しないので、オフの場合のスタイル調整には使えない…とはいえ、そもそもそんなことをする必要はまったくないはずなので、特に問題はないと思うけど。

本題：なぜ使ってはいけないか

少し考えれば分かると思うけど答えは簡単、ハイコントラストモードがオンの場合には IE であっても適用されないからだ。同じ IE でもハイコントラストテーマを使用してるか否かで、適用されるスタイルが変わってしまうことになる。

たとえばこれがフォントではなく、あるサイトでは IE で表示が大きく崩れるのを Fix するためにこの手法が使われていたとする。さてどうなるか? ハイコントラストテーマを使って IE でウェブを見ているユーザーは、常にこのサイトを大きく崩れたままの状態で見なければならない…ってことだ。

ハイコントラストモードの状態に関わらず IE に同じスタイルを適用するには、次のようにするしかない。実際のところ、二年前までならこれで機能したことだろう。

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10/11 に適用する*つもりの*スタイル */
}

でも Edge がある今ではもう有効じゃない。先に書いたとおり Edge は active は理解しても none を理解しないので、これだと今度はハイコントラストモードがオンの場合のみ Edge にもこのスタイルが適用されてしまうという事態が起こる。

ブロック内に書かれたスタイルは本来 Edge には不要なものだと思うので（だからこそハックで対処したいのだろうし）これが適用されてしまうというのはおそらく、制作者が望んでいた挙動ではないだろう。スタイルの内容によっては、自分が思ってもいなかったような表示結果になるかもしれないことだって、想像はつくはず。

このように、この手法は IE のみにスタイルを適用するための CSS ハックとしては完全に破綻している。もちろんアクセシビリティ的な部分で不具合が出るかもってのはあるが、それ以前の問題だろう。肝心の IE さえ適用したりしなかったりするのだから。

---

元ネタが誰なのかまでは調べてないので知らないけど、自分には -ms-high-contrast はもちろんのこと、メディアクエリ自体も実はあまりよく分かってない人が、思いつきで検証もせずに書いたものとしか思えなかったくらいだ。深く考えずにコピペで使ってしまう人もいるのだから、もう少しちゃんと機能するかくらい考えて欲しいところ。

そんな訳で、ハックとして機能してないものを使い続ける意味はないので、今すぐ捨てた方がよろしいかと思うが、いかがか。