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

WordPressを使用していれば、

global $is_IE;
if ( $is_IE ) {
...
}

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

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)によるスタイルシート内で判定することにしました。

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

<div id="ie" aria-hidden="true"></div>

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

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

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

<link id="layout" rel="stylesheet" href="layout.css">

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

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