Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Adentrándose en las Regiones CSS

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Este tutorial cubrirá los conceptos básicos de las regiones CSS, las cuales nos permitirán fluir contenido dentro de varias secciones de la página. ¿Confundido? Usted probablemente lo está ¡Siga leyendo!



Soprote para Regiones CSS

En el momento de escribir esto, la especificación de Regiones CSS es un borrador de trabajo y ¡las cosas pueden cambiar! Las técnicas mencionadas en este tutorial pueden cambiar en la implementación. El objetivo de este tutorial es proporcionar una comprensión básica de las Regiones CSS y lo que podría llegar a un navegador cerca de usted.

Revise caniuse.com para obtener una lista de navegadores que cuentan con algún tipo de soporte para las Regiones CSS. Este tutorial sólo utilizará ejemplos con prefijo webkit/sin prefijo por motivos de simplicidad.

Si usted encuentra que la demostración no está funcionando para usted, es posible que las Regiones CSS deban ser habilitadas, aquí tiene las instrucciones para Chrome (debería funcionar para Chrome, Chrome Canary y Chromium)

  1. Vaya a chrome: // flags / (or about: flags)
  2. Busque "Habilitar regiones CSS" y habilítela.
  3. Reinicie su navegador y verifique que la demostración esté funcionando.
  4. Screenshot of the Chrome Flags page

Un Ejemplo Sencillo

¡Demostrando las Regiones CSS de una manera sencilla en realidad requiere de muy poco código!

Para entrar en el flujo de cosas vamos a pasar por un rápido ejemplo de cómo utilizar las Regiones CSS.

En primer lugar, necesitamos un texto ficticio que está contenido dentro de la etiqueta de párrafo, debajo de este usted notará dos divs vacíos cada uno con una clase de "regions". Utilizando las Regiones CSS, permitiremos que nuestro "texto-ejemplo" fluya dentro de los divs "regions".

Si intenta ver el código anterior en un navegador Webkit que soporte las Regiones CSS, debería ver algo como:

Basic example of CSS Regions

Todo el estilo (aparte de -webkit-flow-from) que se ha aplicado en la clase "regions" sólo está ahí para hacer evidente dónde están las regiones, las dos líneas de CSS que realmente nos interesan son:

Estas se discutirán con más detalle a continuación


La Propiedad flow-into y los Flujos Designados

La propiedad flow-into acepta un identificador como su valor, una vez que aplicamos la propiedad flow-into a un elemento y le asignamos un identificador, ese elemento pasa a formar parte de un "flujo designado". Tan pronto como un elemento se convierte en parte de un flujo designado se retira de su flujo habitual - esto significa esencialmente que el elemento no se interpretará en la página, por ejemplo:

Sin embargo existen algunas excepciones a esto, si a la propiedad flow-into se da el valor 'none', el elemento no será parte de un flujo designado y así estará sujeto a la representación habitual en la página. Como usted pudo haber adivinado, otro caso en el que un elemento que forma parte del flujo designado se mostrará es cuando tenga una región válida asociada con él.

Múltiples elementos se pueden poner en el mismo flujo designado:

