Condições CSS com a nova função if()

Una Kravets

Publicado em 1º de julho de 2025

No Chrome 137 e versões mais recentes, é possível testar condicionais inline do CSS com a função if(). O if() permite uma interface de desenvolvedor mais limpa para estilos dinâmicos, como consultas de estilo e consultas de mídia, com algumas diferenças importantes, que você pode conferir nesta postagem.

A função CSS if() funciona usando uma série de pares de condição-valor, estruturados da seguinte maneira:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

É possível fornecer uma instrução else, que é usada se nenhuma das outras condições for atendida:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

No momento, if() funciona com três tipos diferentes de consultas:

• style(): consultas de estilo
• media(): consultas de mídia
• supports(): oferece suporte a consultas

Vamos colocar isso em contexto com alguns exemplos:

Demonstração: consultas de mídia inline

O uso de if() é uma ótima maneira de incluir consultas de mídia inline nos seus estilos. Por exemplo, você pode verificar a preferência de tema de um usuário (claro ou escuro) ou fazer consultas de mídia inline para a largura da viewport. O exemplo a seguir mostra a consulta de mídia para dispositivos de ponteiro. O tamanho padrão do botão seria de 30 px em um dispositivo com um ponteiro fino, como um mouse, mas para dispositivos touchscreen, como aqueles com um ponteiro grosso, o tamanho do botão seria o mínimo recomendado de 44 px para espaçamento de toque adequado e acesso mais fácil.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

O código anterior gera o mesmo resultado que a consulta de mídia a seguir:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

O uso do formato if() permite que você tenha a lógica inline, sem precisar da lógica de estilo em dois lugares diferentes.

Demonstração: consultas de suporte inline

Outra maneira de usar if() é criar consultas de suporte inline. Por exemplo, para verificar a compatibilidade com a ampla gama de cores, como OKLCH, use:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Com esse código, se o navegador oferecer suporte ao espaço de cores oklch, o usuário vai ver a cor mais viva e também vai receber a mensagem "Seu navegador oferece suporte a OKLCH" no conteúdo pseudo ::after.

Para saber mais e conferir a diferença entre RGB e espaços de cores mais avançados, confira o seletor de cores e os recursos em oklch.com.

Demonstração: visualização do estado da interface

Também é possível usar if() para estilizar com base no estado. Por exemplo, estilizar cards de progresso com base no estado da interface (pendente ou concluído). Armazene o status em um atributo de dados ou em uma propriedade personalizada diretamente e aplique estilos inline à propriedade usando if().

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Com style() dentro de uma função if(), é possível estilizar diretamente o elemento de destino, sem a necessidade de um elemento pai, como as consultas de estilo CSS.

Esta demonstração mostra um caso básico de como usar if() para oferecer suporte a uma nova abordagem arquitetônica do CSS. Um dos benefícios de usar propriedades personalizadas do CSS em vez de classes é a facilidade de atualização delas no CSS. Por exemplo, elas podem ser atualizadas usando consultas de mídia ou pseudoestados, como :hover.

A seguir

A adição de if() oferece uma nova oportunidade de arquitetura para desenvolvedores de CSS. À medida que tecnologias como as consultas de estilo evoluem, a consulta de intervalos provavelmente será possível nas funções if() e também será útil quando combinada com a proposta de funções personalizadas (CSS @function) que será lançada em breve.

Para saber mais sobre esses recursos, confira:

• Vídeo de 3 minutos com instruções da demonstração 3
• Artigo de Lea Verou