CSS Grid Layout extendido

Unos apuntes o ideas sobre viejas novedades de CSS que quedaron en el olvido y que podrían ser retomadas y hechas realidad dentro del CSS Grid Layout.

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.

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

Comentarios: 2

  1. Hola, interesantes reflexiones pero complicado responder a todo esto por twitter o sea que mejor un comentario de estos. :-)

    El tema de los selectores no sé si sería posible. Lo selectores suelen ser contra elmentos del DOM (el 3º hijo)
    o atributos HTML y tal (checked). El problema que veo es que puede haber ciclos:
    :grid-row-start(1) { grid-row-start: 2; }
    :grid-row-start(2) { grid-row-start: 1; }

    Lo de que Grid Layout pueda ayudar a que algo como Regions vuelva a moverse sí lo veo un poco más factible.
    La principal crítica a Regions era el tema de los divs vacíos (dummy div),
    con Grid al final estás creando cajas desde el CSS por lo que podrías decir que el contenido de un div
    fluyese en las celdas 1,2 - 3,5 y 1,7 de tu grid. Y no necesitarías ni crear los items en sí.
    Aún así habría que ver las implicaciones que tiene a la hora de implementarlo,
    y como luego funcionarían cosas como la selección y demás.
    Había una spec que iba un poco en esa línea: https://drafts.csswg.org/css-page-template/

    Un saludo,
    Rego

    ResponderEliminar
    Respuestas
    1. Gracias Rego por tomarte parte de tu tiempo para pasarte por acá y dejarnos tu opinión al respecto.

      Sí, el problema de la circularidad en CSS que tanto impide :-((

      El principal problema de las Regiones, Template y otras propuestas CSS era ese, la necesidad de marcado (vacío) en el HTML. Superado por el Grid.

      Un saludo.

      (Nota para quien no conozca a Rego: Buscad Manuel Rego + Igalia + CSS Grid Layout en google

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap