Cristian in CSS
June 26, 2008
Hace unas semanas un amigo me pidió ayuda con un problema de CSS con Safari que no posicionaba unas cajas flotantes correctamente.
El problema lo solucionamos en 5 minutos reseteando adecuadamente la hoja de estilos con la que trabajaba lo solucionamos correctamente.
Usar un reset en la hoja de estilos te facilita el trabajo ya que establece los parámetros para los elementos HTML en el mismo valor para todos los navegadores.
Personalmente uso el reset de Eric Meyer, considero que es el que profundiza más en los elementos y con su semántica.
Puedes añadir el reset de varias formas.
En proyectos pequeños ( -500 líneas de código) suelo incluir el reset directamente en la hoja de estilos principal, al principio.
En proyectos grandes me inclino pro separar el contenido de los archivos CSS en varias hojas, para ganar mas control.
Ahí tienes dos opciones, incluir el link a la hoja de estilos en el header de la página HTML siempre antes que cualquier otra hoja de estilos, o incluir el reset en la hoja de estilo principales mediante un @import, también siempre antes de cargar el contenido de la hoja de estilos.
Personalmente me inclino por la segunda, reduce las peticiones en el servidor y queda más limpio en el código. Por contra creo que esta segunda opción hace que el contenido CSS de la página cargue ligeramente más lento.
Otro de los secretos que te puede ayudar mucho a conseguir una mejor compatibilidad entre navegadores es usar un doctype en modo estricto, y claro está conocer por dónde falla internet explorar. Con experiencia y entendiendo la razón de los bugs de IE6 aprenderás a interpretar el lenguaje y con el tiempo predecir los fallos antes de testearlos.
Para proyectos grandes es útil disponer de un framework de trabajo en CSS, personalmente soluciono los problemas con los png’s transparentes y del hover sobre elementos HTML diferentes al <a> con el uso de dos comportamientos: iepngfix.htc y csshover.htc.
Del mismo modo te recomiendo insertar estos comportamientos en una hoja de estilos aparte, destinada a corregir los bugs del IE6 y linkeada con un comentario condicional en el header del documento HTML.
Si quereis profundizar un poco más sobre el tema os dejo este enlace que leí la semana pasada:
http://www.anieto2k.com/2008/06/19/como-conseguir-compatibilidad-entre-navegadores-siempre/
Animaros a comentar, que estructura de trabajo usais vosotros?
0 Comments
Insert Comment