1
resposta

sugestão: image replacement mais adequado

Ao invés de usar no CSS o "text-indent: -99999px" para ocultar o texto, porque não usar "color: transparent"?

Tem o mesmo efeito e leitura do CSS fica mais legível.

O que acham? Existe alguma contraindicação para essa sugestão?

Seria interessante alterar essa parte no curso conforme a sugestão? Vejo alguns leitores não aceitando muito bem a solução da Alura ao utilizar "text-indent: -99999px".

Sugestão:

.icones-redes-sociais a {
    width: 40px;
    height: 40px;    
    color: transparent;
    display: inline-block;
}

Solução Alura:

.icones-redes-sociais a {
    width: 40px;
    height: 40px;    
    text-indent: -99999px;
    display: inline-block;
}
1 resposta

Olá Marcelo, Tudo bem?

Criei os dois exemplos no Codepen para você observar um detalhe! https://codepen.io/anon/pen/VgbNmV

No exemplo, para esconder o texto o primeiro quadrado faz o uso de "color: transparent" enquanto o segundo quadrado faz o uso de "text-indent: -99999px".

O texto realmente sumiu nos dois exemplos. Agora imagina se o usuário selecionasse o quadro com o mouse ou apertasse "Ctrl+A"? No primeiro exemplo o texto "perderá sua transparência" enquanto no segundo ele continuará "escondido". É bem interessante!

Espero ter ajudado, Abraços!