WordPress - Enqueue scripts for only if LT IE 9

Question

In a WordPress theme, how do you conditionally include scripts for ie8 and below? This is primarily to apply polyfills for various html5/css3 features. I see that wp has the $is_IE variable which can be used as a conditional to only include scripts for IE. Is there a way to add the script for only certain versions of IE though rather than all of them? This is simple with some HTML ie conditional comments, but I'd like to include the scripts all in the same place in my functions file.

Conditional for specific versions in HTML:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

Conditional for all IE in WP:

    global $is_IE;      if ( $is_IE ) {         wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );     } 

I've looked around and mainly find details about conditional scripts for wp backend only.

Any suggestions?

Answer 1

For WordPress 4.2+

Use wp_script_add_data to wrap the script in a conditional comment:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js' ); wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );  wp_enqueue_script( 'respond', get_template_directory_uri() . '/js/respond.min.js' ); wp_script_add_data( 'respond', 'conditional', 'lt IE 9' ); 

Just make sure you register the script before invoking wp_script_add_data (registering is handled by wp_enqueue_script above), and that the first argument you pass to wp_script_add_data matches the first argument you passed when you registered the script.

---

For WordPress 4.1

You can use the script_loader_tag filter today to enqueue scripts wrapped in conditional comments. Here’s an example implementation:

wp_enqueue_script( 'html5shiv', '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js', array(), '3.7.2', false ); add_filter( 'script_loader_tag', function( $tag, $handle ) {     if ( $handle === 'html5shiv' ) {         $tag = "<!--[if lt IE 9]>$tag<![endif]-->";     }     return $tag; }, 10, 2 ); 

And if you want to include more than one script in the same way, you can use something like:

// Conditional polyfills $conditional_scripts = array(     'html5shiv'           => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js',     'html5shiv-printshiv' => '//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js',     'respond'             => '//cdn.jsdelivr.net/respond/1.4.2/respond.min.js' ); foreach ( $conditional_scripts as $handle => $src ) {     wp_enqueue_script( $handle, $src, array(), '', false ); } add_filter( 'script_loader_tag', function( $tag, $handle ) use ( $conditional_scripts ) {     if ( array_key_exists( $handle, $conditional_scripts ) ) {         $tag = "<!--[if lt IE 9]>$tag<![endif]-->";     }     return $tag; }, 10, 2 ); 

Answer 2

• You should use wp_register_script() whenever you add scripts to your WP themes or plugins.
• Server side sniffing is generaly bad idea, because it's unsure.
• Usually you want to target browsers lacking sertain features, not necessarily only IE browser. Modernzr is good scripts to do just that.

For IE, conditional tags work very well. Here's how you can add conditional tags into a script, example is for HTML5shiv:

global $wp_scripts; wp_register_script(      'html5shiv',      get_bloginfo('template_url').'/assets/js/html5shiv.js',      array(),      '3.6.2'     ); $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );