Una cornucopia de consultas sobre contenedores

No sé ustedes, pero mis feeds se han visto inundados de artículos sobre consultas de contenedores CSS en las últimas semanas. En realidad, los rumores sobre las consultas de contenedores comenzaron en diciembre después de que Miriam Suzanne publicara una propuesta (retomando la propuesta de David Baron), pero fue noticia en un tweet de finales de marzo de Una Kravets que incluyó Chrome Canary 91.0.4459.0 detrás de la #enable-container-queriesbandera en chrome://flags.

Ya se han cubierto muchas cosas sobre consultas de contenedores en tantos lugares en tan poco tiempo, ¡y la especificación ni siquiera es definitiva! Estoy muy contento de ver tanto entusiasmo por una característica CSS y quería reprimir un poco. Chris también estaba recopilando un montón de enlaces sobre el tema, así que aquí hay un resumen de todo lo que pasó por nuestros escritorios.

Explicación y propuesta de consultas de contenedores.

El artículo de Miriam es un excelente punto de partida para empezar. Esto es algo así como el discurso de ascensor que presenta la idea y al mismo tiempo proporciona una serie de ejemplos y recursos que vale la pena consultar.

Lee el artículo

Consultas de contenedores: una guía de inicio rápido

David Herron aborda directamente el concepto en el blog Oddbird, lo cual es apropiado ya que allí es donde también trabaja Miriam Suzanne. Esta es una excelente introducción a las consultas de contenedor que profundiza en la sintaxis con un ejemplo que analiza un componente de tarjeta.

Lee el artículo

Introducción a las consultas de contenedores CSS

Stephanie Eckles profundiza en las consultas sobre contenedores en Smashing Magazine. Me encanta que el artículo comience indicando qué se resuelven las consultas de contenedor antes de pasar a la sintaxis y los procedimientos.

Lee el artículo

Las consultas de contenedores están llegando

Andy Bell ha querido consultas sobre contenedores desde hace tanto tiempo como cualquiera. No perdió el tiempo y se lanzó a ellos con su propio ejemplo de tarjeta. Y oye, por fin podrás retirar su pegatina.

Lee el artículo

Saluda a las consultas de contenedores

Siempre aprecio la forma en que Ahmed Shadeed explica las cosas en los términos más simples posibles y que sus demostraciones van más allá de los ejemplos comunes y abarcan casos de uso interesantes.

Lee el artículo

Consultas de contenedores CSS: un primer vistazo + demostración

Vale, esto es una trampa ya que Bramus lo publicó a finales de marzo. Pero fue realmente después de esta publicación cuando comencé a ver a otros llegar.

Lee el artículo

CSS de próxima generación: @container

Sí, ¡también se agregaron CSS-Tricks a la charla! Una Kravets tiene lo que podría ser mi demostración favorita de consultas de contenedores hasta ahora: un calendario que ajusta todo, desde el tamaño de fuente hasta el diseño.

Lee el artículo

Consultas de contenedores en componentes web

Max Böck hace lo que más me gusta: ¡tomar dos ideas y combinarlas! Hizo una demostración estelar de un componente web para mostrar libros e integraciones @container.

Lee el artículo

Dirección de arte a nivel de componente con consultas de contenedor CSS

Sara Soueidan muestra cómo se pueden usar consultas de contenedor para crear imágenes directas, incluidos los errores que surgen al usar el pictureelemento con @container.

Lee el artículo

Susy y Sass, Capas CSS y compatibilidad CSS, Consultas de Contenedores y CSSWG

Escuche a Bruce Lawson y Vadim Makeev discutir consultas de contenedores (entre otras cosas) con Miriam.

Escuchar podcast

¡Las consultas de contenedores cambiarán las reglas del juego!

Mire a Kevin Powell demostrar cómo esas elegantes auto-fillrejillas minmax()son un buen caso de uso para que los componentes se diseñen según su tamaño en un punto determinado.

Ver video

Consultas de contenedores CSS Polyfill PRIMER VISTAZO

Scott Tolinski mira cqfill. Bramus hace lo mismo aquí en esta publicación de blog. La mejor parte del video de Scott es agregar transitionmensajes sobre las propiedades modificadas.

Ver video

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

Jhey Tompkins ya sentía que había demasiadas demostraciones de tarjetas para consultas de contenedores y quería hacer algo súper diferente.

Lee el artículo

Consultas de contenedores El futuro de CSS

Nunca es demasiado cuando se trata de aprender sobre contenedores de la mano de Miriam Suzanne. Aquí tenéis un vídeo de la conferencia.

Ver video

Consultas de contenedores para diseñadores

Ahmad Shadeed dice que es posible que los diseñadores quieran empezar a pensar en consultas de contenedores. Tener un documento que describa los puntos de interrupción para un solo componente parece ser el camino a seguir por ahora.

Lee el artículo

Consultas de contenedores CSS: casos de uso y estrategias de migración

Adrian Bece cubre los conceptos básicos aquí y señaló algunas cosas que no sabía. Primero, todavía no existen DevTools para consultas de contenedores, lo que hace que sea difícil depurarlas.

Lee el artículo

El nuevo responsive: diseño web en un mundo impulsado por componentes

Una Kravets conecta no solo consultas de contenedores, sino también otros conceptos para facilitar este mundo impulsado por componentes. ¡Parece que los estilos de ámbito nativo podrían volver a tener un poco de tracción!

Lee el artículo

Todos ellos cambian: elementos responsivos y más

El artículo de Brian Kardell trata más sobre una posible switch()función (y amigos de palabras clave) que parecen muy útiles, incluso independientemente de las consultas de contenedor.

Lee el artículo

---

Bastante, ¿no? Antes de cerrar la sesión, Chris tiene un desafío para todos nosotros que quería compartir:

Un estribillo común, incluido yo mismo, ha sido que si tuviéramos consultas de contenedor las usaríamos para la gran mayoría de lo que usamos hoy en día para las consultas de medios. El desafío es: revisar su código base CSS ahora con ojos nuevos sabiendo cómo @containerfuncionan las consultas actualmente. ¿Se sostiene ese estribillo? ¿Qué consultas de los medios reemplazará (una vez que podamos hacerlo razonablemente) y cuáles deben permanecer? Blog eso.