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.

  • Jon Gonzalez

    Buenas,

    Yo siempre que he usado temas he visto que directamente se ponen CSS y js en el head del theme.

    He intentado buscar sobre el control de dependencias que mencionas y no he visto artículos que lo expliquen así como sus virtudes.

    En Joomla si que siempre suelo usar funciones que añaden el código de inclusión de js y CSS al head pero acabó de descubrirlo aquí en wp, gracias!

    • Buenos días!!

      Es cierto que Joomla cuenta con métodos para añadir scripts al documento. Sin embargo, en Joomla no hay manejo de dependencias. Si un script o CSS depende de otro y no lo pones en el orden correcto, fiasco, no funcionarán. Y si dos extensiones añaden el mismo script, fiasco, tendrás el script duplicado en el documento.

      Pero en WordPress, cuándo añades un js o un css, declaras sus dependencias y su identificador, información que es utilizada para cargar los archivos en el orden correcto respetando las dependencias y para no cargar el mismo script o CSS dos veces según el identificador.

      Por eso digo en el post que el sistema de manejo de dependencias de WordPress me parece excelente y que romperlo es una pena. De todas formas, en este artículo trato específicamente sobre scripts con condicionales IE dando por hecho que ya se sabe como añadir CSS y JavaScript “normales”. Estoy preparando otro post sobre eso, avisaré en breve.

    • Jon Gonzalez

      Buenas,

      Gracias por la respuesta. Ahora ya entiendo entonces por que añadirlo directamente en el head es una mala práctica 🙂

      La verdad es que hay algunas cosas que no me gustan de cada uno de los CMS pero esta me la apuntó como positiva para WP.

      Para mi su gran pega sigue siendo tener que usar plugin externo para algo básico como los idiomas, sobre todo si desarrollas en una comunidad bilingüe donde todo lo que te piden es siempre bilingüe y luego los plugins se “pegan” entre si.

      Voy a mirarme lo de las dependencias, tengo un proyecto donde tuvimos problemas con jquery por ello.

      Un saludo y gracias por el artículo!