Primeiros dias de consultas de estilo de contêiner

Ainda estamos nos suuuuper primeiros dias com consultas de contêineres. Muito cedo para amplo suporte ao navegador, mas o Chromium já o suporta, Safari começou a suportá-lo na versão 16, e o Firefox é presumivelmente não muito atrás.

A maioria das conversas iniciais que giram em torno de consultas de contêiner geralmente comparam a sintaxe às consultas de mídia.

/* 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ão fazendo consultas para min-width: 600. A diferença é que a consulta de mídia está olhando para a largura da janela de visualização para acionar essas mudanças de estilo enquanto a consulta de contêiner está olhando para a largura calculada do .posts elemento. Doce!

Mas depois de ouvir CSS Podcast Episódio 59, Una e Adam cutucaram o futuro das consultas de contêiner: consultas de estilo! O rascunho de trabalho atual da especificação do Módulo de Contenção CSS Nível 3 define consultas de estilo de contêiner:

A consulta de estilo de contêiner permite consultar o valores calculados da recipiente de consulta. É uma combinação booleana de características de estilo () que cada consulta uma propriedade única e específica do contêiner de consulta.

Mas ainda não há exemplos de sintaxe - apenas uma breve descrição:

A sintaxe de um  é o mesmo que para um declaração, e sua consulta é verdadeira se o valor calculado da propriedade fornecida no contêiner de consulta corresponder ao valor fornecido (que também é calculado em relação ao contêiner de consulta), desconhecido se a propriedade ou seu valor for inválido ou não suportado e falso caso contrário . A sintaxe booleana e a lógica combinando características de estilo em uma consulta de estilo é o mesmo que para Consultas de recursos CSS. (Ver @apoia.)

Então, sim, com o tempo, devemos esperar fazer algo assim:

.posts {
  container-name: posts;
}

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

Esse é um exemplo bem idiota. Uma coisa a notar é que o container-type não é mais baseado no container inline-size mas por style. Nós poderíamos descartá-lo assim:

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

…mas todas as consultas de contêiner são style consultas por padrão. Nós iremos. pelo menos como está hoje. Miriam Suzanne tem um bom esboço dos possíveis problemas que podem surgir com isso.

Onde consultar os estilos de um contêiner pode ser útil? Eu não sei ainda! Mas minha mente vai para alguns lugares:

• Valores de propriedade personalizada: Vimos propriedades personalizadas usadas como indicadores de estado, como o Método de comutação DRY Ana cobriu um tempo atrás. O valor muda, assim como os estilos.
• Abordagem alternativa do modo escuro: Em vez de basear tudo em uma mudança de classe do corpo que reatribui valores de propriedade personalizados, talvez possamos alterar uma paleta de cores inteira se, digamos, o plano de fundo do corpo mudar de cor.
• Condições de consulta mais complexas: Como, digamos, queremos aplicar estilos quando o size e style condições para um contêiner são atendidas.

Una também mencionou no CSS Podcast que as consultas de estilo de contêiner podem ajudar a evitar algumas situações estranhas de estilo, como se por acaso tivéssemos texto em itálico em um texto já em itálico blockquote:

blockquote {
  container-name: quote;
}

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