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:

Nombre del Archivo: /estilos.css
article, aside, figure, footer, header, hgroup, nav, section { display: block; }

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:

Nombre del Archivo: /index.html
<!--[if lt IE 9]>
   <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:

Nombre del Archivo: /index.html
<head>
   ..........
   <script src="modernizr-1-7.min.js"></script>
   ..........
</head>

Quedo pendiente de explicarte mejor qué es eso de modernizr, oki?

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net