Scripts y CSS con condicionales IE en WordPress. La forma correcta

La mayoría de desarrolladores estamos acostumbrados a los condicionales IE para cargar JavaScript y hojas de estilo en función de la versión de Internet Explorer que esté utilizando el usuario. Por ejemplo, si queremos cargar un CSS y un JavaScript sólo para versiones de IE inferiores a 9:

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

Cualquiera que trabaje con WordPress sabe que las hojas de estilo y los scripts deben cargarse utilizando las funciones wp_enqueue_style() y wp_enqueue_script() pero no es muy común encontrar información correcta sobre la carga de scripts y CSS condicionales. Así que nos encontramos con themes y plugins que hacen cosas como esta:

add_action( 'wp_print_styles', function() {

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

} );

O como esta:

add_action( 'wp_head', function() {

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

} );

O incluso podemos ver themes que hacen esta atrozidad en el template header.php:

<!doctype html>
<html <?php language_attributes();?>>
  <head>
    <?php wp_head(); ?>
    <!--[if lt IE 9]>
      <link href="style.css" rel="stylesheet" type="text/css">
    <![endif]-->'
  </head>

Bien, ninguna de estos métodos es correcto ya que rompemos el manejo de dependencias de WordPress, una característica sumamente útil y que a mi personalmente me parece excelente. Para añadir CSS y JavaScript con condicionales IE en WordPress, tenemos seguir utilizando las funciones wp_enqueue_style() y wp_enqueue_script() y combinarlo con los métodos wp_scripts()->add_data() y wp_styles()->add_data() (en realidad el método add_data es de la clase WP_Dependencies que es extendida por WP_Styles y WP_Scripts).

A continuación un ejemplo muy sencillo:

add_action( 'wp_enqueue_scripts', function() {

  // Cargar el css de IE 9
  wp_enqueue_style( 'style-ie9', get_stylesheet_directory_uri() . "/ie9.css" );
  // Añadir el condicional para versiones inferiores a IE 9 (lt IE 9) al archivo CSS
  // parámetros: wp_styles()->add_data( handler, key, data );
  wp_styles()->add_data( 'style-ie9', 'conditional', 'lt IE 9' );

  // Cargar el JavaScript de IE 9
  wp_enqueue_script( 'js-ie9', get_stylesheet_directory_uri() . "/ie9.js" );
  // Añadir el condicional
  wp_scripts()->add_data( 'js-ie9', 'conditional', 'lt IE 9' );
   
} );

Nota que he utilizado get_stylesheet_directory_uri(), función que devuelve la URL del directorio del tema. En el caso de que se esté utilizando un child theme, la URL apunta al directorio del child theme. Si quieres hacer referencia siempre al directorio del tema padre, utiliza get_template_directory_uri() (más información sobre la obtención el directorio y URL del tema).

También puedes utilizar las funciones wp_script_add_data() y wp_style_add_data(), alias de los métodos descritos anteriormente:

add_action( 'wp_enqueue_scripts', function() {

  // Cargar el css de IE 9
  wp_enqueue_style( 'style-ie9', get_stylesheet_directory_uri() . "/ie9.css" );
  // Añadir el condicional
  wp_style_add_data( 'style-ie9', 'conditional', 'lt IE 9' );

  // Cargar el JavaScript de IE 9
  wp_enqueue_script( 'js-ie9', get_stylesheet_directory_uri() . "/ie9.js" );
  // Añadir el condicional
  wp_script_add_data( 'js-ie9', 'conditional', 'lt IE 9' );
   
} );

De esta forma tendremos los condiconales IE con la ventaja del excelente control de dependencias de WordPress. Genial, ¿verdad? De todas formas, con la llegada de Microsoft Edge espero que los condicionales IE pronto sean pronto parte de la prehistoria.