Armonía | En definitiva...

Esto es una traducción de un artículo escrito por Dave Shea.

Sin duda alguna seguro que te has encontrado con un montón de problemas extraños cuando has tratado de crear un sitio Web usando CSS. Habrás terminado dándote cabezazos contra la pared una y otra vez. Este documento es un intento de hacer el proceso de diseño más sencillo, y tener una referencia rápida para ojear cuando tengas algún problema.

Si tienes algo que añadir al texto, por favor coméntalo aquí.

Existen traducciones disponibles en los siguientes idiomas: Francés, Alemán, Holandés, Italiano, Húngaro, Finlandés, Ruso, Portugués, Japonés y Chino simplificado. Eres libre de traducirlo a otros idiomas.

Cuando dudes, valida.

Cuando hagas pruebas, puedes ahorrarte muchos dolores de cabeza simplemente validando tu código primero. Código XHTML/CSS mal escrito puede acabar en un montón de problemas con tu layout.

Crea y prueba tu CSS en el navegador disponible más avanzado antes de probarlo en otros, no después.

Si creas un sitio Web probando en un navegador "roto", tu código se basará en los problemas de ese navegador. Cuando sea hora de probarlo en un navegador mejor adaptado a los estándares, te frustrará ver que todo se dibuja de forma incorrecta. En lugar de eso, empieza desde la perfección de un buen navegador, y luego haz las mejoras para los navegadores menos capaces. Tu código será más estándar desde el principio, y no tendrás que hacer muchos "hacks" para soportar otros navegadores. Hoy día, los mejores navegadores son Mozilla, Safari u Opera.

Cuando uses float en tu layout, asegúrate de limpiarlos correctamente.

Los float son especiales, y no siempre se comportan como esperas. Si te encuentras con que un elemento flotado se sale del elemento contenedor, o simplemente no se comporta como esperas, asegúrate de que lo que quieres es correcto. Échale un ojo al tutorial de Eric Meyer acerca de este problema.

Márgenes colapsados; Aplica padding o un borde para evitarlo.

Puedes pelearte con un espacio en blanco de más donde no lo quieres, o con nada de espacio donde quieres que haya algo. Si estás usando márgenes para ello, su colapsamiento será probablemente el culpable. Andy Budd lo explica a la perfección.

Trata de evitar darle padding o bordes y un ancho fijo a un elemento.

IE5 interpreta incorrectamente el modelo de cajas de CSS, lo que acarrea un montón de problemas con muchas cosas. Hay muchos modos de "rodear" el problema, pero es mucho mejor evitarlo del todo dándole el padding al elemento padre en lugar de al hijo que tiene el ancho fijo.

Evita el "Flash of Unstyled Content" en Internet Explorer.

Si usas @import para tus hojas de estilo externas, más tarde o más tempranos notarás cómo IE muestra un "flash" de la página sin formato antes de aplicar el CSS. Esto puede evitarse.

No uses min-width en IE.

Este atributo no es soportado por IE. Pero sí que trata width como min-width hasta cierto punto, así que con un poco de filtrado, puedes obtener el mismo resultado.

Cuando dudes, disminuye el ancho

Algunas veces los errores en el redondeo causarán cosas como que 50% + 50% sea igual a 100.1%, lo que termina rompiendo la maquetación en algunos navegadores. Trata de cambiar 50% por 49%, o incluso 49.9%.

¿El contenido no se muestra correctamente en IE?

Puede que estés sufriendo el bug Peekaboo, especialmente si se muestra cuando pasamos por encima de un enlace con el ratón. Mira en Position is Everything para una solución.

Ten cuidado al estilizar los enlaces si usas anclas internas.

Si usas anclas internas en tu código, (<a name="ancla">), te darás cuenta de que le afectan las pseudoclases :hover y :active. Para evitar esto, lo mejor es que uses id para las anclas, o estilizar con otra sintaxis ligeramente distinta: :link:hover, :link:active

Asegúrate de que el efecto que deseas existe en realidad.

Hay algunas extensiones propietarias de CSS que no están en la especificación oficial. Si estás tratando de aplicar filter o estilos a las barras de desplazamiento, estarás trabajando con código propietario que no funcionará en ningún navegador salvo en IE. Si el validador te dice que el código que estás usando no está definido, lo más probable es que sea propietario, y no funcione de forma consistente entre navegadores.

Divide y conquista: usa los comentarios para desactivar grandes secciones de estilos.

Especialmente útil cuando trabajamos con grandes y desconocidas hojas de estilos. Comenta la mitad del código. Si el problema aún ocurre, significa que está en la otra mitad. Comenta lo que queda y prueba de nuevo. Si el problema deja de ocurrir, está en la sección comentada. Refina el ámbito de los comentarios y prueba de nuevo. Continua hasta que el problema haya sido identificado.

