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: --status: ident(attr(data-status)); . 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: border-color: if(--status = pending, blue, if(--status = complete, green, gray)); 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: grid-column: if(--status = pending, 1, if(--status = complete, 2, 3));
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
- Entendeu o funcionamento da função if no CSS
- Estudou style queries e custom properties
- Configurou corretamente atributos dinâmicos com data-*
- Aplicou leitura acessível com reading-flow
- Criou sistemas condicionais para cor, posição e tamanho usando if
- Verificou compatibilidade com browsers que suportam Chrome 137+
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.
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.
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.
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.