今更だけど、X-UA-Compatibleとレンダリングモードについてのまとめ

このエントリーをはてなブックマークに追加

今更だけど、X-UA-Compatibleとレンダリングモードについてのまとめ

X-UA-Compatibleとか、レンダリングモードって盲目的に使っていたようなとこなかったですか?なんでそれを使わなければいけないのか意味を調べてみようと思います。

Ads

なんで今更X-UA-Compatibleについて調べてみたのか

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

今までは、上記のコードを使っていました。というか、なかば盲目的に使っていたのかもしれない。
このブログを制作するにあたり、上記コードを含んだHTML5でコーディングを行いバリデーションを通そうと思ったところ、エラーがかえってきました。

そんな馬鹿なと思ったけど、これは勉強不足だなということで一から勉強しなおします。

バリデーションはここでやりました
Markup Validation Service

結論言っちゃうと、結局X-UA-Compatibleはこれがいいかも

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

結局これがいいのかなと思いました。勝手な考察ですけど・・・。
chrome=1は、バリデーションで引っかかってたのが、「chrome=1」なんですよね。ですが、これに関してはエラーでても気にしなくていいみたいですね。

としていたんですが・・・調べ直した結果

2015/06/24追記変更

<meta http-equiv="X-UA-Compatible" content="IE=edge">

chrome=1は取ってしまってよさそうですね。Google Chrome Frameを使っているユーザーほとんどいないみたいなのでバリデーションで引っかかるものをつけなくてもいいかなと。

互換表示について一から勉強しなおし

ご存知では無い方はここから読み進めるといいかもです。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

そもそも上記のmeta要素はIE8以上のブラウザの時にレンダリングモードを指定するものです。
一から詳しく知るためにレンダリングモードを知っておかなければいけません。

レンダリングモードについて

IE8~11には対応していないサイトでも利用できるように、IE7と同等のレンダリングモードにする機能のことをいいます。

IE6,7全盛のころに作られたWEBページは、その設計が古いせいでIE9,IE10などでは正しく表示されないことがよくありますよね。「レンダリングモードを互換表示」にすることでIE7と互換性のある表示モードに切り替えることができる機能です。IE8以降にドキュメント互換性という概念で追加されました。

URLを入力するところの右のほうにある互換表示ボタン(破れた紙のアイコン)をクリックすることで、切り替わるようになっています。

ざっくりまとめてしまうと、昔のWEBページ用に昔のバージョンで見ることができる機能ってことですね。

新バージョンのIEユーザーにはどんな影響があんのさ

結論から言ってしまえば「互換表示ボタン(破れた紙のアイコン)」を押しちゃうと、IE11でもIE10でもIE7で表示されます。せっかく新しいバージョンで、わざわざ互換表示させたいなんてアホな話はあるわけがないですよね。

ってことは、互換表示ボタン(破れた紙のアイコン)を押されてしまったら、モダンブラウザに合わせて作ったのにIE7相当で表示されちゃうわけですね。

しかも、互換表示ボタンを押された場合、そのWEBページは今後ずっと互換モードにしてしまうようです。IEをインストールし直しても互換モードのままになってしまうという頑固さ。これは、ボタンを表示しないほうがいいですよね。

だったら、互換表示ボタンを表示させないほうがよさそう

互換表示ボタンは表示されない方がいいですよね。ってことで


これをheadの内に書いてあげればいいわけですね。

コードを記述する場所について

cssやjsなどの外部のファイルへのリンクが記述されている箇所より前に記述してください。
なんでかというと、外部のファイルの読み込みがあるとそこで表示モードが決定してしまうためです。

IE=edgeってなに?

IE=edgeは使用しているIEの最新バージョンの標準モードで表示してくれるものです。IE=7,IE=9とか複数指定することもできます。

chrome=1ってなに?

chrome=1はIEのプラグインGoogle Chrome Frameを使用して表示する、と言う意味です。今回のバリデーションが通らなかったところですね。

Google Chrome Frame

Googleが、Internet Explorerの古いバージョンでGoogle ChromeのJavaScriptとレンダリングエンジンを動かすためのオープンソースのプラグインです。

んで、このプラグインですが現在サポートを終了していて、今後アップデートもされません。

ただ、まだきっと使っている方もいるのでこのプラグインにも対応するように「chrome=1」は記述したほうがいいですね。

2015/06/24追記変更
さらに、使っているユーザーもほとんどいないので「chrome=1」は記述しなくてよろしいかと思います。

一から勉強してみて思ったこと

互換表示されないためにまだまだ多いIEユーザーのための配慮として必須ですよね。ここまで詳しく調べたことが今までなかったので、勉強になりました。

先ほども書いたけど、「互換表示ボタンを押された場合、そのWEBページは今後ずっと互換モードに
してしまう。さらにIEをインストールし直してもだめ。」っていうのは知らなかったので、かなりびっくりしました。そのへんの頑固さはIEっぽいな〜とも思いましたが・・・。

間違って押されないためにも非表示にさせるために忘れずにですね!!

こちらの記事もいかがですか?

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

Ads
ページの先頭へ