Condicionando las cosas para Internet Explorer

Usar comentarios condicionales para eludir incompatibilidades con distintas versiones de Internet Explorer no es lo ideal porque lo ideal es resolverlas pero, tampoco es un pecado y es la forma más simple agrupar etiquetas específicas que sólo serán aplicadas a ese navegador y, sin duda, es un método mucho más flexible y seguro que utilizar hacks estrafalarios que no siempre dan resultados.

Este método permite agregar etiquetas de cualquier tipo, ya sean reglas de estilo específicas, como scripts o cualquier otra y las condiciones pueden ser utilizada tanto en el head de una página como en el body e incluso, dentro de una entrada de un blog.

El formato standard es el siguiente:

<!--[if IE]>
  ... acá ponemos las etiquetas que sólo se ejecutaran en Internet Explorer ...
<![endif]-->

Una serie de variantes permiten establecer las versiones de IE donde se aplicarán:

<!--[if IE 7]>
  ... sólo en IE version 7 ...
<![endif]-->

Con lt se indica menor que y con lte menor o igual que:

<!--[if lt IE 8]>
  ... versiones anteriores a la 8 ...
<![endif]-->

<!--[if lte IE 8]>
  ... IE8 o inferior ...
<![endif]-->

Con gt se indica mayor que y con gte mayor o igual que:

<!--[if gt IE 8]>
  ... versiones posteriores a la 8 ...
<![endif]-->

<!--[if gte IE 8]>
  ... IE8 o superior ...
<![endif]-->

También pueden usarse condiciones negativas con el carácter ! que indica NOT:

<![if !IE 7]>
  ... NO se está usando IE7 ...
<![endif]>

Algunos preguntan si es posible usar estos condicionales para detectar el navegador y crear condicionales para otros. La respuestas es no pero, sin embargo, si es posible condicionar algo para que sólo se ejecute en navegadores que no sean Internet Explorer y hay una confusión respecto a esa sintaxis que debe ser escrita de este modo:

<![if !IE]>
  ... esto sólo se ejecutará en navegadores que no sean Internet Explorer ...
<![endif]>

En este ejemplo, si se está utilizando IE se verá una imagen y en caso contrario, se verá otra:

<!--[if IE]>
  <img src="imagen_ IE_SI" />
<![endif]-->

<![if !IE]>
<img src="imagen_ IE_NO" />
<![endif]>

Para Microsoft, a todo navegador que no sea Internet Explorer se lo denomina downlevel browser y ellos simplifican las cosas de este modo:

<!--[if true]>
  ESTAS USANDO INTERNET EXPLORER
<![endif]-->

<![if false]>
  NO ESTAS USANDO INTERNET EXPLORER
<![endif]>

Así que con el ejmplo anterior, el resultado será el mismo: