Lo admito, cuando la consulta del contenedor se envió por primera vez en 2022, realmente no presté atención. Quiero decir, ¿por qué? Consulta de tamaño de contenedor cuando ya tenemos Consultas de los medios? Por qué Consulta de estilo de contenedor Cuando las propiedades personalizadas se heredan de todos modos (no funcionan con propiedades estándar… Sin embargo)? Sus casos de uso me parecen casos extremos que nos permiten hacer cosas que ya podemos hacer de una manera diferente.
Esta es una demostración de consulta de tamaño de contenedor. Kevin Powell. Tenga en cuenta que las consultas de tamaño se admiten en todos los navegadores principales en las siguientes demostraciones, pero otras demostraciones de este artículo pueden requerir la última versión de Chrome.
Consultas de estilo contenedor (usando el nuevo sintaxis de alcance) presentador, BienI:
Recientemente, hemos visto la aparición de más tipos de consultas de contenedores.
Consulta de estado de desplazamiento del contenedor
Las consultas de estado de desplazamiento de contenedores tienen capacidades únicas: la capacidad de saber si un contenedor es desplazable, si el desplazamiento captura el destino de desplazamiento, o ambas cosas. position: sticky y estaba “atascado”. Literalmente, mientras escribo esto, Chrome anuncia scrolled apoyolo cual es consistente con scrollable.
Nuestra propia demostración de consulta de estado de desplazamiento de contenedores Jeff Graham:
Eso no es todo lo que tenemos…
Consulta de contenedor ancla
La última funcionalidad de consulta de contenedor es Consulta de contenedor anclaque nos permite consultar la ubicación alternativa. Imagine que ancla el cuadro de información sobre herramientas en el lado izquierdo de la información sobre herramientas, pero no hay espacio para la información sobre herramientas, por lo que la gira hacia el otro lado de lo que sea que la active. position-try-fallbacks: flip-inline. Bueno, la consulta del contenedor anclado puede detectar cuándo cambia la posición de la información sobre herramientas, de modo que también podemos voltear el cursor de información sobre herramientas al otro lado de la información sobre herramientas.
¿Qué otra cosa?
Entonces esto me hizo pensar, ¿Hasta dónde pueden llegar las consultas de contenedores? Ha habido decenas de consultas de los medios.Entonces, ¿qué pasa si hay docenas de consultas de contenedores? ¿Qué podemos hacer con ellos?
Obtener cualquier valor calculado
He estado explorando recientemente Formas actuales y futuras de obtener el valor de una propiedad CSS y usarlo con otra propiedadcomo puedes imaginar, las consultas sobre el tamaño del contenedor se han mencionado desde el desbloqueo. Unidad de consulta de contenedores. Quiero decir, ¿alguna vez agregó un elemento contenedor o definió un elemento existente como contenedor solo para acceder a la unidad de consulta del contenedor?
<parent> {
/* Gimme container query units! */
container-type: inline-size;
<child> {
width: 100cqi;
}
}Ahora bien, no me gustan las consultas de contenedor como forma de obtener valores porque la sintaxis puede ser un poco detallada (más larga que el ejemplo anterior, y especialmente las consultas de tamaño son un poco raras), pero el hecho de que podamos hacer mucho más con ellas que solo consultas es un testimonio de su versatilidad como característica. Como alternativa, Recomiendo usar funciones CSS. llamado compute()si quieres height Algo (o “algo” de cualquier cosa), lo podemos robar de otro elemento así:
<parent> {
<child> {
/* Computed height of <child> */
property: compute(height, self);
/* Computed height of the parent */
property: compute(height, inherit);
/* Computed height of #abc element */
property: compute(height, #abc);
}
}Esto nos evitará tener que implementar una consulta de tamaño de contenedor solo para usar su unidad de consulta de contenedor y también funcionará para todas las propiedades. Además, la consulta del tamaño del contenedor no nos ayuda a obtener el valor declarado no calculado de la entrada real. Para tal fin, inherit() Se han propuesto funciones y Roma incluso nos mostró cómo usarlo. En Chrome Canario.
Además, me gusta mucho el enfoque de palabras clave y me gustaría ver más palabras clave, p. currentColor (Por ejemplo, currentBackgroundColor ha sido propuesto).
Sin embargo, si se pudiera ampliar la consulta del contenedor para obtener los siguientes valores cualquier Propiedades CSS, ¡no diré que no! La flexibilidad de pasar propiedades/valores entre elementos es demasiado tentadora.
Consultar cualquier propiedad CSS
De hecho, esta característica ha estado en la agenda desde que se propusieron por primera vez las consultas estilo contenedor, pero no está claro cuándo llegaría. Esta actualización de consulta de estilo contenedor nos permitirá consultar el valor (no calculado/declarado) de cualquier propiedad CSS, no solo propiedades personalizadas (aunque no se pueden “obtener” y usar esos valores, al menos hasta donde yo sé).
cualquier ¿Propiedades CSS? ¿Eso no hace que todas las demás consultas de contenedores sean redundantes? No exactamente, no.
Las consultas de estado de desplazamiento del contenedor detectan roturas y rigidez, no hay pseudoclases para ellas, pero ¿tal vez debería haberlas? También detectan la capacidad de desplazamiento porque, por ejemplo, overflow: scroll y overflow: visible No significa que el contenido realmente se desborde, solo que podemos desplazar el contenedor si lo hace. Finalmente, las consultas de contenedores anclados no consultarán position-try-fallbacks valor, detectan cuando,Por ejemplo, position-area fue volteado.
Entonces, ya sabes, hacen muchas cosas, por lo que la actualización a consultas de estilo contenedor no las reemplazará. De hecho, definitivamente puedo ver docenas de nuevas capacidades de consulta de contenedores que aparecerán en la web en los próximos años.
Entonces, ¿qué más pueden hacer las consultas de contenedores?
Surgieron algunas ideas geniales antes de que aparecieran las consultas sobre contenedores. Por supuesto, algunas de ellas en realidad se convierten en consultas de contenedor, mientras que otras siguen siendo solo eso: la gran idea no ha desaparecido (nuevamente…¿Sin embargo?).
Estoy seguro de que veremos estas ideas implementadas en algún momento, ya sea como consultas de contenedor u otra sintaxis. Diablos, como ya estamos en diciembre, aquí está mi predicción para 2026: las consultas de contenedores dominarán el 2026.
¿Qué más se puede hacer? tú ¿Qué desea que hagan las consultas de contenedores?
