Introducción a las regiones CSS

Artículo original escrito por Chris Mills y accesible aquí.
Traducción de Nicolas Chevallier, publicada el 24 de febrero de 2014.
Licencia: Esta traducción está disponible bajo una Licencia Creative Commons Licencia Creative Commons

Introducción

CSS3 añade muchas características para ayudarnos a construir, diseños complejos y flexibles de forma más fácil y lógica, sin tener que recurrir a JavaScript y a dolorosos hacks. Una de estas características se describe en el módulo de Regiones CSS de nivel 3 – la idea básica aquí es que usted escribe su contenido dentro de los viejos elementos HTML semánticos, y luego también define un conjunto separado de contenedores (no semánticos) que servirán como la base sobre la cual anclar sus plantillas que definen el diseño, etc. A continuación, usted organiza su contenido en sus contenedores de diseño utilizando las propiedades básicas de las regiones. Esto es perfecto, porque significa que puede mantener su contenido completamente separado de sus preocupaciones de diseño, sin duplicar la semántica o los datos y sin afectar a la accesibilidad. Además, ofrecer alternativas inteligentes con Modernizr es muy sencillo. Vamos a ver cómo se implementa esto!

Las regiones están actualmente en fase de borrador, por lo que podría cambiar un poco antes de su lanzamiento final. En el momento de escribir este artículo, sólo funciona en Chrome Canary, IE10 (de una manera diferente, involucrando IFrame ) y Opera 16, pero siempre vale la pena jugar con estas tecnologías desde el principio, para poder aprenderlas con antelación y proporcionar valiosos consejos a los cotizantes. En Chrome/Opera, necesitas habilitar la opción «características experimentales de WebKit» (escribe about:flags en una nueva pestaña y busca esta opción, o ejecuta el navegador de línea de comandos Terminal con la opción --enable-experimental-webkit-features) para que esto funcione.

Para dar tu opinión sobre Regions, contacta con el grupo de trabajo de CSS a través de su lista de correo.

Ejemplo de regiones

Para mostrar cómo funcionan las regiones, vamos a poner un ejemplo. Puedes probar el ejemplo de regiones en vivo , o ver cómo queda en la figura 1.

ejemplo de regiones CSS mostrando un diseño complejo con contenido fundido en diferentes cajas

Figura 1: Un diseño complejo realizado con regiones CSS.

En efecto, hemos separado completamente nuestro contenido de cualquier tipo de diseño, lo que nos devuelve a la intención original de CSS. El contenido se puede organizar en sus contenedores de diseño, independientemente de su tamaño y posición, y reorganizar el contenido cuando esos contenedores cambian de tamaño. Intente visualizar la página de ejemplo cambiando el tamaño de la ventana del navegador. Cualquier contenido que no quepa en las tres primeras regiones acabará en el cuarto cuadro de la parte inferior, que estoy utilizando como una especie de cuadro de desbordamiento (de lo contrario, el contenido se desbordaría fuera de la tercera zona y bajaría por la pantalla). El contenido se dispone en las regiones en el orden en que aparecen en la fuente original.

Lo primero que hay que observar en el código HTML de mi ejemplo es la estructura de disposición no semántica en la que voy a disponer el contenido. Así que aquí están nuestras regiones:

<div class="layout"> <div class="text-container"><!-- --></div> <div class="text-container"><!-- --></div> <div class="image-container"> <img src="../base-styles/grim-north.jpg" alt="A map of the North of England"> </div> <div class="text-container"><!-- --></div></div><div class="text-overflow"><!-- --></div>

Nota: hemos añadido comentarios vacíos para deshacernos de un error de diseño particularmente extraño, en el que IE6 inserta líneas vacías cuando encuentra <div> s vacíos.

En CSS, podemos crear una plantilla de diseño tan compleja como queramos – ¡puedes ser tan creativo como quieras! Hice esto:

