Skip to main content
Validação HTML

CSS: “text-transform”: “X” não é um valor “text-transform”.

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 upppercase em vez de uppercase, ou Capitalize em vez de capitalize (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, ou center, que não se aplicam a text-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-transform com text-decoration, text-align, ou font-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.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.