Sobre este problema HTML
A função linear-gradient() passou por várias revisões de sintaxe durante a padronização CSS. Os primeiros rascunhos e implementações com prefixos de fornecedor (como -webkit-linear-gradient()) usavam palavras-chave de direção simples como top, bottom left, etc., onde a palavra-chave indicava o ponto de início do gradiente. O padrão final, definido nas especificações CSS Images Module Level 3 e Level 4, mudou isto para que as palavras-chave de direção usem o prefixo to e indiquem o ponto final do gradiente. Por exemplo, o antigo linear-gradient(top, #fff, #000) significava “começar no topo e ir para baixo,” enquanto o equivalente moderno correto é linear-gradient(to bottom, #fff, #000).
Isto importa porque a sintaxe antiga sem to não é CSS válido de acordo com a especificação atual. Embora alguns navegadores ainda possam interpretar a sintaxe legada para compatibilidade com versões anteriores, confiar nela é arriscado — o comportamento pode variar entre navegadores, e irá desencadear erros de validação. Usar CSS compatível com o padrão garante renderização consistente e compatibilidade futura.
Como corrigir
Substitua a palavra-chave de direção simples pela sintaxe to correta. Note que o significado da direção é invertido: a sintaxe antiga especificava onde o gradiente começava, enquanto a nova sintaxe especifica para onde ele vai.
Aqui está um mapeamento rápido da sintaxe antiga para a nova:
| Antiga (inválida) | Nova (válida) | Equivalente em ângulo |
|---|---|---|
top |
to bottom |
180deg |
bottom |
to top |
0deg |
left |
to right |
90deg |
right |
to left |
270deg |
top left |
to bottom right |
N/A (use sintaxe to) |
Importante: Repare que top na sintaxe antiga significa “começar no topo, ir para baixo.” Então o equivalente moderno é to bottom, não to top. Se a mensagem do validador diz que o argumento deve ser to top, significa que você escreveu top — mas certifique-se de que compreende em que direção o seu gradiente deve realmente ir antes de o substituir às cegas. Se você realmente quer que o gradiente vá em direção ao topo, use to top. Se quer que vá do topo para baixo, use to bottom.
Se não especificar nenhuma direção, linear-gradient() usa por defeito to bottom (de cima para baixo), que é frequentemente o que você quer.
Exemplos
Inválido: palavra-chave de direção simples
<div style="background: linear-gradient(top, #ffffff, #000000);">
Content
</div>
A palavra-chave simples top não é válida na sintaxe padrão linear-gradient() e irá desencadear o erro do validador.
Corrigido: usando a palavra-chave to
<div style="background: linear-gradient(to bottom, #ffffff, #000000);">
Content
</div>
Como o antigo top significava “começar no topo,” a sintaxe padrão equivalente é to bottom.
Corrigido: usando um ângulo
<div style="background: linear-gradient(180deg, #ffffff, #000000);">
Content
</div>
Um ângulo de 180deg produz o mesmo gradiente de cima para baixo.
Exemplo de documento completo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Example</title>
<style>
.box {
width: 200px;
height: 100px;
/* Válido: palavra-chave de direção com "to" */
background: linear-gradient(to top, #ffffff, #000000);
}
.box-angle {
width: 200px;
height: 100px;
/* Válido: equivalente em ângulo de "to top" */
background: linear-gradient(0deg, #ffffff, #000000);
}
.box-default {
width: 200px;
height: 100px;
/* Válido: nenhuma direção especificada, usa por defeito "to bottom" */
background: linear-gradient(#ffffff, #000000);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box-angle"></div>
<div class="box-default"></div>
</body>
</html>
Todas as três abordagens são válidas. Escolha a que for mais clara para o seu caso de uso — a sintaxe da palavra-chave to é geralmente a mais legível, enquanto os ângulos oferecem mais precisão para direções diagonais ou não-cardeais.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.