Internet Explorer限定の条件付きコメント

IE独自の規格に「条件付きコメント」というのがあり、これを使用することでIE 9限定、あるいはIE 9以下のとき限定などといった処理を記載することができます。ただし、この機能はバージョン5から9までしか対応していません。たとえば次のコードは「もしもIEなら」という処理ですが、バージョンの関係から、「もしも5～9までなら」と同義です。

<!--[if IE]>
Internet Explorer 5～9限定の処理
<![endif]-->

条件付きコメントは、～未満（lt: less than）や～以下（lth: less than equal）、～より大きい（gt: greater than）や～以上（gte: greater than equal）などといった演算子がサポートされています。

<!--[if lte IE 8]>
IE8以下のときの処理
<![endif]-->

条件付きコメントを使ってIE限定のスタイルを読み込む

条件付きコメントを出力するには、たとえば次のように記載します。

function twpp_enqueue_styles() {
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );

  wp_enqueue_style( 
    'ie-style',
    get_stylesheet_directory_uri() . "/css/ie.css",
    array( 'main-style' )
  );
  wp_style_add_data( 'ie-style', 'conditional', 'IE' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

メインのスタイルシートを読み込む処理に加えて、IE限定のスタイルを読み込んでいます。wp_enqueue_style()を使用する記載は通常と変わりませんが、そのあとでwp_style_add_data()を追記しています（9行目）。

第1引数にはスタイルのハンドル名を、第2引数は'conditional'を、最後の第3引数には条件を文字列で渡します。この結果、次のようなHTMLが出力されます。

<!--[if IE]>
<link rel='stylesheet' id='ie-style-css'  href='http://localhost/minimalist/wp-content/themes/minimalist/css/ie.css?ver=4.8.2' type='text/css' media='all' />
<![endif]-->

「IE 9未満のとき」という条件にしたければ、次のように記載します。

wp_enqueue_style( 
  'ie-style',
  get_stylesheet_directory_uri() . "/css/ie.css",
  array( 'main-style' )
);
wp_style_add_data( 'ie-style', 'conditional', 'lt IE 9' );

条件付きコメントを使ってIE限定のJava Scriptを読み込む

考え方はスタイルシートのときと同じですが、「条件付きコメント」の出力にはwp_script_add_data()を使用します。

function twpp_enqueue_scripts() {
  wp_enqueue_script( 
    'ie-script', 
    get_template_directory_uri() . '/js/ie.js'
  );
  wp_script_add_data( 'ie-script', 'conditional', 'IE' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

こうすると、スクリプトタグが条件付きコメントで囲まれた状態で出力されます。

<!--[if IE]>
<script type='text/javascript' src='http://localhost/minimalist/wp-content/themes/minimalist/js/ie.js?ver=4.8.3'></script>
<![endif]-->