Skip to main content

IF / ELSE em CSS | CSS

  • IF / ELSE em CSS | CSS

🎯 Exemplo prático​

Alterar a cor de um aviso com base no status​

HTML​

<div class="notice" data-status="error">
  Algo deu errado!
</div>

CSS​

.notice {
  --noticeStatus: attr(data-status);

  background-color: if(
    style(--noticeStatus: "error"): #d81a19;
    style(--noticeStatus: "warning"): #ffc500;
    style(--noticeStatus: "success"): #4caf50;
    else: #ddd;
  );

  color: white;
  padding: 16px;
  border-radius: 8px;
}

📝 Como isso funciona​

1️⃣ Ler o estado do elemento​

--noticeStatus: attr(data-status);

Aqui usamos attr() para capturar o valor do atributo data-status diretamente do HTML.

2️⃣ Executar a lógica condicional​

if(
  style(--noticeStatus: "error"): #d81a19;
  style(--noticeStatus: "warning"): #ffc500;
  style(--noticeStatus: "success"): #4caf50;
  else: #ddd;
)

O CSS avalia as condições em ordem, como um if / else if / else tradicional:

Valor de data-statusCor aplicada
"error"Vermelho
"warning"Amarelo
"success"Verde
Qualquer outroCinza

⭐ O grande diferencial​

👉 Você controla todo o estado do componente com um único atributo HTML.

<div class="notice" data-status="success"></div>

Sem classes extras Sem JavaScript Sem duplicação de CSS

Isso aproxima o CSS de um modelo mais declarativo e semântico.

⚡ E o attr()? Não era só para content?​

Era. Mas não é mais.

🆕 Novo attr()​

Agora o attr() pode ser usado em qualquer propriedade CSS, não apenas em content.

Além disso, ele permite:

  • Tipagem (attr(data-size length))
  • Valores de fallback
  • Uso em variáveis CSS

Isso desbloqueia padrões muito mais poderosos de estilização baseada em estado.

⚠️ Observação: essa funcionalidade ainda está evoluindo e não é 100% compatível.

📊 Suporte de navegadores (2025)​

RecursoSuporte aproximado
if()~64%
Novo attr()~65%

👉 Ou seja: use com cautela em produção 👉 Ideal para experimentos, progressive enhancement e design systems modernos

🧩 Outras formas de lógica em CSS​

Vale lembrar que if() não é a única forma de condicional no CSS moderno. Também existem:

  • @container queries
  • @supports
  • :has()
  • clamp(), min(), max()
  • Media queries avançadas

O CSS está, aos poucos, se tornando uma linguagem muito mais expressiva.

📚 Recursos oficiais​