hacks y filtros en css
TRANSCRIPT
Hacks y Filtros en CSS
10/04/2011
JOSÉ ALONSO KUYOC BALAM
Lic. José Leonel Pech May.
Diseño de Aplicaciones Web.
Instituto Tecnológico Superior de Valladolid
Introducción
Uno de los problemas mas comunes al momento de implementar sitios
web es la compatibilidad para los diferentes navegadores (Firefox, Internet
Explorer 6, Internet Explorer 7, Safari, etc.), esto por que cada uno de estos
interpreta de forma diferente las hojas de estilos.
Hacer frente a los defectos del navegador a menudo constituye una gran
parte del trabajo de un diseñador web A veces no hay manera razonable de
lograr un diseño que deseamos en todos los principales navegadores web, sin
usar algunas reglas especiales de excepción.
Para esto es la utilización de éstas herramientas que nos evitan tantos
problemas y dolores de cabeza la momento de programar los estilos en CSS y
se puedan visualizar muy bien en los diferentes navegadores.
En éste documento se explicará le concepto sobre los hacks y los filtros,
así como la forma de su utilización como herramientas de suma importancia en
el desarrollo web. De igual forma se muestran ejemplos claros donde se podrán
apreciar el funcionamiento de éstos y la diferencia que hay entre utilizarlos y
no.
Hacks y filtros CSS
Los hacks sirven para que la apariencia de nuestras páginas en Internet
Explorer se vea de la misma forma que en los diferentes navegadores que
existen, ya que en algunos navegadores no soportan algunas propiedades de
CSS o ignoran las reglas para trabajar con ellas. En especial el que mayor
causa problema es el IE como he mencionado. Aquí le mostraré unos
ejemplos de cómo se trabaja con los hacks y aprecien la diferencia al trabajar
con ellos.
Normalmente se dice cuando nombramos una propiedad de un estilo, este es
interpretado por todos los navegadores, pero nos dice que si anteponemos # se
aplica a todos las versiones de Internet Explorer, además si utilizamos _ el
estilo se aplicará a Internet Explorer 6, por ejemplo aquí debajo se muestra
como quedaría especificado para los diferentes navegadores:
1. .mydiv {
2. height: 15px; /* Para todos los Navegadores */
3. #height: 20px; /*Para Internet Explorer */
4. _height: 25px; /* Para Internet Explorer 6 */
5. }
Con esto nos damos cuenta que obtenemos un mismo estilo interpretado de
forma distinta de acuerdo al navegador que tengamos.
Ejemplos del Hack
En el siguiente ejemplo, en donde se aprecia la aplicación de colores diferentes
a las tipografías de acuerdo al navegador. Por ejemplo: Azul para Firefox, Azul
para IE7 y verde para IE6. De ésta forma podemos darnos cuenta que nuestro
estilo que estamos creando quedaría de la siguiente manera:
1. body {
2. font-family: "Trebuchet MS", Tahoma, Verdana;
3. font-size: 12px;
4. color: #006699;
5. #color: #990000;
6. _color: #009933;
7. }
Ahora, si éste estilo lo aplicamos a nuestra página donde estemos trabajando,
el código quedaría de la siguiente forma:
1. <html>
2. <head>
3. <title> CSS Hacks</title>
4. <style type="text/css">
5. body {
6. font-family: "Trebuchet MS", Tahoma, Verdana;
7. font-size: 12px;
8. color: #006699;
9. #color: #990000;
10. _color: #009933;
11. }
12.</style>
13.</head>
14.<body>
15.<h5> CSS Hacks </h5>
16.<p> Microsoft is slowly ... compliant.</p>
17.</body>
18.</html>
Si nos damos cuenta dependiendo de los navegadores que utilicemos veremos
el color de los textos. En ésta ocasión yo poseo una versión de IE7 y la
comparo con el navegador Mozilla Firefox V4, y se ven las diferencias y como
funciona el hack en cada una de ellas.
Por otro lado los filtros se usan para especificar u ocultar reglas CSS para los
diferentes navegadores que usamos para visualizar las páginas web.
Un ejemplo particular de los filtros son los comentarios condicionales, que
como su nombre lo indica podemos condicionar ciertas reglas para agregar
hojas de estilos a las distintas versiones de los navegadores.
Ahora se mostrará un ejemplo del funcionamiento de los filtros en internet
Explore.
<!--[if IE]>
<style type="text/css">
@import ("basico_ie.css");
</style>
<![endif]-->
En las líneas de arriba se muestran las especificaciones del filtro. En la primera
línea podemos observar que <!--[if IE]> indica el inicio del filtro y cuya condición
nos dice que SI el navegador es cualquier versión de Internet Explorer
importará las reglas de la hoja de estilos que está llamando en @import
("basico_ie.css") y en la línea anterior nos especifica que es de tipo texto con
estilos. <style type="text/css">.
Cabe mencionar que éste filtro solo funciona si es IE en dado caso los
navegadores lo tomarán como un simple comentario normal sin importancia ya
que para IE es un sentencia válida que especifica una orden. También se
puede especificar la versión de IE que queremos condicionar para que funcione
el filtro especificando en la primera línea por ejemplo <!--[if gte IE 6]>. Donde
gte significa "greater than or equal" ("igual o mayor que"). Y de ésta forma
indica que SI la versión de IE es mayor o igual que 6. Y d ésta forma solo
funcionará en esa versión o posterior.
Bibliografía
http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-
dolores-de-cabeza-en-internet-explorer/
http://www.librosweb.es/css/capitulo13/hacks_y_filtros.html
http://www.librosweb.es/css_avanzado/capitulo6/
comentarios_condicionales_filtros_y_hacks.html
http://es.scribd.com/doc/50736254/65/Hacks-y-filtros
Conclusión
Como vimos en éste documento y en los ejemplos plasmados, los hacks
y filtros CSS son de gran importancia al momento de diseñar y codificar
páginas web ya que sin ellos tendríamos muchísimos problemas al momento
de publicar las paginas al internet y por consiguiente poder visualizarlas en los
navegadores web.
Actualmente, los navegadores modernos tienen muy buen soporte para
el CSS, por lo menos lo suficiente, como para utilizar CSS en la disposición y
presentación de la página Web. A veces, ciertos elementos de la página
aparecerán de manera distinta según el tipo navegador y su versión.
Lo cierto es que los Hacks y los filtros CSS están ahí y muchas personas
los utilizan habitualmente.
Hay varios tipos de Hacks, con técnicas más o menos conflictivas u
ortodoxas. Lo único que se recomienda es que no hay que abusar de ellos,
pero en algunas ocasiones no nos queda otra solución que utilizarlos para que
una página se vea de la misma manera en los navegadores más comunes.
Vimos también que hay tipos de Hacks CSS que sirve para ocultar ciertos
estilos en Firefox u otros navegadores y que sólo funcionan en Internet
Explorer.