Gostaria de saber a diferença entre usar text-transform: uppercase
no CSS e usar letras maiúsculas direto no HTML.
- Existe alguma diferença entre os 2?
- Qual o mais recomendado?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeExitem uma diferença básica. O CSS só altera o aspecto visual.
Se vc tiver um input
com text-transform: uppercase
, na hora que vc fizer o submit
desse form, o texto dentro do input
vai com o texto original, ou seja, se o usuário escrever em caixa baixa, e o CSS colocar em caixa alta, o texto vai ser enviado em letras minúsculas, mesmo na tela do usuário o texto aparecendo em caixa alta.
input {
text-transform: uppercase
}
Esse input sempre vai mostrar a letra em UPPERCASE, mas se o usuário escrever em minúsculo, na hora do submit vai ser enviado em minúsiculo, mesmo na interfaçe o texto aparecendo em caixa alta<br>
<input type="text" name="" id="">
Sobre a Semântica
Sobre a semântica é preciso ter em mente que o CSS só altera estilo, e o leitor de tela não sabe se o texto é vermelho ou preto, ou se está em Arial ou Times. O ideal é que vc use as tag semânticas do HTML como <em>
, <strong>
, <cite>
, <q>
, , etc da forma correta para agregar algum valor para o texto que está entre as tags. Isso vai ajudar ao leitor de tela a interpretar o texto. Mesmo o display:none
usado pelo CSS as vezes não é o suficiente para esconder um elemento do Screen Reader (leia sobre isso aqui), por isso o HTML tem o atributo hidden
, para que o leitor ignore o elemento que tem esse atributo. Acredito ser improvável que leitores de tela considerem o CSS na semântica. Até mesmo o conteúdo de texto no content
de um pseudo-elemento é ignorado no DOM e vc não consegue acesa-lo.
Sobre o SEO
Não tenho dados nem experiência para comprovar nada nesse ponto, e como o Google vai indexar INSS
ou <span style="text-transform:uppercase">inss</span>
. O mecanismo de busca é obscuro, e o indicado é vc fazer um Teste A/B
para ver como ele trata isso. já se vc colocar <strong style="text-transform:uppercase">inss</strong>
ai sim vc vai dar um valor semântico que pode influencia no resultado da pesquisa. Mas como falei, só testando para saber, e mesmo assim o Google vive mudando essas regras... Mas por outro lado, sabemos que o Google reconhece o CSS, e inclusive leva ele em conta para qualificar o seu site, e esse é mais um motivo do assunto ser obscuro...
Existem diferenças, são muito importantes e recomenda-se utilizar aquele que faz sentido para o seu propósito; eles não são equivalentes.
Algo que você precisa sempre tem em mente: CSS aplica estilos. Você precisa deixar o texto em caixa alta porque ele deve ser caixa alta ou é meramente visual? Se fazer parte do significado do texto, ele deve estar em caixa alta já no HTML; se for meramente visual, aplique o estilo com CSS.
Ao escrever uma sigla, por exemplo, você deverá colocá-la em caixa alta diretamente no HTML, pois, por convenção, toda sigla deve estar em caixa alta - faz parte do sentido do texto ser assim. Porém, se você deseja apenas, por questões de estilo, deixar o texto em caixa alta, talvez para melhorar a legibilidade, você deve fazer isso com CSS - estar em caixa alta não faz parte do sentido do text.
Exemplo de siglas
<p>Você não deve utilizar <mark>CSS</mark> para deixar siglas, como <mark>HTML</mark>, em caixa alta</p>
Exemplo de texto em caixa alta por legibilidade
li.title {
text-transform: uppercase;
}
<ul>
<li class="title">Menu</li>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
Usando diretamente letras maiúsculas no HTML, certamente você economizaria na tarefa do browser de ter que renderizar a regra CSS. Mas creio que essa diferença de tempo de renderização é muito irrelevante.
Outro ponto é se o texto que você vai aplicar a regra text-transform: uppercase
precisará ser alterado — talvez por algum script — e neste caso faz sentido usar o text-transform
, por ser mais fácil de alterar apenas uma regra CSS ao invés de ter que trocar todo o texto.
CSS neste caso irá alterar apenas o que o usuário esta vendo.
A diferença estará no dia em que os dados coletados necessitarem de ser enviados em UPPERCASE.
Como o CSS vai alterar somente o que o usuário esta visualizando e não o que esta sendo enviado, poderá ter erros.
No segundo caso o mais correto seria usar javascript ou jquery para gerar o UPPERCASE, desta maneira os dados enviados realmente estarão em UPPERCASE.
text-transform
do CSS?