Loading IE Conditional Stylesheets in WordPress

Loading IE Conditional Stylesheets in WordPress

Most web developers are familiar with the IE conditional comments that allow you to load a stylesheet only in Internet Explorer.

<!-- [if lt IE 9]>
   <link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Many new WordPress developers tend to just hardcode these conditional comments directly into their theme’s header.php file. The correct way to load stylesheets in WordPress is using the wp_enqueue_style() function.

add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

function enqueue_my_styles() {
   global $wp_styles;
   enqeue_style( 'my-theme-ie', get_stylesheet_directory_uri() . 'ie.css' );
   //add_data function to add IE Condition
   $wp_styles->add_data( 'my-theme-ie', 'conditional', 'IE 9' );
}

 



Leave a Reply

Your email address will not be published. Required fields are marked *