4
respostas

Alternativa de image replacement - font transparent

Amigos, testei aqui substituir o text-indent por uma alteração na cor da fonte para transparente. Acredito que seja mais fácil da página carregar e o texto continua indexado nos motores de busca (google, bing e etc).

Apenas gostaria de saber se isso realmente funciona bem e se é uma boa prática. A priori, me parece melhor do que jogar o texto longe e o resultado "visual" permanece o mesmo.

código com indent

.icones-sociais a {
    text-indent: -9000px;
    display: block;
    width: 40px;
    height: 40px;
}

Minha sugestão com transparent

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

Fiz a mesma sugestão sobre o exercicio, pois achei a solução muito suja e em algum momento podendo atrapalhar. Será que em algum momento não pode ocorrer um conflito ou bug? Outra hipótese, a de o instrutor nos fazer pensar sobre uma situação parecida. Podemos apenas sumir com o elemento jogando um valor de referência fora da tela? Será essa uma boa solução de se utilizar?

Parece que a melhor solução atualmente é de mandar a palavra para bem longe do campo de navegação. Apesar de ser uma solução bem "noob", até o momento não teremos o que fazer além disso. Triste fato!

Diogo, você testou o transparent?

Achei este tópico com a mesma questão respondida: https://cursos.alura.com.br/forum/topico-aula-9-css-text-indent-ou-font-size-29843

Inclusive o Instrutor deixou um link bem bacana com várias abordagens para este problema: https://css-tricks.com/css-image-replacement/

Obs: no blog da Caelum notei que eles utilizam a "Technique #1"