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' );
}

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s