Este es un intento de hacer el proceso de diseño algo más llevadero, y tener una rápida referencia que puedas comprobar cuando te encuentres con un problema.
Sin lugar a dudas te habrás encontrado con cosas raras que no llegastes a comprender mientras estabas maquetando el layout en CSS. Dándote con la cabeza en un muro una y otra vez..Este es un intento de hacer el proceso de diseño algo más llevadero, y tener una rápida referencia que puedas comprobar cuando te encuentres con un problema.
Cuando dudes, valida.
Cuando estás depurando el código, puedes ahorrarte algún dolor de cabeza validando el código primero. Fallos en el CSS o en el XHTML pueden llevar a errores en la visualización.
Construye y testea tu CSS en el navegador más avanzado disponible antes de testearlo en otros, no después.
Si construyes un sitio testándolo en un navegador lleno de bugs, tu código cogerá esos bugs. Cuando pruebes el css en un navegador que respeta los standards, te sentirás frustrado al ver que no muestra correctamente el layout. Asi que, parte de la perfección y ves bajando hacia los navegadores mas pobres. Tu código te lo agradecerá siendo mas standarizado desde el principio y las correcciones serán menos numerosas. Hoy en dia, hacer esto significa empezar con Firefox, Safari u Opera.
Cuando confíes en los floats para el layout, asegúrate que lo hacen correctamente.
Los floats son delicados, y no siempre hacen lo que esperas que hagan. Si te encuentras en una situacion donde un float se extiende pasado el border de su contenedor, o simplemente no se comporta como esperas, asegurate que lo haces corréctamente. Puedes consultar el tutorial de Eric Meyer de todas formas.
Solapamiento de márgenes; aplica padding o border para evitarlo.
Habrás luchado con el espacio en blanco extra donde no quieres que lo haya, o con la ausencia de éste donde quieres que sí lo haya. Si usas margenes probablemente te suceda. Andy Budd lo explica acertadamente.
Trata de evitar aplicar padding/border y un elemento con anchura fija.
IE5 interpreta mal el box modeling, lo que significa varias cosas. Hay opciones sobre esto, pero es mejor evitar el problema aplicando el padding al elemento padre en vez de al hijo que es el que tiene la anchura fija.
Evita importar el contenido de css directamente al html.
Si usas @import para añadir las reglas de un CSS externo a tu html, mas tarde o mas temprano te encontrarás con FOUC. Es decir, habrá un instante en que mientras la pagina se está cargando, esta aparecerá sin formatear, en texto plano. Este efecto puede ser evitado.
No confies en min-width en IE
IE no lo soporta. Pero puedes usar width hasta cierto punto como si fuera un min-width, jugando un poco puedes conseguir el mismo resultado.
Cuando dudes, disminuye la anchura.
A veces errores de redondeo causan que cosas como 50% + 50% den como resultado 100.1%, lo que significa romper el layout en algunos navegadores. Intenta bajar de 50% a 49% o incluso 49.9%
Usuarios que han visto este tema también han visto...
- 70 ideas para crear mejores CSS
- Cómo usar distintos colores en un select menu con CSS?
- CSS para imprimir páginas web
- Cómo cambiar la apariencia de un botón en CSS
- Crear estilos CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.