Comentarios condicionales, filtros y hacks
Comentarios condicionales
En ocasiones, cuando se diseña un sitio web, es preciso aplicar
diferentes reglas y estilos en función del navegador. De esta forma, se
pueden corregir los errores y limitaciones de un navegador sin afectar
al resto de navegadores.
Microsoft introdujo en su navegador Internet Explorer 5 un mecanismo llamado "comentarios condicionales", que todavía incluyen las versiones más recientes como Internet Explorer 8, y que permite aplicar diferentes estilos CSS según la versión del navegador.
La sintaxis de los comentarios condicionales se basa en la de los comentarios normales de HTML:
La sintaxis de los comentarios condicionales permite que su contenido
se ignore en cualquier navegador que no sea de la familia Internet
Explorer.
Las expresiones se crean combinando identificadores, operadores y valores. El único identificador definido es
El operador más sencillo definido por los comentarios condicionales es el operador de negación (
Si se quiere restringir el alcance del comentario condicional a una
única versión de Internet Explorer, se puede indicar directamente el
número de la versión:
Además de las versiones específicas, también es posible restringir
los comentarios condicionales a un grupo de versiones de Internet
Explorer mediante los operadores "menor que" (
Por último, también se pueden utilizar otros operadores más complejos
similares a los que se pueden encontrar en los lenguajes de
programación. El operador AND (
Las principales ventajas de los comentarios condicionales son:
Microsoft introdujo en su navegador Internet Explorer 5 un mecanismo llamado "comentarios condicionales", que todavía incluyen las versiones más recientes como Internet Explorer 8, y que permite aplicar diferentes estilos CSS según la versión del navegador.
La sintaxis de los comentarios condicionales se basa en la de los comentarios normales de HTML:
Las expresiones se crean combinando identificadores, operadores y valores. El único identificador definido es
IE, que permite crear el comentario condicional más simple:!), que se indica delante de una expresión para obtener el resultado contrario:lt), "mayor que" (gt), "menor o igual que" (lte), "mayor o igual que" (gte).&) combina dos expresiones para crear una condición que sólo se cumple si se cumplen las dos expresiones. El operador OR (|)
también combina dos expresiones y crea condiciones que se cumplen
cuando al menos una de las dos expresiones se cumple. También se pueden
utilizar paréntesis para crear expresiones avanzadas:- Compatibilidad con cualquier navegador, ya que el resto de navegadores consideran que los comentarios condicionales son comentarios normales de HTML e ignoran su contenido.
- No requiere el uso de lenguajes de programación como JavaScript, aunque se puede combinar con este tipo de técnicas para detectar dinámicamente el tipo y versión de navegador.
Nota
Basándose en la idea de los comentarios condicionales, se ha
desarrollado una técnica que permite crear hojas de estilos
condicionales que aplican diferentes propiedades en función de la
versión del navegador. Esta técnica se denomina Conditional CSS
y requiere procesar las hojas de estilos en el servidor antes de
servirlas a los usuarios. Los lenguajes de programación de servidor
soportados son PHP, C y C++.
Filtros y hacks
Los filtros y hacks es otra de las técnicas disponibles para aplicar diferentes estilos y reglas CSS
en función del navegador que visualiza los contenidos. Al contrario que
los comentarios condicionales, los filtros y hacks constituyen una
forma poco elegante y técnica de solucionar este problema.
La idea de los filtros y hacks consiste en aprovechar los errores y carencias de los navegadores para ocultar los estilos CSS que no se deben aplicar en ese navegador. El siguiente ejemplo muestra uno de los hacks más antiguos y conocidos que aprovecha un error en las versiones obsoletas de Internet Explorer:
Internet Explorer 5 y 5.5 no interpretan correctamente el modelo de cajas de CSS,
por lo que no muestran los elementos con la misma anchura que el resto
de navegadores. Si se quiere realizar un diseño con el mismo aspecto en
cualquier navegador, es preciso utilizar propiedades diferentes para
Internet Explorer 5/5.5 y el resto de navegadores.
Entre los muchos errores de Internet Explorer 5/5.5 se encuentra la imposibilidad de procesar correctamente la declaración
El resultado final del hack anterior es que Internet Explorer 5/5.5 aplica un valor de
Algunos filtros y hacks son mucho más sencillos que el mostrado anteriormente. De hecho, existen tres filtros muy simples que se utilizan para aplicar diferentes estilos a cada versión de Internet Explorer. El primer filtro es
Si se añade
Otro de los hacks más utilizados es
La regla CSS
anterior muestra los párrafos de la página de color rojo en cualquier
navegador salvo en los navegadores Internet Explorer 5, 5.5 y 6, donde
se muestran de color azul.
Por último, también existe el hack
En el ejemplo anterior, los párrafos de la página se muestran de
color azul en cualquier navegador de la familia Internet Explorer cuya
versión sea anterior a la 8 y se muestran de color rojo en cualquier
otro navegador.
Se puede consultar la lista completa de filtros y hacks para cada navegador y cada versión en el sitio web http://centricle.com/ref/css/filters/
El uso de los filtros y hacks siempre debe considerarse como el último recurso para conseguir que los diseños tengan el mismo aspecto en cualquier navegador. Como los filtros y hacks se basan en aprovechar errores de los navegadores, su principal problema es que no garantizan su funcionamiento con las versiones más modernas de los navegadores. Además, los filtros y hacks complican el código CSS y lo hacen más difícil de leer y de mantener.
La mejor alternativa a los filtros y hacks es el uso de comentarios condicionales. Si no es posible el uso de comentarios condicionales, es preferible que el diseño de la página muestre ligeras diferencias visuales en cada navegador.
Afortunadamente, la importancia de los filtros y hacks es cada vez menor, ya que todos los navegadores modernos solucionan los graves errores de sus versiones anteriores e introducen menos errores nuevos.
Fuente: librosweb.es
La idea de los filtros y hacks consiste en aprovechar los errores y carencias de los navegadores para ocultar los estilos CSS que no se deben aplicar en ese navegador. El siguiente ejemplo muestra uno de los hacks más antiguos y conocidos que aprovecha un error en las versiones obsoletas de Internet Explorer:
#elemento { width: 300px; voice-family: "\"}\""; voice-family: inherit; width: 250px; } html > body #elemento { width: 300px; }
Entre los muchos errores de Internet Explorer 5/5.5 se encuentra la imposibilidad de procesar correctamente la declaración
voice-family: "\"}\"";. Por tanto, las reglas CSS anteriores se interpretan de la siguiente forma en cada navegador:/* Internet Explorer 5/5.5 */ #elemento { width: 300px; } /* Internet Explorer 6 */ #elemento { width: 300px; width: 250px; } /* Resto de navegadores */ #elemento { width: 300px; width: 250px; } html > body #elemento { width: 250px; }
300px a la propiedad width y el resto de navegadores aplican un valor de 250px. Si se tienen en cuenta los márgenes, bordes y rellenos, el elemento se muestra con el mismo aspecto en cualquier navegador.Algunos filtros y hacks son mucho más sencillos que el mostrado anteriormente. De hecho, existen tres filtros muy simples que se utilizan para aplicar diferentes estilos a cada versión de Internet Explorer. El primer filtro es
* html, que aplica las reglas CSS a las versiones de Internet Explorer anteriores a la 7:p { color: red; } * html p { color: blue; }
* html delante del selector de cualquier regla CSS,
esa regla sólo se aplica a los navegadores de la familia Internet
Explorer anteriores a la versión 7. De esta forma, en el ejemplo
anterior los párrafos de la página se muestran de color azul en los
navegadores Internet Explorer 5, 5.5 y 6, mientras que se muestran de
color rojo en el resto de navegadores.Otro de los hacks más utilizados es
_ (guión bajo) que
hace que una propiedad sólo se aplique a los navegadores de la familia
Internet Explorer anteriores a la versión 7:p { color: red; _color: blue; }
Por último, también existe el hack
* (asterisco) que
hace que una propiedad sólo se aplique en los navegadores de la familia
Internet Explorer anteriores a la versión 8:p { color: red; *color: blue; }
Se puede consultar la lista completa de filtros y hacks para cada navegador y cada versión en el sitio web http://centricle.com/ref/css/filters/
El uso de los filtros y hacks siempre debe considerarse como el último recurso para conseguir que los diseños tengan el mismo aspecto en cualquier navegador. Como los filtros y hacks se basan en aprovechar errores de los navegadores, su principal problema es que no garantizan su funcionamiento con las versiones más modernas de los navegadores. Además, los filtros y hacks complican el código CSS y lo hacen más difícil de leer y de mantener.
La mejor alternativa a los filtros y hacks es el uso de comentarios condicionales. Si no es posible el uso de comentarios condicionales, es preferible que el diseño de la página muestre ligeras diferencias visuales en cada navegador.
Afortunadamente, la importancia de los filtros y hacks es cada vez menor, ya que todos los navegadores modernos solucionan los graves errores de sus versiones anteriores e introducen menos errores nuevos.
Fuente: librosweb.es
Etiquetas:
CSS
,
Html
,
Maquetacion
