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 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.
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.
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.
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.
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.
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.
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.
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%
Probablemente este sufriendo el Peekaboo bug, especialmente si no aparece nada cuando pasas el raton por encima de un link. Visita Position is Everything para corregirlo.
Si usas un ancla en tu codigo () ten en cuenta que tambien le afecta los :hover y :active. Para evitar esto, necesitarás usar id para las anclas o aplicar estilos con una sintaxis un poco mas reservada :link:hover, ,:link:active
Especialmente útil si se trata de un CSS que no has creado tu. Comenta media parte del CSS y si el problema continua, entonces comenta la otra mitad. Sigue este método hasta llegar a una parte pequeña de código dnd el problema sea facilmente identificable.
Cuano especifiques las pseudoclases, hazlo en este orden: Link, Visited, Hover, Active. Cualquier otro orden no tendra consistencia. Puedes usar :focus también, y modificar el orden a LVHFA ( o “Lord Vader’s Handle Formerly Anakin” :D , como propuso Matt Haughey)
Los atajos para definir bordes, margenes y paddings tiene un orden específico. Siguiendo el movimiento de las aujas de un reloj, empezando desde arriba, Top, Right, Bottom, Left. Por tanto margin: 0 1px 3px 5px, resulta sin margen superior, 1px para del dercho, y asi sucesivamente.
Css requiere que especifiques las unidades de tus cantidades para fuentes, margenes y tamaños. (La única excepción es line-height, que no requiere unidad) El comportamiento de cualquier navegador cuando no se han especificado las unidades puede ser impredecible. Cero es cero y no necesita unidades, por ejemplo: padding: 0 2px 0 1em.
Navegadores avanzados como Mozilla o Opera, permiten escalar el texto de tu web, sin importar el tamaño que hayas usado. Algunos usuarios tiene una fuente mas grande o mas pequeña que la que has puesto tu, intenta probar un rango amplio de tamaños para ver el comportamiento del layout.
Algunos navegadores son case-sensitive. Usando una clase como “homePage” no hay ningun problema. Aplicar estilos a “homepage” puede causar problemas en navegadores estrictos como Mozilla.
Por ejemplo, usando una regla como div {border: solid 1px #F00} podras observar el principio y fin de la capa, para detectar espacios en blanco, solapamientos, etc. Efectos que de otra menera no resultarian tan obvios. También puedes usar colores de fondos.
Cuando coloques una imagen de fondo, y le indiques la ruta donde se ubica el archivo, resiste el impulso de poner comillas, no son necesarias y IE5/Mac te lo agradecerá sin estrangularse.
El IE5 de Mac sufre con ello y relantizará la carga de la página. Puedes comentar la linea mejor.
Y a continuación algunas recomendaciones a la hora de desarrollar:
Asegurate de crear bloques de información mediante lineas de comentario por ejemplo.
Si creas una clase .azulypequeño, y más tarde quieres que el texto sea grande y rojo, la clase pierde todo el sentio. Mejor usa nombres mas descriptivos como, .copyright y .comentarios
Manener tu CSS ligero es importante para minimizar los tiempos de carga, tanto como sea posible, agrupa selectores, usa la herencia, y reduce la redundancia con atajos.
Usar fondos de imagenes para reemplazar texto tiene problemas por todos conocidos en algunos dispositivos, o en lugares donde está desactivada la opción de mostrar imágenes. Existen varias alternativas.
Usuarios que han visto este tema también han visto...
- Algunos consejos que te ayudarán en CSS
- Puertas deslizantes con CSS
- Posicionar una imagen rodeada de texto con CSS
- Bisel exterior con CSS
- Decorar un campo select de formulario con 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.