古い案件のソースを開くと、headに<meta http-equiv="X-UA-Compatible" content="IE=edge">という1行が残っていることがあります。「これって今も必要なの?消していいの?」と手が止まった経験、私も何度もあります。
このmetaタグはもともと、Internet Explorerの「互換表示」で表示が崩れるのを防ぐために書いていたものです。ですがInternet Explorerは2022年6月15日にサポートが終了し、このタグは原則として書く必要がなくなりました。
私はこの記事を2014年に「IEの互換表示を強制的に標準モードにする裏技」として書きました。当時は本当に役立つ一手でしたが、時代が変わった今は前提から見直す必要があります。そこでこの記事では、当時なぜこのタグが必要だったのか、そして現在の正しい対応はどうするのが正解なのかを整理し直しました。
結論:X-UA-Compatibleは今は書かなくていい
先に結論から書きます。新しく作るサイトにX-UA-Compatibleのmetaタグを書く必要はありません。古い案件で見かけたら、IE対応をやめる前提なら撤去してかまいません。
理由はシンプルで、このタグが効く相手だったInternet Explorerそのものが、もう存在しないからです。
Microsoftは2022年6月15日にIE11のデスクトップアプリのサポートを終了しました。現在の標準ブラウザであるMicrosoft Edgeや、Chrome・Firefox・Safariは、いずれも常に自前の最新レンダリングエンジンで描画します。IE=edgeのように「最新モードで表示してね」と指示する相手がいなくなったわけです。
そもそもX-UA-Compatibleで切り替えていた「ドキュメントモード」という仕組み自体、IE11の時点でMicrosoftによって非推奨(deprecated)とされていました。今となっては完全に過去の機能です。
LINK:Internet Explorer 11 desktop application ended support – Microsoft Lifecycle
LINK:Internet Explorer 11 has retired and is officially out of support – Windows Blogs
そもそも「互換表示」とは何だったのか
ここからは歴史的な経緯として、当時の話を残しておきます。今のWeb制作には直接関係しませんが、「なぜこのタグが書かれたのか」を知っておくと、古いソースを読むときに迷わなくなります。
互換表示とは、新しいバージョンのIEで、わざと古いIE相当のレンダリングで表示するための機能でした。当時は「新しいIEにしたら社内の業務システムが崩れる」といった事情が多く、後方互換を保つために用意されていたものです。
ところがこれが、標準準拠で組んだサイトには逆に仇となりました。閲覧者のIEが互換表示モードになっていると、本来の標準モードではなく古いレンダリングで描画されてしまい、CSSが効かない・レイアウトが崩れる・ボタンが消えるといった現象が起きたのです。
私自身、当時クライアントから「IE10でボタンが見えないパソコンがある」と相談を受けたことがありました。背景画像で置換していたのでCSS絡みかと疑ったのですが、原因を追っていくと互換表示でした。制作側が標準モードで作っていても、閲覧環境側の設定一つで崩れてしまう。これは厄介な問題でした。
当時の対処法:metaタグ1行で標準モードを強制
この互換表示を打ち消すために書いていたのが、例の1行です。headに次のように記述していました。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
content="IE=edge"は「そのIEが持っている一番新しいレンダリングエンジン(=最新の標準モード)で表示しなさい」という指示です。これを書いておくと、閲覧者のIEが互換表示になっていても強制的に標準モードへ引き戻せました。
当時はさらにchrome=1を付け、content="IE=edge,chrome=1"と書く流儀もありました。これは「Google Chrome Frame」というIE用プラグインが入っていればそちらのエンジンで描画する、という意味です。ただしChrome Frame自体がとうに提供終了しており、chrome=1は今となっては完全に無意味な記述になっています。
また当時の注意点として、このタグはCSSやJSの読み込みよりも前(headの早い位置)に書く必要がありました。レンダリングモードの決定は描画の前段で行われるためです。
現代の正しい対応:DOCTYPEだけで標準モードになる
では今、標準モードで表示させるにはどうするか。答えは拍子抜けするほど単純で、ファイルの先頭に<!DOCTYPE html>を書く。これだけです。
<!DOCTYPE html>
<html lang="ja">
...
HTML5の<!DOCTYPE html>を先頭に置けば、ブラウザは標準準拠モード(standards mode)で描画します。現行のブラウザはどれも標準準拠で動くので、わざわざX-UA-Compatibleでモードを指定する必要はありません。
古い案件を引き継いだときの判断はこうなります。
・IE対応をもうしない方針なら、X-UA-Compatibleの行は削除してOK。HTMLバリデーターでも不要な記述として指摘されることがあります。
・どうしても残す事情があるなら、書くのはcontent="IE=edge"のみ。chrome=1付きはバリデーション上もエラー扱いなので外しておきます。
なお、Edgeには互換のための「IEモード」が残っており、企業の業務システム向けに少なくとも2029年まではサポートされる予定です。ただしこれはあくまで業務アプリ救済のための仕組みで、一般的なWebサイト制作で意識する場面はまずありません。
LINK:X-UA-Compatible – HTTP headers reference
ブラウザ差異対応そのものが様変わりした
IEの終了で変わったのは、このmetaタグだけではありません。長年Web制作者を悩ませてきた「IEだけ表示が違う」という問題が、根本からほぼ消えました。
CSSハックやIE用の互換ライブラリといった、かつて当たり前だったテクニックも今はほとんど不要です。このあたりは別の記事で詳しくまとめているので、古い案件を触る機会が多い方は合わせて読んでみてください。
関連記事:CSSハックとは?今はもう不要?IE終了後のモダンなブラウザ差異対処法
関連記事:Selectivizr.jsはもう不要|IE終了後のCSS互換の今どきの考え方
関連記事:min-heightとmin-widthの正しい使い方|IE終了後の現代CSS
まとめ
X-UA-Compatibleのmetaタグについて、現在の扱い方を整理します。
・新規サイトでは書かなくてよい。IEが終了し、効く相手がいなくなったため。
・古い案件で見かけたら、IE対応をやめる前提なら削除してOK。とくにchrome=1はChrome Frame提供終了で完全に無意味。
・標準モードで表示させたいなら、先頭に<!DOCTYPE html>を書くだけで十分。現行ブラウザは全て標準準拠で動く。
かつては「これを書けば崩れが直る」と頼りにした1行も、ブラウザ事情の変化で役目を終えました。古いソースで出会ったときに「もう要らないやつだ」と即断できるよう、背景ごと頭に入れておくと安心です。一番のおすすめは、IE向けの記述はまとめて撤去してコードを軽くしておくことです。