Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Image replacement

Tarde a todos!!

Assisti agora pouco a aula sobre text-transform e image-replacement e utilizar a propriedade text-ident parece uma "gambiarra" para sumir o texto da tela. Não existe outras propriedades no CSS ou um framework que já trata desta questão?

3 respostas

Olá, Raul!!

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

solução!

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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software