Primeros días de las consultas de estilo de contenedor

Todavía estamos en los primeros días de las consultas de contenedores. Demasiado pronto para una amplia compatibilidad con navegadores, pero Chromium ya lo admite, Safari comenzó a admitirlo en la versión 16, y Firefox es presumiblemente no muy atrás.

La mayoría de las conversaciones iniciales que giran en torno a las consultas de contenedores suelen comparar la sintaxis con las consultas de medios.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Ambos están haciendo consultas para min-width: 600. La diferencia es que la consulta de medios analiza el ancho de la ventana gráfica para desencadenar esos cambios de estilo, mientras que la consulta de contenedor analiza el ancho calculado del .posts elemento. ¡Dulce!

Pero después de escuchar CSS Podcast Episodio 59, Una y Adam hablaron sobre el futuro de las consultas sobre contenedores: consultas de estilo! El borrador de trabajo actual de la especificación de nivel 3 del módulo de contención CSS define consultas de estilo de contenedor:

A consulta de estilo de contenedor permite consultar la valores calculados de las contenedor de consultas. Es una combinación booleana de individuos caracteristicas de estilo () que cada consulta una propiedad única y específica del contenedor de consulta.

Pero todavía no hay ejemplos de sintaxis, solo una breve descripción:

La sintaxis de un  es lo mismo que para un declaracióny su consulta es verdadera si el valor calculado de la propiedad dada en el contenedor de consulta coincide con el valor dado (que también se calcula con respecto al contenedor de consulta), desconocido si la propiedad o su valor no son válidos o no son compatibles, y falso en caso contrario . La combinación de sintaxis y lógica booleana caracteristicas de estilo post-extracción consulta de estilo es lo mismo que para Consultas de características CSS. (Véase @apoya.)

Entonces, sí, dado el tiempo, deberíamos esperar lograr algo como esto:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Ese es un ejemplo bastante tonto. Una cosa a tener en cuenta es que el container-type ya no se basa en el contenedor inline-size pero por style. Podríamos decirlo así:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…pero todas las consultas de contenedores son style consultas por defecto. Bueno. al menos como está hoy. Miriam Suzanne tiene un bonito esquema de los posibles problemas que podrían surgir con ese.

¿Dónde podría ser útil consultar los estilos de un contenedor? ¡Todavía no lo sé! Pero mi mente va a algunos lugares:

• Valores de propiedad personalizados: Hemos visto propiedades personalizadas utilizadas como indicadores de estado, como el Método de cambio DRY que Ana cubrió hace un tiempo. El valor cambia, y también lo hacen los estilos.
• Enfoque de modo oscuro alternativo: En lugar de basarlo todo en un cambio de clase de cuerpo que reasigna valores de propiedad personalizados, tal vez podamos cambiar una paleta de colores completa si, por ejemplo, el fondo del cuerpo cambia de color.
• Condiciones de consulta más complejas: Como, digamos, queremos aplicar estilos cuando el size y style se cumplen las condiciones para un contenedor.

Una también mencionó en el CSS Podcast que las consultas de estilo de contenedor podrían ayudar a evitar algunas situaciones de estilo incómodas, como si tuviéramos texto en cursiva en un texto ya en cursiva. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}