soy Kseso y esto EsCSS

Element Queries y el porqué de la eterna espera

Qué son las nonatas element queries de Css y el porqué de que no existan (aún).

Element Queries y el porqué de la eterna espera

·Por Kseso ✎ 3
Element Queries y el porqué de la eterna espera

Por si el término Element Queries en el ámbito de Css te resulta extraño (cosa extraña a estas alturas) lo primero sería dejarlo claro, ¿no?.

La idea es simple y semejante a las medias queries de Css. Como éstas, se trata de poder aplicar unas declaraciones u otras a un elemento en función del valor que tenga cierta propiedad del propio elemento (o su ancestro) en vez del viewport o pantalla como pasa con las @media queries.

Dicho de otro modo, las element quieries son 'medias queries' pero acotadas al ámbito de un elemento por el valor del propio elemento.

.elemento:min-width(450px) > .hijo { /* Tu css muuuuu chulo */ }

Sencillo, eficiente y con una potencialidad tremenda.

Para ayudar a comprenderlo mejor. Imagina que creas un "módulo" o "componente cualquiera para mostrar cierta información. A la hora de estilizalo, tú como autor, no sabes los detalles, especialmetne el tamaño o anchura, donde se mostrará tu creación.

Y seguro que estarías encantado de poder diseñarlo para que fuese igual de molón mostrándolo en un elemento estrecho (como un sidebar) o con anchura generosa.

Hoy por hoy prever y cubrir las posibles variaciones es tedioso, trabajo e inútil intentarlo hacer en base a las @medias queries. Y ni con los llamados "mixin" de cualquier preprocesador tienes el éxito garantizado.

Circularidad: el pecado original del Element Query

Todo el mundo las busca y todo el mundo las espera y sin embargo las element quieries no llegan. La causa es de la circularity o dependencia circular.

Tab Atkins Jr explica y ejemplifica este peligro de forma clara. Imagina el siguiente código:

.container { float: left; } .child { width: 500px; } .container:min-width(450px) > .child { width: 400px; }

La anchura del elemento container depende de su contenido al estar flotado. De entrada su hijo es 500px de ancho. Pero la regla con la 'element query' indica que si el padre tiene una anchura de 450px o más su hijo deviene a 400px.

¿Ves la dependencia circular o el bucle?. ¿No? Pues sigue el proceso anterior. El hijo, por la 'element query' ahora tiene 400px, esto hace que ya no aplique la "EQ" y vuelve a medir sus 500px iniciales (y su padre también) por lo que la "EQ" vuelve a aplicarse y de nuevo... vuelta a empezar y así hasta el infinito y más allá.

Y ahí está la propuesta de las element quieries esperando a que se resuelva y puedan evitarse de forma satisfactoria los bucles o referencias circulares.

Lecturas

Si conoces este blog seguro que habrás echando de menos algún enlace a algún documento del consorcio que recoja y exponga las element quieries.

La razón de su ausencia: las element quieries no existen. La idea de las EQ´s fue expuesta por Tab Atkins Jr hace cosa de 1 año. Y como él mismo reconoció hace nada, nada ha cambiado desde entonces.

Este artículo de filamentgroup.com ayudará a comprender mejor la potencialidad de las EQ´s.

Así que este aspecto sólo es posible, hoy por hoy, abordarlo con otros lenguajes como javascript. Hay varias soluciones al respecto. Y si estás interesado en hallar alguna de ellas sólo tienes que preguntar a google. Por ejemplo: elementqueries.com una realización css a través de js

avatar del Editor del blog

the obCSServer ᛯ 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 Kseso