soy Kseso y esto EsCSS

CSS Grid Layout extendido

CSS Grid Layout extendido

·Por Kseso ✎ 2
El CSS Grid Layout y promesas CSS olvidadas

El desarrollo del módulo CSS Grid Layout, su implementación y soporte por navegadores y la aceptación y uso por los desarrolladores ha sido tan notable que tras estos pocos meses de estar entre nosotros parece que haya cierta sensación de por ahora no necesitamos más.

Quizás sea que debido a su potencial y las promesas que encierra aún estamos en la fase de enamoramiento. Todo de él nos gusta y aún no somos capaces, ni estamos preparados ni deseamos descubrir que no es tan perfecto. Aún nos dura el idilio y nos negamos a admitir carencias o aspectos que ni cubre ni es posible hacer con él.

Y sin embargo haberlos haylos.

Varias son las novedades que creo que podrían añadirse directamente al CSS Grid Layout. Novedades que ya estaban recogidas en otros documentos que parecen haber quedado estancados desde hace ya unos años:

  1. Uso de las áreas del Grid Layout como selectores CSS.
  2. Exclusiones y/o flotados posicionados.
  3. Flujo de contenido (Flow content) entre zonas.

Áreas como selectores CSS

En la actualidad a los contenidos en las distintas áreas del Grid sólo se pueden aplicar estilos por ellos mismos (por los elementos que hay en ella) y no por la zona en la que se ubica en el grid. Ahora mismo no hay forma seleccionar un área en concreto y aplicarle estilos a lo que contenga por el mero hecho de estar en dicho área con independencia del elemento que sea o por tener el elemento una clase determinada (por ejemplo).

Pienso que contar con un selector por área del Grid abriría el campo de juego. Quizás su sintaxis pudiese ser a semejanza del selector por atributo. Algo así:

[grid-area='mi-area'] { } [grid-area='1 / 1 / 2 / 4'] { } [grid-column='1 / 4'] { } [grid-row='1 / 2'] { } [grid-area='header']:nth-of-type(1) { }

O incluso mejor la del tipo pseudoclase ya que se acerca más a lo que son las áreas del Grid Layout:
El concepto pseudoclase se introdujo para permitir la selección en base a información que se encuentra fuera de la estructura del documento (DOM) o que puede ser difícil o imposible de expresar con los otros selectores simples W3c dixit

:grid-area(mi-area) { } :grid-area(1 / 1 / 2 / 4) { } :grid-column(1 / 4) { } :grid-row(1 / 2) { } :grid-area(header):nth-of-type(1) { }

Personalmente si me tuviese que decantar por una, así sin meditarlo mucho, creo que me quedaría con esta segunda ampliando las pseudoclases actuales con el grupo Grid Layout pseudoclass.

Exclusiones y/o flotados posicionados

El documento "CSS Exclusions" define las exclusiones como zonas alrededor de las cuales fluye el contenido (como ocurre con un elemento flotado) sin ser ni "llenado" ni empujado por él (por el contenido).

Para ello ese documento define la propiedad wrap-flow.

También hace ya mucho hubo un documento que abordaba el cómo lograr colocar un elemento en cualquier parte dentro de otro y que el resto fluyera alrededor de él. Se trataba de "CSS Floats and Positioning Level 3" del que hoy sólo he podido encontrar una copia en archive.is

Para ello este documento añadía un nuevo valor a la propiedad `float´ (float: positioned) complementado con las propiedades de ubicación `top, right, bottom, left´.

La diferencia principal entre una "exclusión" y un "float" es que la primera no sale del flujo del documento.

Flujo de contenido entre zonas

El documento CSS Regions define las creación de regiones CSS (a semejanza o equivalencia de las áreas del Grid Layout -salvando las diferencias-) y la posibilidad de que un contenido determinado fluya de una región a otra. Esto es, que ocupada una región dada por una parte del contenido de un elemento el resto pase a mostrarse (paint) en otra región distinta. Regiones que pueden estar o no adyacentes o consecutivas. Entre una y otra puede haber otros elementos y otros contenidos.

Para ello define las propiedades flow-into y flow-from.

grid-area con exclusiones y contenido fluido entre áreas

Creo que ambas novedades, exclusiones y contenido repartido entre zonas, que me da la sensación de estar un tanto parado su desarrollo e implementación, podrían ser abordadas e incluidas como características del CSS Grid Layout.

Porque creo que todo sería (quizás) mucho más sencillo y (seguro) más potente si en un área del Grid Layout (grid-area: content) pudiésemos crear a su vez un grid interno en "content" (grid-template-areas) y poder hacer que una parte de ella quede excluida (no ocupada) por el contenido del elemento que ubiquemos en content.

Claro que para que ello sea posible lo primero sería poder usar las áreas (las creemos como las creemos, con líneas, filas y columnas, nombres...) como selector de CSS para a su vez crear el Grid en un área determinada.

:grid-area(content) { grid-template-areas: "a a c c" "a X X c" "a a c c"; }

O quizás definir las áreas internas a un área en el mismo momento de la creación del Grid Layout, por ejemplo:

.grid { display: grid; grid-template-areas: "................" "content(a a c c, a X X c, a a c c)" "................"; }

También abriría un campo hasta ahora cerrado a CSS en la elaboración de webs el poder fijar tamaños máximos a filas o columnas del Grid y hacer que el contenido de un elemento que no quepa en su área asignada (grid-area), en vez de forzar su crecimiento o esconderlo, fluya a otro área distinta, adyacente o no a la primera.

La diferencia con las exclusiones creadas vía el documento CSS Exclusions Module Level es que no sería necesario crear elementos en el HTML expresamente. Lo haría virtualmente el Grid Layout.

Sin embargo para conseguir elflow content creo que todo sería mucho más sencillo. Sólo es cuestión de desarrollar la idea tras las propiedades flow-into y flow-from para adaptarlas al Grid Layout.

.elemento { grid-area: content; /* lo ubicamos en el área `content´ */ exclusion-area: X; /* excluimos el subarea `b´ de ser llenada por <elemento> */ flow-into: column; /* a semejanza de `flex-direction: row | column | row/column-reverse´ */ flow-to: otro-area; /* en caso de no caber en `content´ el sobrante pasa al área `otro-area´ */ } h1 { grid-area: content(X); }

Nota:: el nombre de las nuevas propiedades y/o valores y su sintaxis sólo a efectos de ejemplificar la idea.

grid exclusión y flow content entre áreas
grid exclusión y flow content entre áreas

Adenda final

Todo lo anterior son solilocos desde e lado de quien juega con CSS y desconoce por completo las implicaciones o dificultades que conllevaría del lado del mecánico del motor de CSS de los navegadores.

Tampoco es mi intención desarrollar al completo la distintas ideas y formular las propiedades/valores a fondo dando respuestas a todas y cada una de las posibilidades. Son sólo a efectos de crear los ejemplos. Tómalas como pseudocódigo CSS.

Lo que si que me gustaría obtener es la opinión desde distintos puntos de vista: creadores de webs profesionales, teóricos de CSS... y especialmente de quienes como Igalia implementan las novedades de CSS en los navegadores.

Opiniones que ni tienen porqué ser ni en este blog ni condescendientes o a favor.

Y si alguien que haya leído esto cree que puede ser interesante someterlo a la opinión del W3c (vía su lista de mail o en Github) completa libertad para que lo haga sin necesidad de mencionar este post.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso