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

Una Kravets

Publicado em: 1º de julho de 2025

A partir do Chrome 137, você pode testar condicionais inline de 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 Aprenda Mais neste post.

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

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

Você pode fornecer uma instrução else, que é usada se nenhuma das outras condições for satisfeita:

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

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

• style(): consultas de estilo
• media(): consultas de mídia
• supports(): compatível com consultas

Vamos contextualizar isso com alguns exemplos:

Demonstração: consultas de mídia inline

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

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

O código anterior dá o mesmo resultado que a seguinte consulta de mídia:

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

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

Usar o formato if() permite ter a lógica inline, sem exigir a lógica de estilo em dois lugares diferentes.

Demonstração: consultas de suporte inline

Outra maneira de usar o if() é criar consultas de suporte inline. Por exemplo, para verificar a compatibilidade com cores de ampla gama, 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 for compatível com o espaço de cores oklch, o usuário vai ver a cor mais vívida e também receberá a mensagem "Seu navegador é compatível com OKLCH" no pseudoconteúdo ::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

Você também pode usar if() para estilização com base no estado. Por exemplo, estilizar cards de progresso com base no estado da interface (pendente ou concluído). Armazene o status diretamente em um atributo de dados ou uma propriedade personalizada 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 segmentado, sem precisar de um elemento pai, como as consultas de estilo CSS exigem.

Esta demonstração mostra um caso básico de como usar o 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 no CSS. Por exemplo, eles podem ser atualizados usando consultas de mídia ou pseudoelementos como :hover.

A seguir

A adição de if() oferece uma nova oportunidade arquitetônica para desenvolvedores de CSS. À medida que tecnologias como consultas de estilo evoluem, provavelmente será possível fazer consultas de intervalo em funções if(), e elas também serão úteis quando combinadas com a próxima proposta de funções personalizadas (CSS @function).

Para saber mais sobre esses recursos, confira:

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