Si hay una región asociada para "my-named-flow", se hará el intento de fluir ambos elementos (#example-1 y #example-2) en su cadena de región correspondiente.

No sólo son simples bits de texto que se pueden poner en un flujo designado, ¡también podemos poner imágenes! Tener la capacidad de poner todo tipo de elementos HTML en flujos designados es una caractrística poderosa. Por ejemplo, digamos que tenemos dos listas individuales, pero desde el punto de vista de la presentación quisiéramos mostrarlas juntas. Una forma de enfocar esto es usar selectores CSS para apuntar solo a las porciones que necesitamos y ponerlas en un flujo designado, ejemplo (extracto de código):

Result of combining two lists using CSS Regions

(Demostración de arriba.) Si usted mira el código fuente, notará que nuestras listas HTML5 y CSS3 se han fusionado en una nueva lista. Note cómo los encabezados de esas listas no fueron apuntados en los selectores CSS y por lo tanto no forman parte de ningún flujo designado, por lo tanto todavía se representan en la página y no están contenidos en una región.


La Propiedad flow-from

La propiedad flow-from es capaz de tomar un contenedor, por ejemplo un div vacío y convertirlo en una región. Para poder convertirse en una región válida debe tener un flujo designado asociado. Como se ha discutido, los flujos designados se crean utilizando la propiedad flow-into y luego utilizando un identificador como su valor.

De forma similar a la propiedad flow-into, podemos asignar el valor de 'none' a la propiedad flow-from, esto hace que el elemento correspondiente no sea nada más que un contenedor, es decir no actuará como una región.

Al aplicar la propiedad flow-from a un elemento, no tendrá una altura o una anchura, por lo que usted necesitará configurarlas para ver el contenido de la región. Las regiones sólo pueden actuar como cadenas de región para un solo flujo designado, por lo que pueden fluir múltiples elementos (flow-into) en un solo flujo designado, mientras que una región sólo puede fluir a partir de un solo flujo nombrado (flow-from). Una región mantendrá los estilos de sus elementos fuente; esto significa que si el elemento fuente tiene el valor de color rojo, el texto seguirá apareciendo en rojo cuando se represente como parte de una región.

La especificación de la Región CSS ha estado considerando el uso de reglas @region para estilos de región específica.

"Una regla @region contiene declaraciones de estilo específicas a regiones particulares."

Esto podría permitir la sintaxis CSS (similar a la de las media queries), tales como:

Ser capaz de hacer esto permitiría que el estilo específico de región se aplique en la fuente, actualmente, la configuración por ejemplo "font-weight: bold" en una región no hará que el contenido mostrado en ella esté en negrita - el estilo debe aplicarse al elemento fuente.


API de JavaScript

Al momento de escribir este artículo, hay cierto soporte en los navegadores basados ​​en Webkit para acceder a la información de la Región CSS a través de JavaScript. Usando JavaScript, podemos seleccionar un flujo de acuerdo a su identificador y averiguar qué regiones están asociadas a él. Incluso podemos identificar el estado de una región en particular, puede haber un caso de uso en donde las regiones vacías necesiten un manejo específico, utilizando JavaScript podemos lograr esto.

Acceso a un flujo por su nombre

Se puede acceder a un flujo designado en JavaScript utilizando document.getFlowByName('identificador') (puede probar estos en la consola de desarrollo en la demostración).

The return object of getFlowByName

El objeto devuelto es algo llamado un WebkitNamedFlow - FlujoDesignadoWebkit. flow.contentNodes contendrá un listado de Elementos HTML que se están utilizando como fuente para el flujo al que se está accediendo.

Descubriendo qué regiones pertenecen a qué nodo de contenido

La capacidad de detectar qué contenido pertenece a qué regiones puede resultar útil en diversas situaciones.

En el código anterior, primero encontramos nuestro flujo en la página usando el nombre de flujo, luego usando la API de Selectors accedemos a un pedazo de contenido en la página y lo pasamos como argumento a getRegionsByContentNode(), esto devuelve una lista de elementos que sae están utilizando como regiones para esa pieza de contenido en particular.

Determinando si una pieza de contenido se ajusta dentro de una región

Podemos determinar muy rápidamente el estado de una región en cuanto a cómo el contenido se ajusta dentro de ella.

element.regionOverflow devolverá diferentes valores dependiendo de cómo se esté manejando el contenido fuente. Existen cuatro valores posibles: 'overflow', 'fit', 'empty' y 'undefined'

  • overflow: El contenido no encaja en la región especificada y se desbordará a la siguiente región si está disponible
  • fit: La región ha aceptado con éxito el contenido y no es necesario desbordamiento.
  • empty: No hay contenido dentro de la región seleccionada y por lo tanto está vacía (como normalmente será el caso con una región cuya región anterior devuelve 'fit' para regionOverflow)
  • undefined: El elemento no es una región válida.

Puede probar esto usando las herramientas de desarrollador en Chrome, en la página de demostración, haga clic derecho sobre uno de los cuadros azules (una región) y seleccione "Inspeccionar Elemento". Puede encontrar que el elemento fuente se encuentra seleccionado en lugar de la región div. Trate de encontrar el div más cercana con la clase de "regions" y seleccione una de los div hijos (que deben aparecer vacíos). En este punto usted puede presionar la tecla de Escape en su teclado que debe abrir la consola; ahora como un práctico atajo puede escribir $0 en la consola para acceder al elemento seleccionado. Ahora intente escribir:

Using the dollar zero shortcut in developer console to access the selected element

Algunas Notas y Opiniones

¡Hola! Gracias por leer este tutorial, aquí hay algunos pedazos adicionales de información en los que puede estar interesado.

  • La implementación de navegador para las Regiones CSS no es precisamente genial en este momento e puede variar cuando mejore la implementación del navegador. Por ejemplo, Internet Explorer sólo permite flow-into cuando se establece en un iframe.
  • Las Regiones CSS pueden permitir a desarrolladores y diseñadores ofrecer una experiencia mejorada en la web, especialmente en dispositivos móviles/tabletas.
  • Modernizr puede detectar soporte para Regiones CSS, es lo que utiliza la demostración.
  • Adobe ha tomado una gran iniciativa en las Regiones CSS.  ¡Asegúrese de revisar sus demostraciones!
  • Chris Coyier de CSS Tricks ha llegado con un uso genial y práctico para las Regiones CSS.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.