Image replacement

Olá, Raul!!

Hoje em dia, image replacement é sim uma gambiarra e uma técnica blackhat de SEO.

Boa noite Raul tudo certo!

Hoje em dia ainda não existe propriedade no CSS para tratar devidamente deste problema. Eu tenho certo receio de usar a técnica com text-ident. Geralmente eu utilizo o seguinte

       h1{
              font-size: 1px;
              color:transparent;
    }

A regra de "font-size: 1px" serve para setar o texto para o menor tamanho possível, escolho o 1px e não o zero pois podem ter navegadores que não reconhecerão o valor e portanto não irão aplicar a regra.

A regra "color: transparent" é para setar a cor do texto para transparente.

Eu particularmente acho menos arriscada que a text-ident.

O principal risco dessa técnica que é que o usuário pode conseguir selecionar o texto "Invisível da tela", lembrando que ele não esta visível e minusculo quase impossível mas pode acontecer.

então você adicionar o seguinte CSS que não permite que o texto seja selecionado:

.naoSelecionavel {
    -webkit-touch-callout: none;  /* iPhone OS, Safari */
    -webkit-user-select: none;    /* Chrome, Safari 3 */
    -khtml-user-select: none;     /* Safari 2 */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* IE10+ */
    user-select: none;            /* Possível implementação no futuro */
}

E para Usar

<p>Texto selecionável</p>
<p class="naoSelecionavel" unselectable="on">Texto <b>não</b> selecionável</p>

Eu particularmente uso sem esta validação de seleção. resumindo existem diversas técnicas. Compartilhei a que uso com você

Abraço amigo! Espero que tenha ajudado!

Luiz bom dia! tudo certo? Obrigado pelas suas explicações!! Pelo que vi também acho menos arriscado do que usar um text-ident. Grande abraço!