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).