El blog del Staff/Stuff de Sync.es aportando nuestras ideas al mundo

Hoja de estilos por defecto

Hace mucho tiempo que no dedicaba el post a algún tema técnico relacionado con mi profesión. Esta semana, por casualidad, me topé con un tema que me ha dado algún que otro dolor de cabeza.

El tema es el siguiente, ¿por qué cuando uno hace una página Web sin ningún tipo de   esta se ve de manera diferente en distintos navegadores?

En un post de hace unos meses, hablé de la importancia de la declaración del DOCTYPE al inicio del código de una página Web con el fin de asegurarnos de que  el código se interprete igual en navegadores diferentes.

Hoy quería hablar de los que traen de fábrica los distintos navegadores y que afectan a las etiquetas de una página Web. Por ejemplo, ¿Por qué una etiqueta h1 a la que no se ha especificado ningún estilo aparece con más margen en Internet Explorer que en ? [Leer más →]

octubre 16, 2010   1 Comentario

Un buen inicio, el DOCTYPE

He estado dándole vueltas toda la semana al tema sobre el que quería escribir en el blog de forma habitual. Por un lado pensaba que lo más correcto sería hablar de programación web, que al fin y al cabo es de lo que más se, pero por otro lado pensaba que podía ser también interesante hablar de algún hobbie o alguna afición. Al final creo que haré ambas cosas, intentaré contar cosas que yo creo que pueden ser interesantes para aquellos que se inician en la programación web y cuando quiera cambiar un poco de tema, os contaré algún detalle de alguna afición que no tenga nada que ver con el mundo de internet.

Para empezar, y en relación con el tema de la programación web, os voy a hablar de la primerísima línea que debería aparecer siempre en cualquier , la declaración del tipo de documento utilizado o más comunmente conocido, el .

El no especificar correctamente un DOCTYPE o simplemente no poner la línea con el DOCTYPE en un documento html, es el causante en la mayoría de los casos del típico problema de que nuestra página web se vea de diferente manera en los diferentes navegadores web. Sobretodo, desde la versión 6 del Internet Explorer, podemos hacer que distintos navegadores interpreten de manera igual el código asociado a nuestra página web mediante la elección de un DOCTYPE apropiado que cumpla con los estándares W3C.

Si no os habéis preocupado nunca del DOCTYPE de vuestra página web o no tiene uno definido, probad a poner esta línea como la primera de vuestra página web, sin dejar ningún espacio en blanco por delante:

<!DOCTYPE HTML PUBLIC “-////DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Es probable que cosas que antes se os “veían bien” de repente se vean de forma diferente (capas flotantes que ocupan menos, saltos de capas a la línea de abajo, etc.). Sin embargo, se estará visualizando tal y como lo has definido en tus hojas de y lo que es más importante, estarás comprobando que no has definido esas hojas de de la manera correcta.

Prueba a modificar los estilos de tu página web para que de nuevo se vea de manera correcta y pruébala en diferentes navegadores.¡ Sorpresa! Ahora se verá correctamente en todos los navegadores y no has tenido que añadir ningún código adicional para cada uno de ellos.

Lo que realmente hemos hecho es que el utilice los standares de CSS del W3C en vez de otros para interpretar el código CSS. De esta manera todos los navegadores utilizarán el mismo standard para interpretar el CSS.

Se podría escribir muchísimo más y poner muchos ejemplos de como interpretan los navegadores las hojas de estilos cuando se ha definido un DOCTYPE correcto o cuando no.

Cuando veáis que vuestra página web se ve de manera muy diferente según el navegador web que estéis utilizando, antes de meter hacks para cada navegador en las hojas de estilos, fijaros en la primera línea de vuestro documento para ver si estáis utilizando un DOCTYPE correcto que cumpla con los standares del W3C

Relacionado: The box model

marzo 5, 2010   8 Comentarios