Cómo crear una hoja de estilo sólo para IE | Programar Plus

0

ie-only-css.gif

Este artículo se ha actualizado a partir de una versión anterior (originalmente el 24 de septiembre de 2007). Solo quería expandirlo y dejarlo más claro.

Si lees este blog, hay un 99% de posibilidades de que hayas tenido una experiencia de tirarse el pelo con IE. Pero si vale la pena ser un codificador de CSS, debería poder lidiar con eso. Soy de la opinión de que puedes manejar cualquier cosa que IE pueda lanzarte sin el uso de hacks. Los piratas informáticos son peligrosos, ya que se basan en exploits no estándar, por lo que no se puede predecir cómo se comportarán en futuros navegadores. La herramienta elegida para combatir los problemas de IE es la hoja de estilo condicional. IE proporciona etiquetas de comentarios, admitidas hasta el actual IE 8 para apuntar a versiones específicas, así como cosas mayores que / menos que para apuntar a múltiples versiones a la vez.

¿Por qué utilizar hojas de estilo condicionales?

  • Tienes problemas, necesitan arreglarlos
  • Mantiene su código libre de piratería y válido
  • Mantiene limpia su hoja de estilo principal
  • Técnica perfectamente aceptable, sancionada por Microsoft.

Y recuerde, estas etiquetas condicionales no tienen que usarse solo para CSS. Puede cargar JavaScript o incluso utilizarlos en el contenido de su sitio para mostrar mensajes especiales específicos de IE.

El código

Esto iría en su con todos los demás archivos CSS regulares ed CSS. Las etiquetas de apertura y cierre deberían resultar familiares, son solo comentarios HTML habituales. Luego, entre corchetes, “SI” e “IE” deberían ser bastante obvios. La sintaxis a tener en cuenta es “!” significa “no”, entonces! IE significa “no IE”. gt significa “mayor que”, gte significa “mayor o igual que”, lt significa “menor que”, lte significa “menor o igual que”.

Tenga en cuenta que IE 10 y versiones posteriores NO admiten comentarios condicionales en absoluto.

Apuntar a TODAS LAS VERSIONES de IE

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/all-ie-only.css" />
<![endif]-->

Apuntar a todo EXCEPTO IE

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/not-ie.css" />
 <!--<![endif]-->

Target IE 7 ÚNICAMENTE

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie7.css">
<![endif]-->

Objetivo IE 6 ÚNICAMENTE

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie6.css" />
<![endif]-->

Target IE 5 ÚNICAMENTE

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie5.css" />
<![endif]-->

Target IE 5.5 SOLAMENTE

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie55.css" />
<![endif]-->

Objetivo IE 6 y INFERIOR

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie6-and-down.css" />
<![endif]-->

Objetivo IE 7 y INFERIOR

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie7-and-down.css" />
<![endif]-->

Objetivo IE 8 y INFERIOR

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie8-and-down.css" />
<![endif]-->

Objetivo IE 6 y SUPERIOR

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie6-and-up.css" />
<![endif]-->

Objetivo IE 7 y SUPERIOR

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie7-and-up.css" />
<![endif]-->

Objetivo IE 8 y SUPERIOR

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/ie8-and-up.css" />
<![endif]-->

Objetivo IE 10

Lee esto.

CSS universal de IE 6

Tratar con IE 6 y versiones inferiores siempre es un desafío muy especial. En estos días, la gente está abandonando el soporte a diestro y siniestro, incluidas las principales empresas, las principales aplicaciones web e incluso los gobiernos. Hay una mejor solución que simplemente dejar que el sitio se vaya al infierno, y es servir a IE 6 y por debajo de una hoja de estilo especial reducida, y luego servir a IE 7 y por encima (y todos los demás navegadores) el CSS normal. Esto se ha acuñado como IE 6 CSS universal. 

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="https://css-tricks.com/how-to-create-an-ie-only-stylesheet/REGULAR-STYLESHEET.css" />
<![endif]-->

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Trucos

Si debes…

IE-6 SOLAMENTE

* html #div { 
    height: 300px;
}

IE-7 SOLAMENTE

*+html #div { 
    height: 300px;
}

IE-8 SOLAMENTE

#div {
  height: 300px/;
}

IE-7 y IE-8

#div {
  height: 300px9;
}

NO IE-7 SOLAMENTE:

#div {
   _height: 300px;
}

Ocultar de IE 6 y INFERIOR:

#div {
   height/**/: 300px;
}
html > body #div {
      height: 300px;
}

Argumento en contra de las hojas de estilo condicionales

No deberíamos necesitarlos. Están en contra del espíritu de los estándares web.

Argumento a favor de las hojas de estilo condicionales

Sí, pero los necesitamos.

Recursos adicionales

  • Errores de IE que te atraparán todo el tiempo.
  • Documentación de errores de IE
(Visited 4 times, 1 visits today)