El Estado Actual de las Element Queries

Las element queries (o "container queries" si lo prefieres) continúan abriéndose paso en las conversaciones entre los desarrolladores de diseño web, pero su inclusión en inclusión en cualquier especificación de momento no está clara. En este artículo hablaremos sobre qué son las element queries y dónde se sitúa el consenso entre los desarrolladores y los grupos que elaboran los estándares.

¿Qué Son las Element Queries?

Las element queries permiten que los elementos “reaccionen” a sus propias limitaciones a pesar de las restricciones del tamaño de pantalla. Este es el detalle más significativo que debemos entender. Las media queries, tal y como las conocemos, están pensadas para diseños 100% responsivos, pero los diseños responsivos no dependen al 100% de las @media queries. Los módulos, lo componentes, los elementos de interfaz siempre se ampliarán o estrecharán con la pantalla, pero nunca reaccionarán por sí mismos, por eso @media es la solución completa a nuestros problemas.

Echa un vistazo a esta tosca demo de element queries que usan eqcss:

 La Primera Línea

Mucha gente que busca soluciones para breakpoints basados en elementos empiezan implementando CSS en el JavaScript por medio de frameworks como React. Mientras que se ha progresado en otras áreas, esto fractura las soluciones que los desarrolladores estaban creando, a partir de soluciones de uso general para CSS o JavaScript, múltiples librerías de frameworks concretos. Aunque los resultados varían, las características clave que estás herramientas logran son con frecuencia muy similares. En el futuro, la estandarización de estas técnicas podría consolidar un enfoque para que este tipo de diseño responsivo sea aplicado a cualquier sitio web, o herramienta.

Durante mis discusiones sobre este tema con Tommy Hodgins (un defensor de las elements queries y creador de eqcss) parece que la gente todavía es consciente tanto de las “elements queries” como del concepto independiente de las “container queries”. Este consenso parece dividirse en varias áreas distintas:

Aquí tienes otro ejemplo distinto en el que puedo cambiar el CSS basándome en la anchura del vídeo. De manera totalmente independiente al tamaño de la ventana de visualización. pic.twitter.com/O6lbDBJvFf

— Wes Bos 🔥 (@wesbos) 6 de octubre, 2017>

6 de october, 2017>

10 de octubre, 2017/a>

Entonces, ¿qué es lo que está en la lista de deseos de los desarrolladores?rs?

Resize Observer (Observador de Redimensionamiento) y estudiar los beneficios de proporcionar a los desarrolladores mejores breakpoints basados en la anchura a partir de los que construir. Esta es la razón fundamental por la que necesitamos usar JavaScript para crear element queries de forma eficiente. Por desgracia Resize Observer no está listo todavía, pero su comunidad de creadores está trabajando duro para hacerlo realidad. Puedes leer la especificación pública si quieres investigar más a fondo.er.
Houdini para crear un modelo funcional y mostrarlo como un perfecto caso de estudio que refleje nuestras necesidades. A día de hoy el CSS Working Group se está centrando, de hecho, en Houdini.ni. CSS Object Model (una colección de APIs que le permite a JavaScript comunicarse y manipular el CSS). La intención de los desarrolladores CSS OM es exponer nuevos y más profundos accesos a las formas en la que el navegador está procesando y pensando respecto al CSS. Estos aspectos permitirán a los desarrolladores escribir de forma más parecida al estilo de los plugins CSS; algo que todavía no hemos sido capaces de lograr. Si CSS Object Model despierta tu interés, te animo a que leas también esta especificación.oo.

Imagina que pudieses escribir un plugin que funcionase más como un parche para el navegador que como un plugin JavaScript. ¿Y si pudieses acceder para inyectar tu propia lógica en la forma en la que un navegador analiza, pinta y renderiza las páginas? ¿Qué podrías “enseñarle” al navegador en lugar de respaldarte en la lógica de la página para hacer los cálculos?te? Actualmente estamos constreñidos por la forma en la que un navegador procesa el CSS, pero con Houdini esperamos poder reordenar y priorizar de manera que seamos capaces de calcular los valores usando enfoques inteligentes, o controlar el renderizado para ocultar fallos. JavaScript y las APIs de CSS Object Model confieren al CSS el mismo tipo de acceso, control y poder que las APIs de JavaScript y el DOM le proporcionan al HTML. Según Tab Atkins, Houdini también usa Typed OM y la lógica de Parser API  y estas son las tecnologías que subyacentes para crear At-Rules personalizadas que te permitan especificar reglas con Element Queries en tu hoja de estilos y gestionarlas mediante JavaScript.pt. Existe un sitio web dedicado en exclusiva a hacer un seguimiento de su progreso, ishoudinireadyyet.com, pero mientras tanto consideremos algunas otras soluciones posibles.ns. Usar iFrames para contener elementos es sin duda el enfoque más inteligente, pero por desgracia todavía no es una solución real al problema; es una alternativa más creativa. Lee más sobre este truco en el blog de Tab Atkins.a>.
Aunque no está declarada en forma de especificación, esta propiedad está pensada para ser útil en páginas que contienen muchos widgets independientes. La documentación indica que puede usarse para prevenir que las reglas CSS de un widget modifiquen otras reglas de la página. Un valor strict para la propiedad sugiere que puede evitar muchos problemas en las queries de contenedores, pero esta no es una solución completa al puzzle.le.
Un gran problema de las queries de los contenedores es que los hijos y su contenido pueden tener afectar su tamaño. Esto puede evitarse en teoría usando CSS de contención, pero veamos el problema actual que causa esta dependencia entre los elementos.ts. Echa un vistazo a la siguiente charla de Dan Tocchini (podrías querer empezar el vídeo desde la marca 10:00 ya que Vimeo no permite sellos del tiempo).s).

¿Por qué no puede un elemento ser responsivo con respecto a su propio tamaño? Dependencias cíclicas. Aquí tienes un gráfico que recrea lo que se explica en el vídeo de arriba para clarificarlo:fy:

Cada bloque es dependendiente de las restricciones impuestas por su bloque contenedor (width en este caso)se):hover tal y como Tommy Hodgins explica en este vídeo.eo.

Does Circularity (Self-Reference) Pose a Problem for Element Queries?

Las dependencias cíclicas ocurren cuando un amplio número de gente que usa el término "container query" se bloquea por lo siguiente:se:

La buena noticia es que los navegadores están empezando a mostrar evidencias de que están trabajando sobre estos problemas como ya comentamos antes con Houdini.ni. < Perspectivas de Futuroook Sucede que existe una especificación CSS para las Element Queries (un sueño) de Tommy Hodgins; y aunque sólo es una especificación soñada, es verdaderamente impresionante la cantidad de palabras y sugerencias surgidas en la conversación. Él también ha compilado un sitio que lista los desarrolladores que están trabajando en container queries, apropiadamente titulado "Quién está trabajando en Container Queries".>”. Después de toda mi búsqueda todavía me pregunto porqué la mayoría de nuestra comunidad no está construyendo de esta forma cuando podemos hacerlo? Hemos tenido la posibilidad de construir de esta forma antes de que el CSS @media fuese soportado en el navegador, pero parece que hemos nos hemos desviado. Hemos pasado de no tener ni idea sobre las mejores prácticas responsivas, a descubrir cómo conseguir distintos resultados usando @media; y esto se ha difundido como el fuego. Los artículos que debaten la maquetación responsiva sin Media Queries" usando modelos de presentación más inteligentes como Flexbox y Grid demuestran que estamos teniendo dificultades al separar la maquetación responsiva de las media queries.es. Consulta esta presentación de Eric Portis (Contain Your Excitement) en el que se discute este mismo punto; con tantos obstáculos, ¿cómo avanzamos la plataforma web como un todo?le? Aquí tienes algunas frases habituales que vas a escuchar sobre element queries:es:

no 👏 👏🏻 te importa 👏🏼 cambiar 👏🏽 a las container queries 👏🏾 javascript 👏🏿tain— Zach LeatHERMAN 🎃⬆⌨ (@zachleat) 6 de octubre, 2017ber 6, 2017

6 de octubre, 2017ber 6, 2017

de octubre, 2017ober 6, 2017 SpecialMuchas gracias a Tommy Hodgins por compartir su tiempo y su valiosos conocimientos en este tema y también por todo su trabajo para mantenerse al día sobre este tema tan sensible para la comunidad.sensitive topic.Working around a lack of element queries en Filament Groupn Filament presto-points en GitHubts on GWhat the Heck are Element Queries & Container Queries? por Tommy Hodginsby Tommy HoGSS: Layout Reimagined en Web Design Weeklyeb Design WElement Queries por Tommy Hodginsby Tommy Hoeqcss on GitHubss on GCSS Element Queries en GitHubes on Gcssplus en GitHubus on GElement Query Demos Collection en CodePenction on CoElement Queries, And How You Can Use Them Today en Smashing Magazinemashing Magazine

houdini