Las consultas de contenedor resolverán este problema de larga data en el diseño web, donde queremos tomar decisiones de diseño en función del tamaño de un elemento (el contenedor) en lugar del tamaño de toda la página. Entonces, si un contenedor tiene 600px de ancho, tal vez tenga un diseño en forma de fila, pero más estrecho que eso tiene un diseño en forma de columna, y tendremos ese tipo de control. Eso es muy diferente a la transición entre diseños según el tamaño de la pantalla.
Ya podemos dimensionar algunas cosas en función del tamaño de un elemento, gracias a la % unidad. Por ejemplo, todos estos contenedores son un 50% más anchos que su contenedor principal.
El % aquí es 1 a 1 con la propiedad en uso, por lo que width es un % de width. Del mismo modo, podría usar % por font-size, pero será un % del contenedor principal font-size. No hay nada que me permita cruzar propiedades y establecer el font-size como% de un contenedor width.
Es decir, a menos que consigamos unidades de contenedores! Aquí está la tabla de unidades según la especificación preliminar:
| unidad | relativo a |
|---|---|
qw |
1% del ancho de un contenedor de consulta |
qh |
1% de la altura de un contenedor de consultas |
qi |
1% del tamaño en línea de un contenedor de consultas |
qb |
1% del tamaño de bloque de un contenedor de consultas |
qmin |
El menor valor de qi o qb |
qmax |
El mayor valor de qi o qb |
Con estos, pude configurar fcilmente el font-size a un porcentaje del contenedor principal width. O line-height! O gap! O margin! O whatever!
Miriam señala que podemos jugar con estas unidades ahora mismo en Chrome Canary, siempre que la bandera de consultas de contenedores esté activada.
🥳 oh, and also Chrome Canary (with the container query flag) now has support for Query Units:https://t.co/GkIbLFW5C6
Not sure when it happened – so far I've only tested qi, because that's the most useful.
If I may quote @chriscoyier… "CSS comes at you fast"
— @[email protected] (@TerribleMia) September 9, 2021
Yo también tuve una jugada rápida. Solo pondré un video aquí, ya que será más fácil de ver en estos primeros días.
Y un gran trabajo exploratorio de Scott aquí también:
¡Desarrollé una demostración usando las nuevas unidades de contenedor y es algo realmente poderoso! Solo dos declaraciones de tamaño de fuente y <100 líneas de CSS en esta demostración y tiene mucha flexibilidad. + Gracias @TerribleMia para el codazo! https://t.co/5cs8JE75nW
– Scott Kellum (@ScottKellum) 10 de septiembre de 2021
¡Ahmad Shadeed también está en todo esto!
Las unidades de consulta pueden ahorrarnos esfuerzo y tiempo cuando se trata de cosas como font-size, padding, y margin dentro de un componente. En lugar de aumentar manualmente el tamaño de la fuente, podemos utilizar unidades de consulta.
Ahmad Shadeed, “Unidades de consulta de contenedor CSS”
Tal vez las consultas de contenedores y las unidades de contenedores desaparezcan de verdad al mismo tiempo. 🤷