¿Podemos crear un “truco de cambio de tamaño” con consultas de contenedor?

Si sigue los nuevos desarrollos en CSS, probablemente haya oído hablar de la inminente llegada de consultas de contenedores . Vamos a ver los conceptos básicos aquí, pero si deseas echar otro vistazo, consulta el artículo “CSS de próxima generación: @container” de Una . Después de que echemos un vistazo a los conceptos básicos, vamos a crear algo súper divertido con ellos: una nueva versión clásica del meme CSS en el que aparece Peter Griffin lidiando con las persianas.

Entonces, ¿qué es una consulta de contenedor? Es…exactamente eso. Al igual que tenemos consultas de medios para consultar cosas como el tamaño de la ventana gráfica, una consulta de contenedor nos permite consultar el tamaño de un contenedor. En base a eso, podemos aplicar diferentes estilos a los hijos de dicho contenedor.

¿Cómo se ve? Es algo como esto:

.container {  container-name: my-container;  container-type: inline-size;  /* or */  container: my-container inline-size;}@container my-container (min-width: 768px) {  .child { background: hotpink; }}

La my-containerpalabra clave apunta al contenedor para la consulta del contenedor por container-name. inline-sizepermite a los usuarios ser más específicos sobre la contención. Actualmente, esto significa que solo podemos consultar el archivo width. Con size, podemos consultarlo height.

Puede utilizar consultas de contenedor (sin polyfill) a partir de la versión 105 de Chrome y Safari 16. Definitivamente recomendaría leer rápidamente los borradores en csswg.org.

La forma más sencilla de empezar a jugar sería crear un par de demostraciones rápidas que incluyan un elemento contenedor de tamaño variable.

Intente cambiar los containervalores y vea cómo responden las demostraciones. Estas demostraciones utilizan container-type: sizealgo que no restringe el eje. Cuando tanto el heightcomo widthde los contenedores alcanzan ciertos umbrales, el tamaño de la camiseta se ajusta en la primera demostración. La segunda demostración muestra cómo los ejes pueden funcionar individualmente, donde la barba cambia de color, pero sólo al ajustar el eje horizontal.

@container (min-width: 400px) and (min-height: 400px) {  .t-shirt__container {    --size: "L";    --scale: 2;  }}

Eso es lo que necesita saber sobre las consultas de contenedores por ahora. En realidad, son solo unas pocas líneas nuevas de CSS.

Lo único es que la mayoría de las demostraciones para consultas de contenedores que he visto hasta ahora utilizan un ejemplo de “tarjeta” bastante estándar para demostrar el concepto. No me malinterpretes, porque las tarjetas son un excelente caso de uso para consultas de contenedores. Un componente de tarjeta es prácticamente el ejemplo de las consultas de contenedores. Considere un diseño de tarjeta genérica y cómo podría verse afectado cuando se usa en diferentes diseños. Este es un problema común. Muchos de nosotros hemos trabajado en proyectos en los que terminamos haciendo varias variaciones de tarjetas, todas adaptadas a los diferentes diseños que las utilizan.

Pero las cartas no inspiran mucho a empezar a jugar con consultas de contenedores. Quiero verlos llevados a límites mayores para hacer cosas interesantes. Jugué un poco con ellos en esa demostración de tallas de camisetas. E iba a esperar hasta que hubiera una mejor compatibilidad con el navegador hasta que comenzara a profundizar más (actualmente soy un usuario de Brave). ¡Pero luego Bramus compartió que había un polyfill de consulta de contenedor!

Un saludo a @bramus por compartir el polyfill de consultas de contenedores de @jon_neal el otro día ¡

¡Esto me impulsó a “piratear”! https://t.co/Em5TLyslip

– Jhey (Explorando oportunidades ✨) (@jh3yy) 30 de abril de 2021

Y esto me hizo pensar en formas de “piratear” las consultas de contenedores.

⚠️ Alerta de spoiler: mi truco no funcionó. Lo hizo momentáneamente, o al menos eso pensé. Pero esto fue en realidad una bendición porque generó más conversaciones sobre consultas de contenedores. Y ahora hay un nuevo contenedor de consultas polyfill.

¿Cuál fue mi idea? Quería crear algo así como el “Checkbox Hack”, pero para consultas de contenedores.

div  div/div  div/div/div

La idea es que podría tener un contenedor con un elemento de tamaño variable dentro y luego otro elemento que tenga una posición fija fuera del contenedor. Cambiar el tamaño de los contenedores podría desencadenar consultas de contenedores y cambiar el estilo de los elementos fijos.

.container {  container: layout size;}.container__resize {  resize: vertical;  overflow: hidden;  width: 200px;  min-height: 100px;  max-height: 500px;}.container__fixed-content {  position: fixed;  left: 200%;  top: 0;  background: red;}@container(min-height: 300px) {  .container__fixed-content {    background: blue;  }}

Esto funcionó con esas versiones anteriores de cqfillpolyfill.

¿Podemos desacreditar un meme CSS clásico con consultas de contenedor?

Ver este trabajo me emocionó muchísimo. ¡Finalmente, una oportunidad para crear una versión del meme CSS de Peter Griffin con CSS y desacreditarlo!

Probablemente hayas visto el meme. Es un golpe a la Cascada y lo difícil que es gestionarla. Creé la demostración usando cqfill@0.5.0… con mis propios pequeños toques, por supuesto.

Persianas de Peter en CSS 3D. ¡Los repararé! ¿A qué se debió todo este alboroto? Esta demostración no utiliza JavaScript. ¿Cómo es interactivo entonces? Estoy “pirateando” las consultas del nuevo contenedor para que esas persianas funcionen. ¿Puedes ver cómo? codepen.io/jh3y/pen/LYxKjKX vía @CodePen

– Jhey Tompkins (@jh3yy) 30 de abril de 2021

Al mover el asa del cordón, se cambió el tamaño de un elemento que a su vez afectó el tamaño del contenedor. Diferentes puntos de interrupción del contenedor actualizarían una variable CSS, --opende 0a 1, donde 1es igual a un estado “abierto” y 0es igual a un estado “cerrado”.

@container (min-height: 54px) {  .blinds__blinds {    --open: 0.1;  }}@media --css-container and (min-height: 54px) {  .blinds__blinds {    --open: 0.1;  }}@container (min-height: 58px) {  .blinds__blinds {    --open: 0.2;  }}@media --css-container and (min-height: 58px) {  .blinds__blinds {    --open: 0.2;  }}@container (min-height: 62px) {  .blinds__blinds {    --open: 0.3;  }}@media --css-container and (min-height: 62px) {  .blinds__blinds {    --open: 0.3;  }}

Pero…. Como mencioné, este truco no es posible.

Hmmm, contener tamaño en línea no debería permitir consultas de bloque (altura). Probablemente estés pirateando un error en js polyfill.

Me encanta la idea, pero no creo que este enfoque funcione con consultas de contenedor en CSS.

– Miriam (pero terrible) (@TerribleMia) 1 de mayo de 2021

Lo bueno aquí es que generó una conversación sobre cómo funcionan las consultas de contenedores. También resaltó un error con la consulta del contenedor polyfill que se solucionó. Sin embargo, me encantaría ver que este “truco” funciona.

Miriam Suzanne ha estado creando contenido fantástico en torno a consultas de contenedores. Las capacidades han estado cambiando mucho. Ése es el riesgo de vivir a la vanguardia. Uno de sus últimos artículos resume la situación actual.

Lo solucionaré pronto. Seguir las especificaciones es CRÍTICO.

Por cierto, estoy un poco preocupado por la cantidad de videos y demostraciones que ya dependen del comportamiento de “exportación”. El código aún publicado en main elimina este requisito, por lo que `importar '/path/to/cqfill.js'` será todo lo que se necesita.

– Jonathan Neal (@jon_neal) 2 de mayo de 2021

Aunque mi demostración/truco original no funcionó, todavía podemos usar un truco de “cambio de tamaño” para crear esas persianas. Nuevamente podemos consultar heightsi usamos container-type: size.

Considere esta demostración:

La flecha gira a medida que cambia el tamaño del contenedor. El truco aquí consiste en utilizar una consulta de contenedor para actualizar una propiedad personalizada de CSS con ámbito.

.container {  container-type: size;}.arrow {  transform: rotate(var(--rotate, 0deg));}@container(min-height: 200px) {  .arrow {    --rotate: 90deg;  }}

Entonces tenemos aquí un truco de consulta de contenedores. El inconveniente de no poder utilizar el primer concepto de hack es que no podemos pasar completamente al 3D. El desbordamiento hiddendetendrá eso. También necesitamos que el cable pase por debajo de la ventana, lo que significa que el alféizar se interpondría en el camino.

Pero casi podemos llegar allí.

Esta demostración utiliza pasos de consulta de contenedor. En cada paso, se actualiza una propiedad personalizada con ámbito. Esto revela a Peter y abre las persianas.

El truco aquí consiste en ampliar el contenedor para ampliar el controlador de cambio de tamaño. Luego reduzco el contenido para quepa donde debe estar.

---

Esta divertida demostración de que “desacredita el meme” aún no está disponible al 100%, pero nos estamos acercando. Las consultas sobre contenedores son una perspectiva interesante. Y será interesante ver cómo cambian a medida que evoluciona la compatibilidad con el navegador. También será emocionante ver cómo la gente supera los límites con ellos o los utilizan de diferentes maneras.

¿Quién sabe? El “Resize Hack” podría encajar muy bien algún día con el infame “Checkbox Hack”.