WebページをIEで見たときは他のブラウザで見るよう誘導する(CSS使用、JavaScript・PHP等使わずに)
例えば、CodePenにIEから入ろうとすると、下のように警告される。
こんな感じのをJavaScriptやPHPなどを使わずにCSSだけでやってしまおうというのがこの記事の主題です。
何がしたいか
WebページをIEで表示させたときのみ、警告文のようなものを出して他のブラウザで見るよう誘導させる。その際、本来そのWebページで表示されるものは表示されないようにする。
とりあえずコードを
<div class="ieOnly">
<!-- IEで見た際に表示させたい内容を記述 -->
</div>
<div class="otherIEonly">
<!-- IE以外で見た際に表示させたい内容を記述 -->
</div>
/* IE以外で表示されるページのスタイル */
.ieOnly {display: none;}
/* IEで表示されるページのスタイル */
_:-ms-input-placeholder, :root .ieOnly {display: block;}
_:-ms-input-placeholder, :root .otherIEonly {display: none;}
もしくは
_:-ms-lang(x)::-ms-backdrop, .ieOnly {display: block;}
_:-ms-lang(x)::-ms-backdrop, .otherIEonly {display: none;}
仕組み
CSSハックを利用して、IEだけにCSSを指定しています。CSSハックについては、CSSハックとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典が簡単に解説しています(ちなみにこのページのソースコードにはアスキーアートが組み込まれているよ)。
- IE以外で見たときは、下のコードの指定のおかげで、警告文を構成する要素が表示されません。
/* IE以外で表示されるページのスタイル */
.ieOnly {display: none;}
- IEで見たときは、下のコードのAの指定のおかげで、警告文を構成する要素が表示されます。また、Bの指定のおかげで、本来ページに表示される要素が表示されなくなります。
/* IEで表示されるページのスタイル */
_:-ms-input-placeholder, :root .ieOnly {display: block;} /* A */
_:-ms-input-placeholder, :root .otherIEonly {display: none;} /* B */
もしくは
_:-ms-lang(x)::-ms-backdrop, .ieOnly {display: block;} /* A */
_:-ms-lang(x)::-ms-backdrop, .otherIEonly {display: none;} /* B */
実際に作ってみた
こちらのページを確認してみてください。僕がテストした限りだと、IE以外では左の表示に、IEでは右の表示になりました。
テストしたブラウザのバージョン
ブラウザ | バージョン |
---|---|
Chrome(PCとスマホ) | 74.0.3729.157 |
Firefox | 66.0.5 |
Edge | 42.17134.1.0 |
safari | 不明 |
IE | 11.0.125 |
なお、画像右側の「change your browser!!」のページのコードはこちらのCodePenに載せています。
注意
- CSSハックを推奨しない声もあるため、使うときは注意してください。
- 間違いや改善点などがあれば教えてください。
Author And Source
この問題について(WebページをIEで見たときは他のブラウザで見るよう誘導する(CSS使用、JavaScript・PHP等使わずに)), 我々は、より多くの情報をここで見つけました https://qiita.com/ryoo_ss/items/762213bdf105c79ad249著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .