Aproximaciones mínimas a las consultas de contenedores falsificados

Cada vez parece más probable que recibamos consultas de contenedores reales. Google está creando un prototipo de una idea de sintaxis de David Baron y refinada por Miriam Suzanne. Aparentemente, ya se han creado algunos prototipos para una switch()sintaxis que es como consultas de contenedor sobre valores. Incluso ahora, existen cosas como la técnica Raven que puede generar valores similares a consultas de contenedores. Esto se desprenderá con el tiempo.

Si necesita soluciones hoy en día, la mayoría de ellas implican que JavaScript observe lo que sucede (es decir, el ancho del contenedor) y luego le brinde algún tipo de ganchos de estilo (por ejemplo, clases). Aquí hay una revisión rápida del panorama de las “tomas mínimas”:

• Philip Walton muestra cómo cultivarlo en casa con ResizeObserver. Mire el tamaño, aplique clases para diseñar ganchos.
• Heydon Pickering tiene un watched-boxcomponente web que aprovecha ResizeObserver. Mire el tamaño, aplique clases para diseñar ganchos. ( Ver combinación con resizeasaurus.)
• Scott Jehl creó un c-qcomponente web que aprovecha ResizeObserver. Observe el tamaño, aplique atributos de datos para diseñar ganchos.
• Eric Portis creó clases condicionales que aprovechan ResizeObserveruna sintaxis inteligente (y válida) que involucra propiedades personalizadas de CSS que terminan aplicando clases para ganchos de estilo.

También está el EQCSS de Tommy Hodgins, que realiza consultas de contenedores (y otras cosas) buscando en su CSS la sintaxis inventada que hace estas cosas sofisticadas. Realmente no lo llamaría minimalista, y me asusta un poco incluir una sintaxis CSS no válida, pero parece robusta.