Los inicios de las consultas estilo contenedor | trucos CSS

Todavía estamos en una etapa muy temprana con las solicitudes de contenedores. Es demasiado pronto para una amplia compatibilidad con los navegadores, pero Chromium ya lo admite, Safari comenzó a admitirlo en la versión 16 y Firefox probablemente lo sea. no muy atrás.

La mayoría de las primeras conversaciones que giraban en torno a las consultas de contenedores generalmente comparaban 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 hacen solicitudes de min-width: 600La diferencia es que la consulta de medios analiza el ancho de la ventana gráfica para activar estos cambios de estilo, mientras que la consulta de contenedor analiza el ancho calculado de .posts elemento. ¡Dulce!

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

A consulta de estilo de contenedor permite consultar a valores calculados de solicitud de contenedor.Esta es una combinación booleana de individuales caracteristicas de estilo () que cada solicitud tiene una propiedad específica del contenedor de solicitudes.

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 en relación con el contenedor de consulta), desconocido si la propiedad o su valor no son válidos o no se admiten, y falso de lo contrario sintaxis booleana y combinando lógica caracteristicas de estilo en un consulta de estilo es lo mismo que para Solicitudes de funciones CSS(Mirar @apoyo.)

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;
  }
}

Este es un ejemplo bastante tonto. Una cosa a tener en cuenta es que container-type ya no se basa en el contenedor inline-size Pero de donde stylePodemos reconocerlo así:

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

…pero todas las solicitudes de contenedores son style solicitudes predeterminadas.. Bueno, al menos como es hoy. Miriam Suzanne tiene una bonita esbozar los posibles problemas que pueden surgir con este.

¿Dónde puede ser útil consultar estilos de contenedores? ¡Sigo sin saberlo! Pero mis pensamientos van a varios lugares:

• Valores de propiedad personalizados: Hemos visto propiedades personalizadas utilizadas como indicadores de estado, como el método de cambio DRY que Ana observó hace un tiempo. El valor cambia, y también lo hacen los estilos.
• Un enfoque alternativo del modo oscuro: En lugar de basar 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 solicitud más complejas: Por ejemplo, queremos aplicar estilos cuando size y style se cumplen las condiciones del contenedor.

Una también mencionó en el CSS Podcast que las solicitudes de estilo de contenedor pueden ayudar a evitar algunas situaciones de estilo incómodas, como si accidentalmente tenemos texto en cursiva dentro de un texto que ya está en cursiva. blockquote:

blockquote {
  container-name: quote;
}

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