Sobre este problema de CSS
A propriedade CSS text-transform controla a capitalização de texto dentro de um elemento. É comummente usada para enforçar maiúsculas e minúsculas consistentes — por exemplo, fazer títulos aparecerem em maiúsculas ou garantir que ligações de navegação sejam em minúsculas — sem alterar o conteúdo real no HTML. Quando o validador encontra um valor que não reconhece para esta propriedade, marca-o como inválido.
Este erro pode ocorrer por várias razões:
-
Erros de escrita — escrever
upppercaseem vez deuppercase, ouCapitalizeem vez decapitalize(os valores CSS são sensíveis a maiúsculas e minúsculas em contextos de validação). -
Valores incorretos — usar valores de outras propriedades, como
bold,italic, oucenter, que não se aplicam atext-transform. - Valores não-padrão — usar valores específicos de browsers ou experimentais que não fazem parte da especificação CSS.
-
Propriedade errada — confundir
text-transformcomtext-decoration,text-align, oufont-variant, e usar os seus valores aqui em vez disso.
Corrigir isto é importante porque CSS inválido pode levar a renderização imprevisível entre browsers. Embora a maioria dos browsers simplesmente ignore uma declaração inválida, o seu estilo pretendido não será aplicado, potencialmente quebrando o seu design. Manter o seu CSS válido também melhora a manutenibilidade e garante compatibilidade futura.
Valores válidos para text-transform
| Valor | Efeito |
|---|---|
none |
Nenhuma mudança de capitalização (padrão) |
capitalize |
A primeira letra de cada palavra fica em maiúscula |
uppercase |
Todos os caracteres são convertidos para maiúsculas |
lowercase |
Todos os caracteres são convertidos para minúsculas |
full-width |
Força caracteres numa forma de largura total (útil para tipografia CJK) |
full-size-kana |
Converte caracteres kana pequenos para equivalentes de tamanho completo |
Exemplos
Incorreto — valor inválido
Neste exemplo, bold não é um valor text-transform válido. Provavelmente pertence à propriedade font-weight.
<p style="text-transform: bold;">Bem-vindo ao nosso site</p>
Similarmente, um simples erro de escrita irá desencadear este erro:
<p style="text-transform: uppercse;">Bem-vindo ao nosso site</p>
Correto — usando valores válidos
<p style="text-transform: uppercase;">Bem-vindo ao nosso site</p>
<p style="text-transform: capitalize;">Bem-vindo ao nosso site</p>
Correto — separando preocupações com as propriedades certas
Se pretendia fazer o texto negrito e em maiúsculas, use a propriedade apropriada para cada efeito:
<p style="font-weight: bold; text-transform: uppercase;">Bem-vindo ao nosso site</p>
Correto — usando text-transform numa folha de estilos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemplo de Text Transform</title>
<style>
.heading {
text-transform: uppercase;
}
.name {
text-transform: capitalize;
}
.code-snippet {
text-transform: none;
}
</style>
</head>
<body>
<h1 class="heading">navegação do site</h1>
<p class="name">joão silva</p>
<code class="code-snippet">minhaVariavel</code>
</body>
</html>
Se não tem a certeza de qual valor precisa, uppercase e capitalize são os mais comummente usados. Use none quando precisar de anular uma regra text-transform herdada de um elemento pai.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.
Saiba mais: