Colocar elementos a nivel de bloque.
En la página Opciones CSS de secciones anteriores, vimos que los elementos se comportaban de un modo distinto si se tomaban a nivel de línea que si se tomaban a nivel de bloque. Un elemento de línea era el que podía colocarse a continuación de otro, como cualquiera de estas palabras, mientras un elemento de bloque era el que formaba eso, un bloque, por sí mismo, como es el caso de por ejemplo este mismo párrafo. Te acuerdas?
Si recuerdas, en el curso de Html5 te presenté unas cuantas etiquetas nuevas, a las que nombré como Etiquetas Semánticas. Precisamente por ser nuevas, es normal que viejos navegadores (y alguno moderno, pero odioso.....) desconozcan si son de un tipo u otro (a nivel de línea o de bloque).
Por este motivo, una de las primeras cosas que vamos a hacer al trabajar con estilos CSS3 y con esas etiquetas nuevas que nos ofrece Html5, será poner en la hoja de estilo de qué tipo son, oki?
Las etiquetas siguientes son de tipo bloque por tanto añadiremos la línea que aparece a continuación en nuestra nueva Hoja de Estilos, aquella que acabamos de crear y llamar estilos.css:
Con esa línea en tu hoja de estilo, ya cualquier navegador sabrá que todos esos nuevos elementos, son a nivel de bloque y eso es más que suficiente salvo..... que uses Internet Explorer 9 y anteriores... Pero no te preocupes que existen dos modos de evitar que hasta ésas malignas versiones lean tu web sin problemas, a saber...
Añadir HTML5 Shiv
Es un simple script de Javascript que hace que esos nuevos elementos de Html5 aparezcan correctamente en versiones antiguas de Internet Explorer. Nos basta con añadir, en todas las cabeceras (ya sabes, entre <head> y </head>) de todas nuestras páginas web, esta línea:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[endif]>
Usar Modernizr o similar
El Script que te he comentado arriba está ya incluido en herramientas más completas, como modernizr o similares, de modo que si usas modernizr no es necesario aplicar la línea anterior. Es más, quizás sea más interesante olvidarla y aplicar, por ejemplo, modernizr. Hagámos pues un acto de fé y, en lugar de la anterior apliquemos esta otra:
..........
<script src="modernizr-1-7.min.js"></script>
..........
</head>
Quedo pendiente de explicarte mejor qué es eso de modernizr, oki?
:
