Image replacement - alternativa ao "text-indent"

Fala, André!

1) Realmente, o text-indent: -9999px parece uma gambiarra, mas é uma das formas mais difundidas, se não for a mais!

2) Não consigo perceber um gargalo de performance causado por essa técnica. O display: none retira o elemento do layout da página (mas você ainda pode manipulá-lo pelo DOM), logo, é menos uma coisa pra manter na memória e, portanto, deixa a árvore mais leve. Entretanto, considerando seu código de exemplo, a vantagem é ínfima.

3) Não! Ele serve justamente para dar ênfase no que você considera importante e deixar de lado coisas irrelevantes (o texto, nesse seu caso).

4) Dei uma pesquisada sobre isso e não encontrei nenhuma página dando certeza de que os mecanismos de busca penalizam o uso do display: hidden. Considerando que o Google, por exemplo, usa o código-fonte e não o outcome (saída), em tese, seu código iria passar pelo mecanismo de crawling e ranqueado.

Espero ter ajudado.

Abraço.

Olá Manoel! Obrigado pela considerações acima, consegui entender algumas coisas a mais, entretanto ainda não estou convencido qual é a melhor alternativa.

1. Acredito que o fato de ser um dos métodos mais difundidos não quer dizer que é o mais eficiente. Talvez seja o mais utilizado por ser o mais prático.

2. Apesar do ganho de performance ser mínimo ainda assim é um ganho, e um ganho aqui, outro ali, temos uma página com uma renderização um pouco melhor, o que pode fazer toda a diferença para o usuário final, dependendo do mercado em que você está atuando. Agora não sei se outras alternativas teriam uma solução melhor para esse problema de performance, mas este acho problemático pois você vai renderizar um box de 9999px toda vez que carregar a página. (Aproveitando esse gancho, existe alguma fonte que carrega mais rápido, caso fosse esse o método utilizado?)

3. Ok, entendi perfeitamente.

4. Você quis dizer visibility: hidden? Pela pesquisa que fiz parece que com o display: none haveria problemas de acessibilidade, pois alguns leitores de tela ignoram elementos com essa propriedade. Em relação ao visibility: hidden não encontrei referência para isso, mas com ele talvez tenha que tomar mais cuidado no layout pois o elemento continua lá, apenas não está mais visível.

O display: none não é recomendado pq é ruim pra SEO e acessibilidade, justamente os 2 pontos pro qual a gente gostaria de ter o texto alternativo.

Outras formas de fazer image replacement sem o text-indent negativo:

• color:transparent no texto. Serve pra qdo o texto é menor que o elemento onde ele está (senão vai dar overflow). Ruim é que se usuário selecionar o elemento, o texto reaparece.

• font-size: 0. Ruim é que muitos browsers não suportam isso, pq tem um font-size mínimo (especialmente no mobile). E o usuário tbm pode mudar o font-size do browser.

• position: absolute com top: -10000px. Mesmo principio do text-indent, que é renderizar o elemento fora da tela.

Pelo que entendi, pensando em todos os prós e contras de cada solução, existem duas alternativas que são mais adequadas. O text-indent e o position: absolute com top: -10000px. Mas qual delas é melhor para o carregamento da página e qual fonte usar, caso o tipo de fonte interfira nesse carregamento?

Deixa a fonte padrão do seu site mesmo, nem pense muito sobre isso.

A grande diferenca do text-indent pro absolute é que o text-indent vc aplica direto no elemento da imagem (o <a> no seu exemplo). Ja o absolute vc precisaria de um elemento separado pro texto, pra posiciona-lo fora (como o <span> que vc fez la em cima).

Por isso o pessoal costuma ir com o text-indent, pq nao exige a criacao de um elemento a mais (mas se vc ja tiver esse elemento a mais por outros motivos, ai tanto faz).

Obrigado Sérgio!