Jugar con consultas de contenedores (falsas) con watch-box y resizeasaurus

Heydon watched-boxes una herramienta fantástica. Es un elemento personalizado que esencialmente realiza consultas de contenedor mediante nombres de clases que se agregan al cuadro en función de los puntos de interrupción de tamaño que se calculan con ResizeObserver. Es como una versión más limpia de lo que Philip hablaba hace unos años.

Estoy seguro de que me encantaría usarlo watched-boxen producción, ya que es liviano, no tiene dependencias y tiene un enfoque sencillo.

Para el desarrollo, tuve la idea de utilizar el pequeño e interesante resize-asauruscomponente web de Zach. Envuelve elementos en otro cuadro cuyo tamaño se puede cambiar mediante CSS y lo etiqueta con el ancho actual. De esa manera, no tendrá que juguetear con toda la ventana del navegador para cambiar el tamaño de las cosas: cualquier elemento determinado se puede cambiar de tamaño. Nuevamente, solo por razones de desarrollo y prueba.

Los envolverías juntos como…

resize-asaurus  watched-box widthBreaks="320px, 600px"    div      ...     /div  /watched-box/resize-asaurus

Lo que le permite escribir CSS en puntos de interrupción como…

.card {   .w-gt-320px  { }   .w-gt-600px  { } }

Seguramente eso no es lo que terminará siendo la sintaxis CSS para consultas de contenedor, pero logra lo mismo con nombres de clases generados claros y comprensibles.

¡Ejemplo!

¡Demo en vivo!