#CSS {keep-it:simple;}
Cada vez que leo una anotación sobre los problemas de implementación, diferencias visuales y demás falencias que presenta Internet Explorer con el uso de hojas de estilo vuelvo a la misma respuesta, keep it simple.
No voy a discutir el hecho de si IE debería mejorar o no el soporte, esa es la variable que no manejamos, así que vamos a encargarnos de lo que si controlamos.
Antes de empezar voy a dejar en claro que si uno pretende estandarizar el uso de una especificación lo mínimo que puede hacer es respetarla, por lo tanto no esperen ver un hack en las siguientes líneas.
Box Model
Quizás lo mas difícil de entender para alguien que se inicia en el manejo de css es la forma en la que el navegador trata el box model o modelo de caja en español.
Existen dos modelos, el tradicional y el recomendado por la W3C. IE por defecto utiliza el modelo tradicional que es absolutamente opuesto al estándar, sin embargo IE ES capaz de dibujar siguiendo las especificaciones del W3C siempre y cuando uno se lo pida amablemente.
Para lograr que IE siga el box model de la W3C, hay que obligarlo a que trabaje en modo estricto, para ellos simplemente debemos definir el doctype de la siguiente manera.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Sin incluir la delcaración xml <?xml version="1.0"?>
hasLayout
Federico enlazó una buena nota con respecto de este problema, para los que no sepan que diablos es el hasLayout, les recomiendo leer esta nota que lo explica clarito y en español.
Ahora bien, para los que ya sepan lo que es, hay varias soluciones a este problema. La idea consiste en aplicar una propiedad que le permita al elemento en cuestión ganar layout, si bien no existe una propiedad que se destaque por ser la mejor, definir la altura en porcentajes parece ser la menos peligrosa.
Utilizando height:1%; el elemento en cuestión, digamos un párrafo (<p>) adquiere una altura de 1% relativa, permitiéndole ganar layout sin comprometer el resto de la estructura.
Selector Universal
El otro gran problema a la hora de diseñar una estructura “pixel-perfect” es el tema de los márgenes y espacios (padding) predefinidos en IE.
Acá vamos dejar algo en claro, este tipo de problemas por lo general no son tan graves a menos que se este utilizando un layout de ancho fijo y seas muy jodido, dicho esto vamos a la solución.
Por defecto todos los navegadores tienen sus propias hojas de estilos donde asignan un valor por defecto a ciertos elementos “básicos”. Estas propiedades obviamente no son iguales en todos los navegadores y por ende representan un problema.
La solución mas simple es utilizar el selector universal para anular los dos atributos que mayor problema representan, estos son el alto y el ancho. Para ellos definimos esta línea al principio de nuestra hoja de estilos *{margin:0px;padding:0px;}.
Esa simple linea de código nos ahorra miles de problemas ya que reinicia los valores de margen y espacio de todos los elementos del documento.
Conclusión
IE es un dolor de cabeza, pero así mismo es utilizado por la mayoría de los usuarios.
Hay problemas, pero mejor aun hay soluciones. Decir que IE apesta no excusa para justificar que un sitio no funcione debidamente, eso es ser mediocre y los mediocres son los que realmente apestan.
Lista completa de bugs en Internet Explorer y sus soluciones (inglés).
Hay 11 comentarios en #CSS {keep-it:simple;}
Sumate a la discusión y dejá tu opinión.
Jesús
10 de Mayo de 2006 @ 18:28
en mi primer trabajo desarrollando CSS me obligaron a no usar hacks, más que el mayor que. La solución es el “mayor que”
Federico
10 de Mayo de 2006 @ 19:42
Sobre hasLayout, aunque lo estoy usando mal, lo mejor, considero, es aplicar
zoom:1a los elementos de tipo bloque. Debería traer menos consecuencias inesperadas queheight: 1%.Sobre margenes y demases, hay que tener en cuenta que un navegador puede cambiar los valores por defecto de una versión a otra (Opera 8 y 9, sobre el
paddingymargindeBODY).Igualmente, mi filosofia se está yendo a usar en Explorer una hoja de estilos recortada y dejar la avanzada para el resto.
marcoss
10 de Mayo de 2006 @ 20:23
height:1%;es inofensivo generalmente,zoomes un atributo propietario de MS y causaría que la hoja de estilo no valide, aunque también logra el mismo resultado y funciona incluso en modo estricto.Con respecto al margen justamente por eso creo que lo mejor es asegurarse que estén en cero y así obtener un poco mas de control sobre los elementos.
Rodrigo
10 de Mayo de 2006 @ 21:21
Nop … no es tan fácil como lo planteas.
Aunque estoy con vos en lo de keep it simple para CSS (de hecho, solo con mejorar el XHTML tenés varios problemas de CSS resueltos), hay cosas que DEFINITIVAMENTE en IE es imposible de arreglar. Digo, un doble padding SÍ se DEBE arreglar … pero 3px corridos en IE NO se puede y realmente NO SÉ si se debe
También todo depende del layout … no es lo mismo un Wired que un simple template de un blog. Todos diseñamos un template sin hacks, pero un Wired? Te la debo.
Están buenos los hacks … excepto HasLayout, ya los había reseñado en una nota para Users hace un tiempo y gustaron mucho
marcoss
10 de Mayo de 2006 @ 22:40
Definitivamente es así, antes de siquiera pensar en corregir el css valida tu documento xhtml, creo que en eso estamos todos de acuerdo.
El tema de usar hacks es válido, es decir están hechos para solventar un problema, pero mi temor es que eventualmente puedan ser un problema en si mismos.
El bug de los 3px que tuviste y resolviste con el
width: 99.0%;deriva del hasLayout, y coincido con que es un pain in the ass, pero prefiero arreglarlo a sufrirloFederico
10 de Mayo de 2006 @ 23:56
height:1%: ¿Qué acaso IE7 no respeta ese valor?Por cierto, nadie murió por tener una hoja de estilos que no valida.
JEL
11 de Mayo de 2006 @ 16:34
Marcoss, te cito:
¿Estás diciendo que la culpa de que un sitio bien maquetado, en un todo de acuerdo a los estándares recomendados por la W3C, al que MSIE no interpreta correctamente… es del sitio mismo?
Y, Federico: nadie murió por tener una hoja de estilos que no valida… pero qué lindo que se siente ésto. =P
marcoss
11 de Mayo de 2006 @ 17:05
NO, estoy totalmente de acuerdo con que IE representa un problema y sostengo que NO es culpa del diseñador/desarrollador que aún siguiendo las recomendaciones de la W3C las cosas no funcionen.
Ahora lo que estoy diciendo es que ante esta situación hay dos caminos, el fácil o mediocre que básicamente es sentarse en esas bases y excusarse en que X sitio valida perfectamente pero solo se ve en Y navegador, lamentablemente volvemos a lo mismo de requiere Z plugin y optimizado para blaxbla.
La segunda opción, un tanto mas difícil, consiste en lograr un equilibrio capaz de eliminar la necesidad de utilizar X navegador para acceder a Y sitio/aplicación.
sosa
16 de Mayo de 2006 @ 10:52
Los hacks son del diablo.
La mejor manera de manera de mantener una estructura consistente entre IE y los navegadores de a deveras es usar comentarios condicionales:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /><!-- [if IE]><link rel="stylesheet" href="style-ie.css" type="text/css" media="screen" /><![endif]-->asi, en style-ie.css sobreescribes todas las reglas que causan conflicto en IE sin necesidad de utilizar un solo hack. Además asi todo es más legible y fácil de mantener.
marcoss
17 de Mayo de 2006 @ 04:03
sosa: cuando el layout es muy complicado creo que es la mejor solución la que planteas, yo personalente la uso para el solventar el problema del
max-width:en IE.Federico H
18 de Mayo de 2007 @ 14:44
Tengo problemas con la visualización, en Firefox se ve y funciona todo excelente y en IE todo lo contrario….¿Alguien me puede dar una mano?
Saludos y gracias!
Dejá tu opinión »
Los saltos de línea son automáticos, para dar formato a tu comentario puedes utilizar algunas etiquetas xhtml
(<a>, <img>, <strong>, <em>, <del>), Textile o una combinación de ambas.Los campos marcados con un * son obligatorios.