1

Vejo que alguns sites usam estes símbolos #:~:text= nos links como uma forma de destacar o texto ou uma determinada parte do texto do site no qual possui relevância.

Como, por exemplo, abaixo é aberto uma página do MDN e é colorido o plano de fundo do título "JavaScript" para amarelo:

<a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript#:~:text=JavaScript">Click</a>

Só que eu não encontrei nenhuma referência explicando melhor sobre esse recurso, então surgiu algumas dúvidas minhas como:

  • Existe algum termo para expressar melhor esses símbolos?

  • Como mudar o background do texto (sem ser amarelo)?

  • Por que esse recurso não funciona quando o atributo target com o valor _blank está incluso na âncora?

  • Ele muda o background ou o selection da página?

  • Se existe esse recurso, é possível estilizar o texto com outros estilos?

1 Resposta 1

2

Esse é um recurso recente (possível a partir do Chrome 81, por exemplo) que permite criar um link que também determina uma posição em um determinado texto presente na página, que será destacado. É uma nova parte do URL (além da query string, hash, etc) que se chama text fragment.

O text fragment é, basicamente, uma forma para se especificar um texto em um URL. Assim, quando o usuário utilizar um link que o contém, o texto será destacado, chamando a atenção do utilizador.

A forma mais simples é esta (que deve ser colocada no final do URL):

#:~:text=textStart

De modo que textStart esteja codificado em no formato URL encoded.

Você também pode especificar o fim do destacamento de modo explícito, assim:

#:~:text=textStart,textEnd

A sintaxe também te permite configurar prefixos, infixos e sufixos. Para saber mais, veja aqui.

Sendo textStart e textEnd codificados em URL encoded.

Porque esee recurso não funciona quando o atributo target com o valor _blank está incluso?

Não é que não funciona com o atributo target _blank. Só que para isso você deve deixar explícito que o link é, também, do tipo noopener. Por questões de segurança, text fragments só funcionam em links de caráter noopener. Veja:

<a
  href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript#:~:text=JavaScript"
  target="_blank"
  rel="noopener"
>Click</a>

Links normais (cujo target é _self implicitamente) já são noopener por padrão, por isso não é necessário explicitar o rel="noopener" em todos os casos.

Ele muda o background ou o selection da página?

Creio que não, até porque não deve existir um selection na página no momento que o text fragment está aparecendo (já que para isso o usuário deve ter acabado de entrar na página). Uma vez que o usuário clica no text fragment, ele é removido.

Se existe este recurso é possível estilizar o texto com outros estilos?

Eu não consegui encontrar nenhum meio para customizar um text fragment, mas creio que isso se deve a pequena maturidade desse recurso (que ainda é muito novo e não foi sequer implementado em todos os browsers). Provavelmente no futuro será possível estilizá-los com um pseudo seletor.


Deixo aqui este link, para entender toda a motivação e sintaxe desse novo recurso.

É importante salientar que o suporte entre navegadores ainda é risível, uma vez que, no momento que escrevo, apenas browsers baseados em Chromium implementaram esse recurso. Não obstante, é algo interessante e que pode ser utilizado (já que não tende a quebrar a validade de um URL).

1
  • 1
    Muito boa resposta :) Commented 19/08/2020 às 11:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .