Frontend
CSS if(): condicionais nativas sem JavaScript
Feature explainer da função if() — não é o demo Minecraft CSS (Wave O).
CSSWeb Dev
Carregando
Feature explainer da função if() — não é o demo Minecraft CSS (Wave O).
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.
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.
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.
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.
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.
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).
Nem todos os navegadores ainda suportam essas funcionalidades. O suporte começa no Chrome 137, portanto é fundamental verificar fallback para navegadores antigos.
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>
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
É 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.
Para temas, tokens e estados visuais, reduz classes/JS de estilo. Lógica de negócio, fetch e efeitos colaterais continuam no JS.
Sim para usar if() nativo hoje. Em produção multi-browser, declare valor base antes e trate if() como progressive enhancement.
Não. Este artigo explica a feature if(). O deep dive Minecraft é demo 3D/experimental — outro spoke.
Continue: Minecraft com CSS puro · shadcn não é só lib · Tailwind guia · Tutorial Tailwind.