IE11用のCSSハック「-ms-high-contrast」を使っても問題ない時代が（もうすぐ）来る

Date: 2020年5月9日(土) 21時16分

Category

Web制作

Tags

内容的にはタイトル通りです。
シンプルに要約すると、「EdgeがChromiumになる関係で、-ms-high-contrastによるCSSハックが実用レベルになる」という内容なのですが、そういえばCSSハックなんて長いこと使ってないな、という人への説明も兼ねて。

Internet Explorer11（IE11）にだけ別のCSSを適用させたい、というケースがある

あるよね？

具体的には、IE11ではなぜか游ゴシックや游明朝で下に余白が発生してしまうので、それをtopやmarginで調整したい、とかいうケースです。
あるいは「IE11だけメイリオにしよう」という解法もあるかもしれません。

で、おそらくフツーはCSSハックなんて使わずに、こんな感じにするんじゃないでしょうか。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {font-family: 游ゴシック;}
        body.ie {font-family: メイリオ;}
    </style>
</head>
<body class="ie">
    <p>IEでアクセスされた場合は、bodyタグにクラスを付与します。</p>
    <p>IEならメイリオで、それ以外なら游ゴシックで表示されます。</p>
</body>
</html>

例えば、IE11でアクセスされた時だけbodyタグにクラスを付与し、単純にフォント指定をオーバーライドさせる方法です。

どうやってbodyにクラスを付与するかといえば、いろいろです。
PHPとかによる動的サイトなら、動的に判定して出力すればいいですし、静的サイトならJavaScriptでやってもいいでしょう。いずれにしてもUserAgentで判定することになるかと思います。

しかし静的サイトだったり、JavaScriptが使えなかったり（低スペックなマシンであえてJavaScriptをオフにしているなど）というケースもあるかもしれません。そもそも、UserAgentでブラウザーを必ず判別できるとも限りません。

-ms-high-contrastハック

そういった場合を考慮するには、CSSハックを視野に入れることになります。

よくあるIE11向けのCSSハックは、-ms-high-contrastメディア特性を使うものです。
見出しに堂々と「-ms-high-contrastハック」と書きましたが、正式名称は不明です。勝手に名付けた。

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE11にのみ適用したいスタイルシート */
}

MDNの-ms-high-contrastの説明によると、このメディア特性は以下のようなものです。

CSS の -ms-high-contrast メディア特性は Microsoft 拡張で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

-ms-high-contrast: noneはモードがオフの場合に適用される、-ms-high-contrast: activeはモードがオンの場合に適用される、そしてこの両方がカンマ「,」、つまりOR（もしくは）で指定されているわけなので、結果として、-ms-high-contrastが実装されたブラウザーだけにスタイルシートが適用される、という意味になります。

しかしこのCSSハック、実はIE11だけに適用されるわけではありません。
Microsoft Edge (EdgeHTML) にも適用されてしまいます。
つまり、「IE11向け」としてよく見かけるこのハックは、「IE11（のみに有効な）ハック」ではなく、「IE11（に有効だけどEdgeにも有効な）ハック」ということになります。いやあ、日本語って難しいですね。そういう問題ではないか。

なので、このCSSハックはIE11のみに適用したいというケースには使えない――、というのが近年までの話です。

EdgeがChromiumベースになるので、近いうちにIE11専用のCSSハックになる

しかし、知っている人も多いでしょうが（そして個人的には非常にびっくりしましたが）、Microsoft EdgeがChromiumベースになりました。

Chromiumベースになったことで、Edgeが-ms-high-contrastをサポートしなくなるため、

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE11にのみ適用したいスタイルシート */
}

今度こそ上記のCSSハックはIE11のみで有効になります。

ただし、Chromium版Edgeへの自動アップデートは当初の予定から延期されており、まだ一般的には使用されていません。よって、自動アップデートが開始されて、一般ユーザーのEdgeがChromium版に置き換わるのを待つ必要があります。

Chromium版Edgeはまだ自動配信されていませんが、手動でダウンロード・インストール可能です。バージョン 81.0.416.68（2020年5月9日時点）でCSSハックが動作しなくなっているのが確認できます。

いつ自動アップデートが来るのかはわかりませんが、（海外・国内の状況を見た上で、何となくの想像ですが）2020年のうちには開始されそうな気がします。

というわけで、「-ms-high-contrastハック」は2020年のうちに、IE11専用のCSSハックとして使えるようになるのではないでしょうか。

補遺

-ms-high-contrastはそもそもCSSハックのためのものじゃなかろうもん、という点は全く解決していませんが、そもそもCSSハックというのはリセットCSSの是非とかその他宗教論争とは全く違う純然たるバッドノウハウなわけで、それでも大人の事情で使わざるを得ない、というならごちゃごちゃ言わずに使うべきと思っております。大丈夫、僕らはみんな共犯者だ。

あと、Chromium版Microsoft Edgeはかなりおすすめです。
比較的非力なモバイルノートパソコンに入れて普段から使っていますが、たくさんタブを開いても軽いし、タブを閉じるのも軽いし（今までタブを閉じるのすら重かった）、その割にメモリを食っている感じもありません。雰囲気は踏襲していますが、動作はいい意味で完全に別物。

2020年6月22日追記（Edgeの自動配信について）

私の職場のPCにも新Edgeが降ってきたっぽい。年内くらいだと思ってたら意外と早かった……。

2022年2月5日追記（今後の旧Edgeユーザーへの対応について）

記事公開からもうすぐ2年が経過しようとしていますが、その後配信されたWindowsのアップデートによって、EdgeHTML版のEdgeは、Chromium版のEdgeに勝手に置き換わるようになりました。

もちろん、「Windowsのアップデートを見合わせざるを得ず、FirefoxやChromeの追加インストールもできず、IE11よりはマシなのでEdgeHTMLを使っている」という人がいることは想像できます。
しかしそういった人に対しては、おそらく以下のようなCSSでメッセージを送ってあげた方が、誰にとっても幸せなんじゃないかなぁ……と思ったりもします。

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body:before {
        content: 'このブラウザーは古いため、一部表示に乱れが生じる可能性がありますので、ご了承ください。できるだけ最新版のWindowsでご利用いただくか、別のブラウザーをお使いください！';
        display: block;
        background-color: yellow;
        color: black;
    }
}