goranseric
8/9/2017 - 7:24 PM

Enqueueing IE conditional stylesheets in WordPress the right way

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

}