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!






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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

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

programar

es

https://pseint.es/static/images/programar-jugar-con-consultas-de-contenedores-falsas-con-watch-box-y-resizeasaurus-1457-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences