Laboratorio de consultas de contenedores de iShadeed

Ahmad Shadeed se adelantó a las consultas sobre contenedores y tiene una creciente colección de ejemplos basado en patrones cotidianos.

Y, si te lo perdiste, su última publicación sobre consultas de contenedores hace un trabajo maravilloso cubriendo cómo funcionan desde que aterrizaron en Chrome 105 este mes (los veremos en Safari 16 pronto). Algunas opciones destacadas y conclusiones:

• Los contenedores se definen con el container-type propiedad. Las demostraciones y propuestas anteriores habían estado usando contain preferiblemente.
• Las consultas de contenedores son muy parecidas a las consultas de medios que hemos estado escribiendo todo el tiempo para apuntar al tamaño de la ventana gráfica. Entonces, en lugar de algo como @media (min-width: 600px) {}, Tenemos @container (min-width: 600px) {}. Eso debería hacer que la conversión de muchas de esas consultas de medios en consultas de contenedores sea bastante sencilla, sin el trabajo de averiguar los nuevos valores de punto de interrupción.
• Podemos nombrar contenedores para ayudar a distinguirlos en nuestro código (p. ej. container-name: blockquote).

¡Buen trabajo, Ahmed! ¡Y gracias por compartir!

Enlace directo →