作業メモ

userAgentを使用せずIE11専用のスタイルシートファイルを切り替える方法

作成日:

Internet Explorer 11(以下IE11)のみレイアウトが崩れる場合、対応ハックしてスタイルをその他の問題のないブラウザでも読み込ませるのは、無駄であると考えます。そこで、IE11でのみ通常とは異なるスタイルシートファイルを切り替えて読み込ませるようにしました。

WordPressのキャッシュ考慮

WordPressを使用していれば、

PHP
global $is_IE;
if ( $is_IE ) {
...
}
と、グローバル変数を元にした条件分岐で読み込みを切り替えることは容易と思えましたが、WordPressでは高速化のためにキャッシュプラグインを導入していることが多々あります。その場合、キャッシュプラグインはPC用とモバイル用とでキャッシュを分けてはくれますが、さすがにブラウザ毎に異なるキャッシュを作成してくれることは無いと思えますので、キャッシュを使用するのであればこの方法は候補から外れることになります。

jQueryと@mediaによる判定

そこで、jQueryを利用して読み込むスタイルシートを切り替えることにしました。その際、ブラウザ判定をjQueryで行うことになりますが、通常はuserAgentを使用します。しかし、userAgentはどうやら今後段階的に廃止するらしいので積極的に採用することが出来ません。

favicon
GoogleはChromeでユーザーエージェント文字列を段階的に廃止する方針 https://gigazine.net/news/20200115-chrome-phase-out-user-agent-strings/

ブラウザがウェブサイトにアクセスする際に送信するユーザーエージェント文字列は、使用しているOSやデバイスのアーキテクチャ、ブラウザの情報などを含んだテキストであり、ウェブサイトの表示形式などに影響します。オープンソースのウェブブラウザエンジンChromiumをベースとしてGoogleが開発するGoogle Chromeが、このユーザーエージェント文字列を段階的に廃止する方針であることが明らかになりました。

そこで、ブラウザ判定は@media all and (-ms-high-contrast: none)によるスタイルシート内で判定することにしました。

具体的にはページ内に以下のようにブラウザ判定用の標識をマークアップします。

HTML
<div id="ie" aria-hidden="true"></div>
そしてメインのスタイルシートに以下のように記述します。

CSS
#ie {
	display: none;
}
@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop,
	#ie {
		display: block;
	}
}

簡単に説明すると、通常#ie要素は非表示状態になっていますが、IE11でのみ表示する、という内容になっています。
これで#ieの表示・非表示の状態を識別することで、簡易的にブラウザ判定を行うことが出来ます。

後は読み込みを切り替えるスタイルシートファイルを以下のようにマークアップして、

HTML
<link id="layout" rel="stylesheet" href="layout.css">
JSファイルの方には、

JavaScript
jQuery(document).ready(function ($) {
	if ($('#ie').is(':visible')) {
		$('#layout').attr('href', 'layout-ie.css');
	}
});

のように記述します。
これで、IE11であれば、layout.csslayout-ie.cssで切り替えて読み込むことができるようになります。

問題点

但し、やはり読み込みにラグが生じるので、多様すべきでは無い方法だと思います。

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

※ メールアドレスが公開されることはありません。


上の計算式の答えを入力してください

string(0) ""