Accentsconagua
CSS3
- Preguntas de los medios
- Sombras de texto
- Transformaciones 3D
Share
Este tutorial cubrirá los conceptos básicos de las regiones CSS, que nos permiten fluir contenido dentro de varias secciones de la página. ¿Confuso? Usted probablemente es sigue leyendo!
En el momento de redactar este documento, la especificación de las regiones CSS es un borrador de trabajo y las cosas pueden cambiar! Las técnicas mencionadas en este tutorial podrían 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 estar llegando a un navegador cerca de usted..
Visite caniuse.com para obtener una lista de los navegadores que tienen algún soporte para las regiones CSS. Este tutorial solo usará ejemplos de webkit / sin prefijo de proveedor para simplificar el tema..
Si encuentra que la demostración no está funcionando para usted, puede deberse a que CSS Regions necesita habilitarse, aquí hay instrucciones para Chrome (debería funcionar para Chrome, Chrome Canary y Chromium)
La demostración de las regiones CSS de una manera simple en realidad requiere muy poco código!
Para entrar en el fluir De las cosas, veamos un ejemplo rápido de cómo usar las regiones CSS..
Primero, necesitamos un texto ficticio que se encuentra dentro de la etiqueta de párrafo, a continuación, notará dos divs vacíos, cada uno con una clase de "regiones". Usando las regiones CSS permitiremos que nuestro "texto de ejemplo" fluir en la región divs.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".
.example-text -webkit-flow-into: example-text-flow; relleno: 0; margen: 0; .regions -webkit-flow-from: example-text-flow; borde: 1px negro sólido; relleno: 2px; margen: 5px; ancho: 200px; altura: 50px;
Si intenta ver el código anterior en un navegador Webkit que admite regiones CSS, debería ver algo como:
Todo el estilo (aparte de -webkit-flow-from) que se ha aplicado en la clase de "regiones" solo está ahí para que sea evidente dónde están las regiones, las dos líneas de CSS que realmente nos interesan son:
-webkit-flow-in: example-text-flow; -webkit-flow-from: example-text-flow;
Estos serán discutidos en más detalle a continuación.
fluir hacia Propiedad y flujos nombradosLa propiedad flow-into acepta un identificador como su valor, una vez que aplicamos la propiedad flow-into sobre un elemento y le pasamos un identificador, ese elemento se convierte en parte de un "flujo denominado". Tan pronto como un elemento se convierte en parte de un flujo con nombre, se retira de su flujo habitual, lo que esencialmente significa que el elemento no se representará en la página, por ejemplo:
No estaré renderizado en la página.
.example-text -webkit-flow-into: example-text-flow;
Sin embargo, hay algunas excepciones a esto: si a la propiedad flow-into se le asigna el valor 'ninguno', el elemento no formará parte de un flujo con nombre y, por lo tanto, estará sujeto a la representación habitual en la página. Como habrá adivinado, otro caso en el que se mostrará un elemento que forma parte del flujo con nombre es cuando tiene una región válida asociada..
Se pueden poner múltiples elementos en el mismo flujo nombrado:
# example-1 -webkit-flow-into: my-named-flow; # example-2 -webkit-flow-into: my-named-flow;
Si hay una región asociada para "my-named-flow", se intentará que fluyan los dos elementos (#Ejemplo 1 Y # ejemplo-2) en su correspondiente cadena regional.
No solo se pueden poner bits de texto en un flujo con nombre, ¡también podemos poner imágenes! Tener la capacidad de poner todo tipo de elementos HTML en flujos con nombre es algo poderoso. Por ejemplo, digamos que teníamos dos listas individuales pero desde el punto de vista de la presentación queríamos mostrarlas juntas. Una forma de hacer esto es usar los selectores de CSS para apuntar solo a las partes que necesitamos y ponerlas en un flujo con nombre, ejemplo (extracto de código):
CSS3
- Preguntas de los medios
- Sombras de texto
- Transformaciones 3D
HTML5
- Lona
- Arrastrar y soltar
- Almacenamiento web
/ * Solo pone la lista dentro del artículo en un flujo con nombre * / # css3> ul -webkit-flow-into: buzzwords-flow; # html5> ul -webkit-flow-into: buzzwords-flow; # buzzwords-region -webkit-flow-from: buzzwords-flow; borde: 1px verde sólido;
(Demostración de lo anterior). Si observa el código fuente, notará que nuestras listas de HTML5 y CSS3 se han fusionado en una nueva lista. Tome nota de cómo los encabezados de esas listas no estaban dirigidos a los selectores de CSS y, por lo tanto, no forman parte de ningún flujo con nombre, por lo tanto, aún se representan en la página y no están contenidos dentro de una región.
fluir desde PropiedadLa propiedad flow-from puede tomar un contenedor, por ejemplo, un div vacío y convertirlo en una región. Para que se convierta en una región válida, debe tener un flujo con nombre asociado. Como se discutió, los flujos nombrados se crean usando la propiedad flow-into y luego usando un identificador como su valor.
.región -webkit-flow-from: my-named-flow;
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 más que un contenedor, por ejemplo. no actuará como región.
Al aplicar la propiedad de flujo desde un elemento, no tendrá una altura o anchura, por lo que deberá configurarlos para ver el contenido de la región. Las regiones solo pueden actuar como cadenas de región para un flujo con un solo nombre, por lo que múltiples elementos pueden fluir en un solo flujo con nombre, sin embargo, una región solo puede fluir desde un solo flujo con nombre. Una región mantendrá los estilos de su elemento fuente; esto significa que si el elemento de origen tiene el valor de color rojo, el texto continuará 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 las reglas de @region para un estilo de región específico.
"Un
@regiónLa regla contiene declaraciones de estilo específicas para regiones particulares ".
Esto podría permitir la sintaxis CSS (similar a la de las consultas de medios) como:
/ * Un estilo regular en todas las etiquetas de párrafo * / p font-weight: normal; @region # my-region / * Cuando el texto del elemento p fluye hacia # my-region, use el estilo a continuación * / p font-weight: bold;
Ser capaz de hacer esto permitiría que el estilo específico de la región se aplique en la fuente, actualmente, al configurar por ejemplo "font-weight: bold" en una región no hará que el contenido que se muestra en ella aparezca en negrita; el estilo se debe aplicar en la fuente. elemento fuente.
En el 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 con su identificador y descubrir qué regiones están asociadas con él. Incluso podemos averiguar el estado de una región en particular, puede haber un caso de uso en el que las regiones vacías necesitan un manejo específico, con JavaScript podemos lograr esto.
Se puede acceder a un flujo con nombre en JavaScript utilizando document.getFlowByName ('identificador') (Puede probar esto en la consola de desarrolladores en la demostración).
var flow = document.webkitGetFlowByName ('example-1-text'); 
El objeto devuelto es algo que se llama un WebkitNamedFlow. flow.contentNodes contendrá una matriz de elementos HTML que se utilizan como origen del flujo al que se accede.
La capacidad de detectar qué contenido pertenece a qué regiones pueden resultar útiles en diversas situaciones.
var flow = document.webkitGetFlowByName ('example-4-text'); var main_content = document.querySelector ('# example-4 .main_content'); flow.getRegionsByContentNode (main_content); En el código anterior, primero encontramos nuestro flujo en la página usando el nombre del flujo, luego, utilizando la API de selectores, accedemos a un fragmento de contenido en la página y lo pasamos como un argumento a getRegionsByContentNode (), esto devuelve una lista de elementos que se están utilizando como regiones para esa pieza particular de contenido.
Podemos determinar muy rápidamente el estado de una región con respecto a cómo encaja el contenido en su interior.
// Este no es un selector muy eficiente, vea https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors var region7 = document.querySelector ('# example-4 .regions> div: nth -child (7) '); region7.webkitRegionOverflow // "fit" element.regionOverflow devolverá diferentes valores dependiendo de cómo se maneje el contenido de origen. Hay cuatro valores posibles: 'desbordamiento', 'ajuste', 'vacío' e 'indefinido'
Puede probar esto utilizando herramientas de desarrollador en Chrome, en la página de demostración, haga clic con el botón derecho en uno de los cuadros azules (una región) y seleccione 'Inspeccionar elemento'. Puede encontrar que el elemento fuente está seleccionado en lugar de la región div. Trate de encontrar el div más cercano con la clase de 'regiones' y seleccione uno de los divs secundarios (deberían aparecer vacíos). En este punto, puede presionar la tecla Escape en su teclado, que debería mostrar la consola; Ahora, como un atajo útil, puede ingresar $ 0 en la consola para acceder al elemento seleccionado. Ahora intenta escribir:
$ 0.webkitRegionOverflow // 'desbordamiento', 'ajuste', 'vacío' o 'no definido'
¡Hola! Gracias por leer este tutorial, aquí hay algunos datos adicionales que pueden interesarle..
