Skip to content

Instantly share code, notes, and snippets.

@wpscholar
Last active October 20, 2024 14:01
Show Gist options
  • Save wpscholar/4947518 to your computer and use it in GitHub Desktop.
Save wpscholar/4947518 to your computer and use it in GitHub Desktop.
Enqueueing IE conditional stylesheets in WordPress the right way
<?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' );
}
@bryanwillis
Copy link

This needs to be updated - see this stackoverflow question for more details regarding this gist. You don't need to be accessing globals when there's wp_styles. There's a also a shortcut wp_style_add_data for wp_styles. This applies to wp_scripts as well which uses wp_script_add_data.

add_action( 'wp_enqueue_scripts', 'enqueue_my_styles_and_scripts' );
/**
 * Enqueue styles and scripts conditionally.
 *
 * Load stylesheets and scripts specifically for IE. IE10 and above does
 * not support conditional comments in standards mode.
 *
 * @link https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
 */
function enqueue_my_styles_and_scripts() {

    // Internet Explorer specific stylesheet.
    wp_enqueue_style( 'themename-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'themename-ie', 'conditional', 'lte IE 9' );

    // Internet Explorer 7 specific stylesheet.
    wp_enqueue_style( 'themename-ie7', get_stylesheet_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'themename-ie7', 'conditional', 'lt IE 8' );

     // Internet Explorer HTML5 support 
    wp_enqueue_script( 'html5shiv',get_template_directory_uri().'/js/html5shiv.js', array(), '3.7.3', false);
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );

    // Internet Explorer 8 media query support
    wp_enqueue_script( 'respond', get_template_directory_uri().'/js/respond.js', array(), '1.4.2', false);
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

}

Also, for the most part you shouldn't be using $is_IE ( thanks toscho ). If you don't send the HTTP header Vary: User-Agent now, you will send the wrong output to users behind a cache. So basically the cache will break for those users.

@earmin
Copy link

earmin commented Jan 17, 2018

Dear bryanwillis, I am not a professional developer, so could you please explain a little more? Should I change "twentyfifteen-style" to another string if I'm using another theme? What "20141010" does?! Should I use Javascripts (/js/html5shiv.js) too?! I only want to show a Div for IE users and hide it from others. Here is my question in StackExchange and nobody replied it. https://goo.gl/1veQTo
Thanks in advanced

@Riazalmahmud
Copy link

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment