CSS if(): condicionais nativas sem JavaScript
Feature explainer da função if() — não é o demo Minecraft CSS (Wave O).
Por que isso é importante
CSS if(): feature de valor condicional — use com fallback; lógica de negócio fica no JS.
Leitura relacionada: Minecraft com CSS puro · shadcn não é só lib · Tailwind guia · Tutorial Tailwind.
Introduzindo lógica no CSS
Durante anos, manipular estilos com base em condições exigia o uso de JavaScript, funções auxiliares como clsx ou troca de classes manual. Mas esse panorama mudou: a especificação de CSS ganhou uma função nativa chamada if, que oferece uma maneira poderosa de aplicar estilos condicionalmente com base em propriedades customizadas e queries de estilo.
Como a função if funciona
A nova função if permite utilizar valores condicionais diretamente em propriedades CSS. Essa possibilidade é destravada com o uso de custom properties em conjunto com style queries, permitindo alterar o estilo de um elemento dinamicamente sem alterar o DOM ou adicionar classes extras.
Exemplo prático com status visuais
Suponha que você tenha um componente Card que recebe um status como pending, complete ou inactive. Agora é possível refletir visualmente esse status direto no CSS usando a função if com propriedades customizadas, como border-color, background-color e grid-column.
Declarando status com atributos
Você pode usar o seletor de atributos para gerar uma propriedade customizada dinamicamente. Por exemplo: <code>--status: ident(attr(data-status));</code> . Isso define uma variável baseada no conteúdo do atributo data-status, que depois será usada nas condicionais.
Aplicando if nos estilos
Com a variável em mãos, você pode escrever algo como: <code>border-color: if(--status = pending, blue, if(--status = complete, green, gray));</code> Isso aplica a lógica diretamente na propriedade, reduzindo parte da necessidade de classes manipuladas via JS (quando o browser suporta).
Atenção
Nem todos os navegadores ainda suportam essas funcionalidades. O suporte começa no Chrome 137, portanto é fundamental verificar fallback para navegadores antigos.
Customizando posicionamento visual
Além de estilos, é possível alterar layout baseando-se na condição do conteúdo. Por exemplo, a propriedade grid-column agora pode ser definida com lógica condicional conforme o status: <code>grid-column: if(--status = pending, 1, if(--status = complete, 2, 3));</code>
Resolvendo problemas de acessibilidade
Antes, quando alterávamos o posicionamento visual via CSS, podíamos quebrar a ordem de leitura dos leitores de tela. Porém, com a nova propriedade reading-flow, é possível manter a estrutura visual e a semântica de leitura acessível em sincronia.
Info útil
O reading-flow permite reordenar visualmente os elementos mantendo uma ordem correta de leitura para tecnologias assistivas. Isso torna componentes dinâmicos mais acessíveis sem comprometer a semântica do DOM.
Evite conflitos de ordem entre propriedades
Tradicionalmente, o CSS aplicava regras com base na ordem dos seletores. Isso muitas vezes causava conflito e bugs sutis. Com a função if, a ordem das condições é explícita e mais previsível, tornando sistemas grandes mais robustos.
Substituindo hover, focus e active com propriedades
Você pode definir variáveis globais como --hover, --focusvisible e --active, e usá-las nas condicionais para definir estados como cor de fundo. Isso elimina a necessidade de pseudo-classes cada vez que o estilo precisar variar conforme o estado.
Atenção
Controlar seletores como :hover ou :active por CSS condicional exige cuidado para não quebrar comportamentos inesperadamente. Sempre teste em múltiplos dispositivos e tamanhos de tela.
Combinando condição com queries de tamanho
style queries + if() aproximam breakpoints e tokens declarativos no CSS nativo. Isso não substitui Tailwind em produto: é outro spoke (utilitários vs feature nativa).
Modo Mobile First programável
Você pode usar uma função como size() para retornar diferentes labels (VerySmall, Small, Medium etc) baseadas em breakpoints e ajustá-las nas condições via if, oferecendo comportamento MobileFirst nativo de forma mais clara.
Visão técnica
if() pode reduzir parte do clsx em temas/estados visuais — não apaga utilitários nem componentes. Em multi-browser, classes e tokens ainda são o caminho seguro.
Impacto na manutenibilidade de componentes
Ao migrar suas lógicas condicionais para dentro das próprias regras CSS com a função if, os sistemas de design se tornam mais legíveis, fáceis de debugar e reduzirão problemas de conflito entre estilos (overriding) — com suporte de browser em mente.
O que muda na prática (e o que não muda)
if() amplia o que dá para declarar no CSS, mas não transforma CSS em linguagem de aplicação. Use para tokens/temas; meça suporte e mantenha fallback. Frameworks e JS de UI continuam úteis.
Checklist de Implementação
Perguntas frequentes
O que é a função if() no CSS?
É uma função de valor condicional (CSS Values Level 5) que escolhe um valor conforme style(), media() ou supports(). Disponível em Chrome/Edge 137+; Firefox e Safari ainda sem suporte amplo — use fallback.
CSS if() substitui JavaScript?
Para temas, tokens e estados visuais, reduz classes/JS de estilo. Lógica de negócio, fetch e efeitos colaterais continuam no JS.
Preciso de Chrome 137+?
Sim para usar if() nativo hoje. Em produção multi-browser, declare valor base antes e trate if() como progressive enhancement.
Isso é o mesmo que o deep dive Minecraft em CSS?
Não. Este artigo explica a feature if(). O deep dive Minecraft é demo 3D/experimental — outro spoke.
Continue explorando
Continue: Minecraft com CSS puro · shadcn não é só lib · Tailwind guia · Tutorial Tailwind.