Los diseñadores Web podemos hacer algunas cosas muy bien con HTML 4 y CSS 2.1. Podemos estructurar nuestros documentos de manera lógica y crear sitios que ofrecen información sin depender de diseños arcaicos basados en tablas. Podemos estilizar nuestras páginas web con la belleza y detalle sin recurrir a la línea de etiquetas <font> y <br>. De hecho, nuestros métodos de diseño actuales nos han llevado mucho más allá de la época infernal de la guerra de los navegadores.
Por lo que hemos venido usando HTML 4 y CSS 2.1, sin embargo, podemos hacerlo mejor. Podemos refinar la estructura de nuestros documentos y aumentar su precisión semántica. Podemos afinar la presentación de nuestras hojas de estilo y avanzar en su flexibilidad estilística. A medida que continuamos ampliando los límites de las lenguas existentes, HTML 5 y CSS 3 están ganando popularidad rápidamente, dejando al descubierto su poder colectivo con algunas posibilidades de diseño nuevo y emocionante.
Adiós a la sopa de <div>, hola marcado semántico.
En el pasado, los diseñadores lucharon con diseños basados en tablas semánticamente incorrectas. Con el tiempo, gracias al pensamiento revolucionario de la talla de Jeffrey Zeldman y Meyer Eric , diseñadores inteligentes adoptaron métodos de diseño más correcto semánticamente, la estructuración de sus páginas con elementos <div> en lugar de tablas, y el uso de hojas de estilo externas para su presentación. Por desgracia, los diseños complejos requieren una diferenciación significativa de elementos estructurales subyacentes, que suele dar lugar al «síndrome de la sopa de <div>”. Tal vez esto te resulta familiar:
<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1> demostración Sopa de Div.</h1>
<p> Publicado el 05 de Abril 2012</p>
</div>
<div class="content">
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
</div>
<div class"footer">
<p>Etiqueta: HMTL, código, demo </p>
</div>
</div>
<div class="aside">
<div class="hader">
<h1> información tangencial </ h1>
</div>
<div class="content">
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
<p> texto Lorem ipsum, bla, bla, bla. </p>
</div>
<div class="footer">
<p>Etiqueta: HMTL, código, demo </ p>
</div>
</div>
</div>
</div>
Aunque un poco artificial, este ejemplo sirve para ilustrar la redundancia estructural del diseño de diseños complejos con HTML 4 (así como XHTML 1.1 y otros). Afortunadamente, HTML 5 alivia esta “Sopa de <div>” dándonos un nuevo conjunto de elementos estructurales. Estos nuevos elementos de HTML 5 sustituye el sentido <div> con definiciones más precisas semánticamente, y al hacerlo, dar más «naturalidad» al documento con el estilo CSS. Con HTML 5, el ejemplo se desarrolla de la siguiente manera:
<section>
<section>
<article>
<header>
<h1>Demostración de Sopa de Div</h1>
<p>Publicado el 28 de diciembre de 2011</p>
</header>
<section>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
</section>
<footer>
<p>Etiqueta: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Información tangencial</h1>
</header>
<section>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
<p>Lorem ipsum text bla, bla, bla.</p>
</section>
<footer>
<p> Etiqueta: HMTL, code, demo </p>
</footer>
</aside>
</section>
</section>
Como puedes ver, HTML 5 nos permite reemplazar nuestra multitud de <div> con elementos estructurales semánticamente significativos. Esta especificidad semántica no sólo mejora la calidad y el significado subyacente de nuestras páginas web, sino que también nos permite eliminar muchas de los atributos “class” y “id” que se requiere previamente para los objetivos de nuestros CSS. De hecho, CSS3 permite eliminar prácticamente todos los atributos “class” y “id”.
Adiós atributos class, hola marcado limpio.
Cuando se combina con los nuevos elementos semánticos de HTML 5, CSS3 proporciona a los diseñadores web con poderes divinos en sus páginas web. Con la potencia de HTML 5, se obtiene un control mucho más significativo en la estructura de nuestros documentos, y con el poder de CSS3, nuestro control sobre la presentación de nuestros documentos tiende al infinito.
Incluso sin algunos de los selectores CSS avanzados a nuestra disposición, la nueva variedad de elementos específicos de HTML 5 nos permiten aplicar estilos a través de secciones similares, sin la necesidad de definir los atributos “class” y “id”. Al estilo de nuestro ejemplo anterior de sopa de <div>, apuntaría a la multitud de atributos a través de la siguiente CSS:
#news { }
.section { }
.article { }
.header { }
.content { }
.footer {}
.aside {}
Por otro lado, al estilo de nuestro ejemplo HTML 5, pueden dirigirse a las regiones de varios documentos directamente con este CSS:
section { }
article { }
header { }
footer { }
aside { }
Esta es una mejora, pero hay varias cuestiones que deben abordarse. Con el ejemplo de los <div>, nos dirigimos a cada área en particular mediante el uso de los atributos “class” y “id”. Usando esta lógica nos permite aplicar estilos a cada región del documento, ya sea colectiva o individualmente. Por ejemplo, en el caso de las divisiones <div>.section y .content son fáciles de distinguir, sin embargo, en el caso HTML 5, el elemento <section> se utiliza para estas dos áreas y otros. Esto se resuelve fácilmente mediante la adición de los selectores de atributos específicos de los distintos elementos <section>.
Orientación a los elementos HTML5 sin class o id
Para completar el artículo, vamos a ver algunos ejemplos prácticos de la orientación de los elementos HTML5 sin class o id. Hay tres tipos de selectores CSS que nos permitirá dirigir y diferenciar los elementos de nuestro ejemplo. Son los siguientes:
- El descendiente de selección [CSS 2.1]: EF
- El selector adyacente [CSS 2.1]: E + F
- 3. El selector hijo [CSS 2.1]: E> F
Vamos a echar un vistazo a cómo estos selectores nos permiten apuntar a cada una de las secciones de nuestro documento sin necesidad de class o id.
Dirigirse al elemento <section> más externo
Debido a lo incompleto de nuestro ejemplo, vamos a suponer que los elementos <section> ultraperiféricos se encuentran junto a un elemento <nav> que a su vez es un descendiente directo de un elemento <body>. En este caso, pueden dirigirse a las regiones <section> ultraperiféricas de la siguiente manera: body nav+section {}
Dirigirse al próximo elemento <sectioin>
Como el único descendiente directo del exterior <section>, los próximos elementos <section> pueden ser específicamente con el siguiente selector: section>section {}
Dirigirse al elemento <article>
Hay varias maneras de dirigirse al elemento <article> en concreto, pero lo más fácil es usar un selector de descendiente simple: section section article {}
Dirigirse a los elementos <header>, < section> y <footer>
En nuestro ejemplo, cada uno de estos tres elementos existen en dos ubicaciones: una vez dentro del elemento <article> y una vez dentro del elemento <aside>. Esta distinción hace que sea muy fácil dirigirse a cada elemento individual:
https://www.plasticenter.cl/
article header {}
article section {}
article footer {}
…O colectivamente:
section section header {}
section section section {}
section section footer {}
</Capítulo 4>
En el Capítulo 5 veremos los selectores y más. Hasta la próxima entrega.
