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も使えないというケースもあるかもしれません。そもそも、UserAgentでブラウザーを必ず判別できるとも限りません。

余談ですが、あえてJavaScriptをオフにしている人も結構いるんじゃないでしょうか。というのも、私は普段Firefoxを使っていますが、調べ物専用のブラウザーとしてungoogled-chromiumを別にインストールしており、JavaScriptやCookieをオフにしています。そうすると広告も表示されないし、読み込みの完了も早くなるし、うっかりTwitterとかのページを踏んでもレガシー表示になって不便なのでだらだら見ることもないし、必要に迫られて見ていてもトレンド欄が表示されないので気分を害することもなく生産性を維持できるし……と、本当に快適です。大変おすすめ。JavaScriptはもはや提供者の都合や見栄だけで実装されているだけで、訪問者にとってマイナスにしかなってないんじゃないだろうか？

-ms-high-contrastハック

余談はさておき、そういった場合には、CSSハックを視野に入れることになります。

で、よくあるIE11向けのCSSハックは以下です。
見出しに堂々と「-ms-high-contrastハック」と書きましたが、正式名称は不明です。勝手に名付けた。

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

しかし、MDNの-ms-high-contrastの説明によると、

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

とあるように、このメディア特性はそもそも、OSの高コントラストモードの状態に応じてCSSを変化させるためのものです。よって上のコードは、IE11ユーザーであっても高コントラストモードをオンにしている場合は適用されない、ということになります。

それでは、これならどうでしょうか？

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

noneはオフの場合、activeはオンの場合。カンマ「,」はOR（もしくは）を意味します。
これならIE11で常に適用されそうです。というか適用されます。

しかしここで問題になるのがMicrosoft Edgeの存在です。（詳細は省きますが）こう書いた場合、IE11だけでなく、Microsoft Edge(EdgeHTML)にも適用されてしまいます。

IE11だけに適用され、表示が適切になった
でもなぜかEdgeにも適用され、こっちは盛大に崩れた
でもEdge使ってる人あんまり見ないしまあいっか

と我が道を行くのも一つの方法ですが、「いざ苦情が来たらてへぺろを繰り出そうと思っていたら全く来なくて逆に悶々とする」という状況になり得るため、相当な熟練を要します。要するにおすすめできない。

というわけで、「そもそもの-ms-high-contrastの用途ではない」上に「Edgeにも適用されてしまう」ということから、このCSSハックは使えない――、というのが近年までの話です。

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日）

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