/* positioning and styling for fancy containers */.layout { height: 600px; position: relative;}.text-container, .text-overflow { background: -webkit-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -webkit-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: -moz-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -moz-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: -ms-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -ms-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: repeating-linear-gradient(to bottom, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), linear-gradient(to bottom right, rgba(255,255,255,1), rgba(200,200,200,1)); padding: 2rem; box-shadow: 0.5rem 0.5rem 20px black;}.layout .text-container { position: absolute; width: 25%; height: 300px; z-index: 2;}.layout .image-container { position: absolute;}.layout div:nth-of-type(1) { top: 0; left: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}.layout div:nth-of-type(2) { top: 2rem; left: 30%; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg);}.layout div:nth-of-type(3) { display: block; top: 15rem; left: 50%; border: 1px solid black; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}.layout div:nth-of-type(4) { top: 25rem; left: 67.5%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}.text-overflow { height: auto;}

A continuación, observa que el contenido real de la página está contenido dentro de un conjunto de elementos semánticos, como debe ser:

<article class="content"><h2>Introduction</h2><p>Hello, dear readers…</p></article><article class="content"> …</article>

Creando regiones

Ahora veamos el código para las regiones – ¡es realmente sencillo comparado con lo que mostré arriba! Para definir que un elemento, o una serie de elementos contengan el contenido que quieres pasar en tus regiones, tienes que usar la propiedad flow-into:

.content { -webkit-flow-into: article; -moz-flow-into: article; -ms-flow-into: article; flow-into: article;}

A continuación, especificaré los contenedores en los que disponer el contenido, usando la propiedad flow-from, que toma el mismo id que el mostrado anteriormente.

.text-container { -webkit-flow-from: article; -moz-flow-from: article; -ms-flow-from: article; flow-from: article;}.text-overflow { -webkit-flow-from: article; -moz-flow-from: article; -ms-flow-from: article; flow-from: article; }

Nota: «ítem» puede ser lo que quieras que sea – es un identificador que defines, para un paso intermedio llamado «flujo nombrado» – dispones tu contenido en el flujo nombrado usando flow-into, y el flujo en tus contenedores usando flow-from .

Así de sencillo – ahora verás el contenido dispuesto en los contenedores de diseño.

Nota: El soporte actual de los navegadores aún no es perfecto – puede que encuentres algunas cosas que no funcionen usando regiones. Por ejemplo, no pude conseguir que el multicolor funcionara en una región, a pesar de que se menciona explícitamente en las especificaciones.

Visualización alternativa

Crear alternativas para los navegadores no soportados es bastante fácil en cuanto a las regiones. Puedes detectar el soporte de Regions usando Modernizr (2.6 y posteriores), y luego en los navegadores que no lo soportan, proporcionar algo de estilo para el contenido semántico en sí, no para los contenedores de diseño. Veamos cómo se hizo esto en nuestro ejemplo.

Primero necesitamos crear una versión de Modernizr que maneje la detección de características de Regions. Para ello, tenemos que visitar la página de descarga de Modernizr , hacer clic en «non-core detects» para ampliar la lista de opciones disponibles, y marcar «css-regions», luego hacer clic en «Generate!», y luego en «Download».

Para añadir la detección de regiones a nuestro ejemplo, basta con añadir:

<script src="Modernizr.css-regions.js"></script>

A continuación, puedo añadir algún estilo alternativo para proporcionar un diseño simplificado para los navegadores que no soportan regiones. Lo haré utilizando un selector descendente de .feature-no-regions, ya que Modernizr añade la clase feature-no-regions a la etiqueta <html>, cuando el sitio se renderiza en navegadores que no soportan regiones:

.feature-no-regions .layout, .feature-no-regions .text-overflow { display: none;}.feature-no-regions .content { float: left; width: 48%; padding: 1%;}

Aquí, simplemente oculté los contenedores de diseño usando display: none; , y luego establecí como caja flotante los dos elementos con un ancho y un relleno, para que los navegadores no compatibles muestren algo utilizable que no se vea demasiado horrible (ver Figura 2). Por supuesto, puedes crear algo mucho más interesante.

Un sencillo diseño a dos columnas para los navegadores que no soportan regiones CSS.

Figura 2: Un sencillo diseño a dos columnas, mostrado por los navegadores que no soportan regiones CSS, a través de Modernizr.

Resumen

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *