[David Baron] Reflexiones sobre un camino implementable para las consultas de contenedores

Ese es el título de una publicación pública de David Baron, ingeniero principal de Firefox, con ideas sobre consultas de contenedores. Sé que mucha gente ha estado conteniendo la respiración esperando las ideas de David, ya que él es uno de los pocos excepcionalmente calificados para comprender los entresijos de esto y hablar sobre la posibilidad de implementación.

Todavía estamos en las primeras etapas de las consultas de contenedores. Todo diseñador y desarrollador web los quiere, los navegadores lo saben, pero es una situación muy complicada. En febrero de 2020 fue muy talentoso escuchar señales positivas sobre una posible sintaxis de declaración de cambio que nos daría acceso a una available-inline-sizeherramienta utilizada para establecer valores individuales de forma condicional.

Ahora estamos viendo una segunda idea que también está en el ámbito de lo posible.

Esta idea utiliza una @rule en su lugar para la sintaxis. Del documento:

@container selector (container-media-query)? {  // ... rules ...}

Entonces me lo estoy imaginando así:

.parent {  contain: layout inline-size;  display: grid;  grid-template-columns: 100%;  gap: 1rem;}@container .parent (min-width: 400px) {  grid-template-columns: 1fr 1fr;  .child::before {     content: "Hello from container query land!";   }}

Excepto…

1. ¿No estoy seguro de si también tendrías que repetir el selector en el interior? O si coloca pares propiedad/valor allí se aplica automáticamente al selector en @rule.
2. David dice: “Las reglas sólo pueden coincidir con los descendientes de ese contenedor. Probablemente necesitaríamos soporte para algunas propiedades que se aplican al propio contenedor, pero otras definitivamente no pueden”. Espero que las propiedades de la cuadrícula sean un fuerte candidato para algo que puedas cambiar, pero no tengo idea. De lo contrario, creo que veríamos personas envolviendo elementos divpara sortear el límite de “solo descendientes”.

La contención parece ser una parte muy importante de esto. Por ejemplo, si el elemento no está contenido en una propiedad, la consulta del contenedor simplemente no funcionará. No sé mucho sobre contención, pero Rachel tiene un gran análisis profundo de los finales del año pasado.

Nuevamente, esto es muy temprano , me estoy divirtiendo viendo esto y ninguno de nosotros tiene idea de qué llegará realmente a los navegadores.

Enlace directo →