Recuerda “LoVe/HAte” en los enlaces.

Cuando especifiques las pseudoclases para los enlaces, siempre recuerda este orden: Link, Visited, Hover, Active. Otro orden no funcionará de forma consistente. Considera el uso de :focus también, y modifica el orden por LVHFA, (o “Lord Vader's Handle Formerly Anakin”, tal y como sugiere Matt Haughey)

Recuerda “TRouBLEd” para los bordes.

La forma corta, (shorthand), de aplicar los estilos para bordes, márgenes y padding tiene un orden específico: en el sentido de las agujas del reloj empezando por arriba, o Arriba, Derecha, Abajo, Izquierda. Por tanto, margin: 0 1px 3px 5px; resulta en que no hay márgen por arriba, 1 píxel de márgen a la derecha, etc.

Especifica unidades para todos los valores que no sean cero.

CSS requiere que especifiques unidades en todas los valores como fuentes, márgenes, tamaños, etc. (con la excepción de line-height, que da la posibilidad de no usarla). Cero es cero siempre, sean píxeles, em, o cualquier otra cosa, no hace falta especificarle la unidad. Ejemplo: padding: 0 2px 0 1em;

Prueba diferentes tamaños de fuente.

Navegadores avanzados, como Mozilla u Opera, permiten redimensionar el tamaño de la fuente, no importa la unidad que uses. Algunos usuarios tendrán el tamaño de fuente del navegador definido más grande o más pequeño que el que tengas tú. Intenta acomodar tu diseño al rango más amplio posible.

Haz que las mayúsculas y las minúsculas concuerden entre tu HTML y tu CSS

Algunos navegadores son sensibles al cambio entre minúsculas y mayúsculas. Usar una clase como homePage está bien, siempre que seas consistente en el uso de la notación especificada. Aplicarle estilos a homepage causará problemas en algunos agentes de usuario estrictos, (como Mozilla).

Prueba embebido; lanza importado.

Si trabajas con estilos embebidos en el código HTML eliminas cualquier potencial posibilidad de errores de cacheo mientras pruebas. Esto es muy importante cuando trabajamos con algunos navegadores de Mac. Pero asegúrate de que cambias los estilos a una hoja externa, importada con @import o colocada con link antes de lanzar la Web

Añade bordes obvios para ayudar a encontrar fallos en la maquetación.

Una regla universal como div {border: solid 1px #f00;} puede ser un camino largo para encontrar errores en la maquetación. Pero colocar un borde específico a un elemento en concreto ayudará a identificar posibles problemas que pueden no resultar obvios de ningún otro modo.

No uses comillas en las rutas de las imágenes.

Cuando uses una imagen de fondo, evita colocar la ruta entre comillas. No son necesarias, y IE5/Mac tiene problemas con ellas.

No enlaces a hojas de estilo vacías colocadas con vistas de futuro, (para estilos de impresión, etc.)

IE5/Mac tiene problemas con las hojas de estilo en blanco, y el tiempo de carga de la página será mayor. En su lugar, coloca al menos una regla, o incluso un comentario, en la hoja de estilos para que este navegador no de problemas.

Además, hay otros elementos que se aplican específicamente al lado funcional de las cosas, pero se deberían tener en cuenta cuando desarrollemos:

Organiza tus archivos CSS

Asegúrate de comentar tus bloques de CSS de manera apropiada, agrupando selectores relacionados, y estableciendo unas reglas a la hora de nombrar las clases y los identificadores, los espacios en blanco y el indentado, (recomendación: usa un espacio simple en lugar de tabulación para evitar problemas multiplataforma), y un orden en las propiedades.

Nombra las clases y los identificadores por su función y no por su aspecto

Si creas una clase .azulgrande, y más tarde te piden que cambies el texto por pequeño y rojo, esa clase deja de tener sentido. En su lugar usa clases descriptivas, como .copyright o .comentario.

Confía en los filtros CSS solo como última opción.

Los hacks y los filtros CSS pueden ayudarte a aplicar, o no aplicar, estilos CSS de forma selectiva a varios elementos. En lugar de usarlos cada vez que encuentres un problema, encuentra la forma de aplicar el mismo efecto de una manera más "cross-browser", (para todos los navegadores). Aquí hay una gran lista de filtros CSS.

Combina selectores.

Mantener tu CSS ligero es muy importante para minimizar el tiempo de descarga; siempre que puedas, trata de agrupar selectores , usar las herencias, y minimizar la redundancia usando métodos cortos, (shorthand).

Ten en cuenta la accesibilidad cuando uses el reemplazamiento por imágenes

La técnica FIR tiene algunos problemas con los lectores de pantalla, y con aquellos que tienen las imágenes desactivadas. Existen alternativas; usa la más adecuada.