Este es otro artículo publicado por Sitepoint en cuanto a los hacks, fixes, IE6 y navegadores decentes.
1. Usar un DOCTYPE
Debes poner siempre un DOCTYPE al principio de cada documento HTML. Una versión ‘estricta’ del estándar es recomendada. Por ejemplo:
Para HTML 4.0 estricto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Para XHTML 1.0 estricto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Usar position:relative
Definir un elemento con position:relative resuelve una multitud de problemas, especialmente cuando cuando experimentas contenedores invisibles o extrañamente alineados. Obviamente, necesitas ser cuidadoso que los elementos con position:absolute; son posicionados de acuerdo a su padre.
3. Usar display:inline para elementos flotados
Los elementos flotados con margen puede provocar al famoso bug de IE6 sobre el doble margen. Por ejemplo, cuando especificas un margen y en realidad en IE6 son 10px, display:inline resolverá el problema y, aunque no sea requerido, la CSS sigue validando.
4. Define un elemento con hasLayout
Muchos de los problemas de renderizado en IE6 (e IE7) pueden ser solucionados definiendo la propiedad hasLayout de un elemento. Este es una propiedad interna de Internet Explorer que determina como es delimitado y posicionado el contenido, con respecto a otros elementos. Definiendo hasLayout puede ser esencial también si necesitas convertir un elemento lineal a bloque o aplicar transparencias.
La manera más fácil de definir hasLayout en CSS es definir el alto (height) o ancho (width) de un elemento (zoom también puede ser usado, pero no es parte del estándar recomendado de CSS de la W3). Definir las medidas reales es recomendado, pero, donde no es posible, lo más conveniente es usar height:1%. Si el elemento padre no tiene una altura definida, la altura física del elemento no es afectado pero la propiedad hasLayout es definido.
5. Arreglar el bug de caracteres repetidos
Layouts complejos pueden generar un bug en el que los últimos caracteres de un elemento flotado pueden aparecer en un elemento clear que esté abajo. Hay varias soluciones, pocas son las ideales y se requiere un poco de prueba y error:
- Asegurate de que los elementos flotados tengan display:inline;
- Usa margin-right: -3px; en el último elemento flotado
- Usa un comentario condicional como último item en el elemento flotado, por ejemplo <!–[if !IE]>Escribe tu comentario aquí<![endif]–>
- Usa un div vacío en el último elemento del contenedor (puede ser necesario también usar un width de 90% o similar)
Visita PositionIsEverything para saber más sobre el problema.
6. Usa <a> SOLO para elementos clickeables y hovereables
IE6 solo puede aplicar efectos hover de CSS a la etiqueta <a>. Debes usarlas también para controles proporcionados con JavaScript, para que puedan seguir siendo navegables con el teclado. Hay algunas opciones alternativas, pero las etiquetas <a> son las más confiables.
7. Usa !important o selectores avanzados para código específico de Internet Explorer.
Es posible escribir código valido que solo IE6 interprete, sin recurrir a los hacks tradicionales o CSS condicionales en archivos adicionales. Por ejemplo, alturas mínimas (min-height) pueden ser definidas usando:
#element {
min-height: 20em;
height: auto !important; /* entendible para todos los navegadores */
height: 20em; /* IE6 usa mal este valor /*
}
IE6 no entiende la propiedad ‘min-height’ y malinterpreta ‘auto’ en la altura de 20em. Como sea, así aumenta la dimensión del contenedor si el contenido requiere más espacio.
Otra opción es usar selectores avanzados, por ejemplo.
#element {
min-height: 20em;
height: 20em;
}
/* Ignorado por IE6 */
#element[id] {
height: auto;
}
8. Evita medidas de porcentaje
Los porcentajes confunden a IE. A menos que puedas especificar cuidadosamente el tamaño de cada elemento padre, es mejor si los evitas. Pero puedes usar valores en porcentaje en otros navegadores, por ejemplo, con la propiedad !important. Por ejemplo:
body {
margin: 2% 0 !important;
margin: 20px 0; /* Solo IE6 */
}
9. Prueba antes y prueba después
Nunca dejes de probar en IE6 hasta que tu página o aplicación está terminada; si no, los problemas serán peores y tomarán más tiempo en arreglarse. Si tu sitio va bien en Firefox e IE6, es casi seguro de que funcionará en los demás navegadores.
10. Refactoriza tu código
A menudo, puede tomar más tiempo arreglar que re-estructurar un layout. Alteraciones menores al HTML y CSS más simple suelen ser más eficaces. Esto puede decir que abandonas el código perfecto legítimo, pero se presentarán pocos problemas a largo plazo y sabrás como manejarlos.
Mis Conclusiones
A excepción del punto 7, estoy de acuerdo, sobre todo con el punto 9.
¿Y por qué no me gusta usar !important para mis beneficios personales? Porque como expliqué anteriormente en este lugar, la regla !important es una propiedad orientada a la accesibilidad/usabilidad de un sitio web, no para crear fixes que solucionen incompatibilidades entre navegadores.
En cambio, el único hack que me enseñaron a usar fue el del selector de hijos (child selector). Después les explico.
11. Si todo lo anterior no es suficiente y sigues teniendo pesadillas con IE6, bienvenido al club.
jaja… exaaaactooo…
Pingback: Accesibilidad y usabilidad total para una página web | Kernel Web