Hojas de estilo en cascada (CSS) con Internet Explorer (IE)
webn...@gmail.com
como sugerencia a la hora de diseñar páginas web usando hojas de
estilo para Internet Explorer.
Hacer un solo diseño estándar para todos los navegadores sería
fenomenal, lastimosamente eso no podría suceder si realizamos un
diseño complejo. Afortunadamente, existe diferentes métodos para
hacer posible que nuestro diseño se vea igual o diferente para cada
versión de IE, incluso para cada sistema operativo en la que se
encuentre IE.
Quizás habrás visto éste código en otros sitios recomedándoles
usar:
Código:
######################################################################
<!--[if IE]>
<link rel="StyleSheet" type="text/css" href="ie.css">
<![endif]-->
######################################################################
Pues bién, esa forma nos permite enviar una hoja de estilo
exclusivamente para aquellos user agent (agentes usuarios) que son de
la familia de Internet Explorer, mientras que otros user agents como
Mozilla Firefox, DocZilla, Opera y todos los demás, no los
comprenderá. Serán tomadas como parte de los comentarios de un
documento web.
La formula empírica para éste método es de la siguiente manera:
Código:
######################################################################
<!--[if ( ! )* ( comparación )* IE ( número de la versión )* ]>
El contenido del HTML a analizar si la condición es verdad, va aquí.
<![endif]-->
######################################################################
Usando la fórmula, se puede usarlo de la siguente manera:
Código:
######################################################################
<!--[if gte IE 5]>
IE 5.0 - 6.x
<!--[if IE 5]>
IE 5.0
<!--[if IE 5.5000]>
IE 5.5
<!--[if IE 6]>
IE 6.0
<!--[if gte IE 5.5000]>
IE 5.5 - 6.x
<!--[if lt IE 6]>
IE 5.0 - 5.5
######################################################################
También podemos usar otros operadores como:
! El operador "no".
lt El operador "menor que".
lte El operador "menor que o igual a".
gt El operador "mayor que".
gte El operador "mayor o igual a".
Como ejemplo, usemos la siguiente expresión:
Código:
######################################################################
<!--[if lte IE 7.0]>
<style type="text/css" media="screen, aural and print">
@import url("ie.css.php");
</style>
<![endif]-->
######################################################################
En nuestro idioma, el código pregunta si la versión de IE es menor
que o igual a 7.0, entonces ejecutamos la orden, lo que se hace allí
es important una hoja de estilos excluvamente para IE cuyo nombre es
"ie.css.php".
Te habrás dado cuenta que estoy importanto una hoja de estilo con
extención .php. Claro que es posible, y mejor, porque así, enviamos
al navegador una hoja de estilo puro. Cuando uses esta forma, te darás
cuenta los cambios que surgen en la presentación.
Para crear una hoja de estilo con php se envia una cabecera del tipo:
text/css.
Como ejemplo crearemos la hoja de estilo ie.css.php:
Código:
######################################################################
<?php
@header('Content-Type: text/css; charset=ISO-8859-1');
?>
/* Éste archivo sólo es aplicable para Microsoft IE */
/* Éste bloque es solamente para Microsoft IE con sistema operativo
(OS) Windows */
/* IE5 */
@media tty {
i{content:"\";/*" "*/}};
@import 'ie50.css'; {;}/*";}
}/* */
/* IE 5.5 */
@media tty {
i{content:"\";/*" "*/}}@m;
@import 'ie55.css'; /*";}
}/* */
/* IE5 and IE5.5 */
@media tty {
i{content:"\";/*" "*/}}
@import 'ie5_55.css'; /*";}
}/* */
/* Éste bloque es aplicable solo para Microsoft IE con Mac OS X */
/* IE5 */
/*\*//*/
@import "ie50_MacOSX.css";
/**/
/* Éste bloque solamente es aplicable para Microsoft IE con Macintosh
OS*/
/* IE5 */
/*\*//*/
@import "ie50_Macintosh.css";
/**/
/* Éste bloque solo es aplicable para Microsoft IE 7 */
/* IE 7 */
@-ms-ie7
{
/* Aquí van tus métodos */
}
######################################################################
Lindo verdad, ahora no solo para algunas versiones, sino que también
para algunos sistemas operativos en particular.
Ya para terminar les diré que la fórmula mencionado arriba, sólo es
aplicable para documentos que son enviadas como text/html y
aplication/xhtml+xml, más no como aplication/xml.
Para que funcione en aplicaciones XML, tenemos que usar la siguiente
expresión:
Código:
######################################################################
<!--[if IE]><![if !IE]><![endif]-->
El contenido del HTML a analizar si la condición es verdad, va aquí.
<!--[if IE]><![endif]><![endif]-->
######################################################################
Puedes usar los operadores mencionados arriba, pero bajo la misma
expresión mencionada en este último código.
Cómo un ejemplo ejecutado, miren el código de mi página principal
usando IE:
view-source:http://webnewbie.org
Agradeceré algunos comentarios exclusivamente sobre éste tema que
será de interés por mucho tiempo.