Construir diseños complejos y flexibles nunca ha sido fácil, pero CSS3 ciertamente ha eliminado muchos de los dolores de cabeza.
Funciones de CSS3 como Flexbox y Columnas han hecho que algunos diseños complejos sean una posibilidad real y ahora se les une una de las últimas incorporaciones a la caja de herramientas del diseñador web: las regiones CSS.
Las regiones CSS le permiten enviar contenido a una serie de contenedores en una sola página. Es el equivalente a vincular cuadros de texto en una aplicación como InDesign. Hace posible algunos diseños que anteriormente solo eran posibles al difuminar la línea entre datos y estilos.
Como siempre, el soporte del navegador está lejos de ser perfecto.
CSS Regions sigue siendo un borrador, lo que significa que es experimental. Inicialmente, el único navegador que realmente lo soportaba era Internet Explorer 10 (no, no estoy bromeando); aunque IE10 usa un iframe como fuente de contenido.
Safari afirma ofrecer soporte con un prefijo.
En Chrome puede probar la característica abriendo su navegador, escribiendo 'about: flags' y activando 'enable-experimental-webkit-features', luego reiniciando su navegador.
Felizmente también hay un Polyfill de JavaScript creado por Adobe que brinda la funcionalidad de las regiones CSS a los navegadores que actualmente no lo admiten, puede encontrarlo en github.
Dado que el propósito de CSS Regions es permitir que nuestro texto fluya a través de diferentes contenedores, lo primero que necesita es texto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.Y luego algunos contenedores:
Ahora que tenemos configurado el contenido básico, podemos vincular los contenedores usando flow-into y flow-from, notarás en el ejemplo que he agregado el prefijo -webkit- .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Si marcas esto en un navegador, verás que el texto fluirá de un cuadro a otro. Si ahora coloca esos contenedores, el texto continuará fluyendo correctamente.
-webkit-flow-into: text-flow;Esta propiedad acepta un identificador como el valor. Cuando pasa un valor a esta propiedad, se convierte en parte de un flujo con nombre y se detendrá la representación como parte del flujo de la página. Puede cancelar eso estableciendo la propiedad en none.
El nombre del flujo que usas es arbitrario, solo asegúrate de ser consistente. También podemos tener múltiples elementos con el mismo flujo nombrado como en nuestro ejemplo anterior.
Esto no se limita al texto, también podemos transmitir imágenes, listas y muchos otros tipos de contenido HTML.
-webkit-flow-from: text-flow;Usamos esta propiedad para especificar qué elemento (s) debe recibir el flujo especificado.
El valor es el nombre del flujo que especificamos para la propiedad flow-into .
Tenga en cuenta que cualquier estilo de contenido que aplique al texto original se mantendrá a lo largo del flujo. Entonces, si coloreas el texto en azul, permanecerá azul en todos los contenedores.
Para ver un ejemplo de las regiones CSS en acción, eche un vistazo a este bolígrafo Yo creé.
El soporte del navegador para las regiones CSS es actualmente débil, y hay un largo camino por recorrer antes de que podamos contar con él diariamente. Pero, la flexibilidad que ofrece es fantástica, y una vez que el soporte completo esté en su lugar, creo que las regiones CSS serán la técnica a seguir en los años venideros.
¿Estás emocionado por las regiones CSS? ¿Qué tan pronto crees que podremos usarlos? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de la cascada vía cuatrok77.