mobile logo

Enqueueing IE conditional stylesheets in WordPress the right way

Solution:1

Use following code

add_action( 'wp_enqueue_scripts', 'so27214782_wp_enqueue_scripts' );
function so27214782_wp_enqueue_scripts()
{
    global $wp_styles;

    wp_enqueue_style( 'so27214782_ie', get_template_directory_uri() . '/ie.css', array(), '27214782', 'all' );

    $wp_styles->add_data( 'so27214782_ie', 'conditional', 'IE 6' );
}

Solution:2

The correct way to load conditional stylesheets in WordPress is using the wp_enqueue_style() function.  For many WordPress developers, the use of this function is standard routine.  However, it isn’t readily obvious how to handle IE conditional comments using this method.  So, many developers will do something like this:

<?php
add_action( ‘wp_print_styles’, ‘print_my_styles’ );
function print_my_styles() {
echo ‘<!–[if lt IE 9]><link href=”style.css” rel=”stylesheet” type=”text/css”><![endif]–>’;
}
view rawfunctions.php hosted with ❤ by GitHub

Provided that your callback doesn’t do anything else, this can provide a viable way for child themes to remove or override the loading of your conditional stylesheet.

Believe it or not, WordPress does have a built-in way to conditionally load IE specific stylesheets using the wp_enqueue_style() function that we know and love.  It just requires a little bit of extra code. Here is a code snippet that shows how you would properly load IE-specific stylesheets in a few different scenarios:

<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_my_styles’ );
/**
* Example callback function that demonstrates how to properly enqueue conditional stylesheets in WordPress for IE.
* IE10 and up does not support conditional comments in standards mode.
*
* @uses wp_style_add_data() WordPress function to add the conditional data.
* @link https://developer.wordpress.org/reference/functions/wp_style_add_data/
* @link https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
*/
function enqueue_my_styles() {
// Load the main stylesheet
wp_enqueue_style( ‘my-theme’, get_stylesheet_uri() );
/**
* Load our IE-only stylesheet for all versions of IE:
* <!–[if IE]> … <![endif]–>
*/
wp_enqueue_style( ‘my-theme-ie’, get_stylesheet_directory_uri() . “/css/ie.css”, array( ‘my-theme’ ) );
wp_style_add_data( ‘my-theme-ie’, ‘conditional’, ‘IE’ );
/**
* Load our IE version-specific stylesheet:
* <!–[if IE 7]> … <![endif]–>
*/
wp_enqueue_style( ‘my-theme-ie7’, get_stylesheet_directory_uri() . “/css/ie7.css”, array( ‘my-theme’ ) );
wp_style_add_data( ‘my-theme-ie7’, ‘conditional’, ‘IE 7’ );
/**
* Load our IE specific stylesheet for a range of older versions:
* <!–[if lt IE 9]> … <![endif]–>
* <!–[if lte IE 8]> … <![endif]–>
* NOTE: You can use the ‘less than’ or the ‘less than or equal to’ syntax here interchangeably.
*/
wp_enqueue_style( ‘my-theme-old-ie’, get_stylesheet_directory_uri() . “/css/old-ie.css”, array( ‘my-theme’ ) );
wp_style_add_data( ‘my-theme-old-ie’, ‘conditional’, ‘lt IE 9’ );
/**
* Load our IE specific stylesheet for a range of newer versions:
* <!–[if gt IE 8]> … <![endif]–>
* <!–[if gte IE 9]> … <![endif]–>
* NOTE: You can use the ‘greater than’ or the ‘greater than or equal to’ syntax here interchangeably.
*/
wp_enqueue_style( ‘my-theme-new-ie’, get_stylesheet_directory_uri() . “/css/new-ie.css”, array( ‘my-theme’ ) );
wp_style_add_data( ‘my-theme-ie’, ‘conditional’, ‘gt IE 8’ );
}
view rawfunctions.php hosted with ❤ by GitHub

Note that the code above is using the get_stylesheet_directory_uri() function, which will get your theme’s root URL. In the event that a child theme is being used, this function will return the root URL for the child theme, not the parent theme. If you wish to always reference the parent theme URL, use get_template_directory_uri() instead.