Enqueue script only for IE

Question

I want to use dd belatedpng so the PNG's on my website appear properly on IE. The script I've always used on non-wordpress websites was

<!--[if lt IE 7 ]>
    <script src="js/dd_belatedpng.js"></script>
    <script> DD_belatedPNG.fix('img, .ir'); </script>
<![endif]-->

Now that I need to use it on a Wordpress website, I'm trying to find a way of adding script using enqueue script, although I don't like it at all. At the end of the day, the theme is only going to be used on a single website, I'd prefer to hardcode the scripts path.

Anyway, is there a way of adding IE conditionals to enqueue script and or register script?

Answer 1

WordPress has a $is_IE global variable:

global $is_IE;
if($is_IE) enqueue_script(...);

Personally I prefer the IE conditional comments. Other browsers ignore them anyway, so there's no reason to use PHP for browser detection.

You might also want to consider using 8 bit alpha PNG images instead of 24 bit PNGs, which don't need any javascript fix in IE, and in most cases they will look the same as a 24 bit PNG.

Answer 2

Enqueue doesn't support output of more complex blocks, only script files.

Best approach for this would be small function that echoes this block (conditionally if you don't need it on every single page), hooked to wp_head.

Answer 3

Adding to Rarst's answer, this can be done similar to the following, in your functions file.

add_action( 'wp_head', 'add_belatedpng_js' );

if ( ! function_exists( 'add_belatedpng_js' ) ) {
  function add_belatedpng_js() {

   if (! is_admin()) {      
    echo '
    <!--[if lt IE 7]>
      <script src="js/dd_belatedpng.js"></script>
      <script> DD_belatedPNG.fix('img, .ir'); </script>
    <![endif]-->';
 }
}

Answer 4

This question is 4 years old so I'm guessing you don't even use this anymore. However, for others out there that come across this question, this can be done like this:

add_action('wp_enqueue_scripts', function() {
        wp_enqueue_script( 'dd_belatedpng',
            get_template_directory_uri() . '/js/dd_belatedpng.js', 
            array(), 
            '1.0.0', 
            false 
        );
        wp_script_add_data('dd_belatedpng', 'conditional', 'lt IE 7');
});

add_action('wp_head', function(){
   if (wp_script_is( 'dd_belatedpng', 'enqueued' )) {
       echo '<!--[if lt IE 7]><script> DD_belatedPNG.fix('img, .ir'); </script><![endif]-->' . "\n";
   }
});

The above will only print in IE Browsers so it could save some page bandwidth while also enqueueing the main script at the same time. The is_IE part might also be an unnecessary add though.

I believe this is the best way of implementing this.

Answer 5

WordPress (as of 4.2.0) has built in support to do this. You can use wp_script_add_data or wp_style_add_data depending on whether you're trying to make a javascript file or CSS file conditional.

add_action( 'wp_enqueue_scripts', 'enqueue_and_make_conditional' );

function enqueue_and_make_conditional() {
    wp_enqueue_script( 'my-script',  'your-javascript-file.js' );
    wp_script_add_data( 'my-script', 'conditional', 'lt IE 9' );
}