Mais inteligente que o Ctrl+F: criando links diretos para conteúdo em páginas web

• Text Fragment é um recurso poderoso da plataforma web que permite criar links precisos para um texto específico dentro de uma página, sem precisar adicionar âncoras
• Esse recurso é complementado pelo pseudo-elemento CSS ::target-text, que fornece uma forma de estilizar o texto destacado
• Sintaxe básica de uma URL de fragmento de texto:
  • https://example.com/page.html/…]
• Após o símbolo de hash, adicione a sintaxe especial :~: e, depois de text=, inclua o seguinte:
  1. prefix-: uma string de texto que deve vir imediatamente antes do texto vinculado. Quando há várias correspondências, isso ajuda o navegador a vincular ao texto correto. Essa parte não é destacada
  2. textStart: o início do texto que será destacado
  3. textEnd: a parte final do texto que será destacada
  4. -suffix: funciona de forma semelhante a prefix-, mas o hífen fica antes da string de texto que vem depois do trecho. É útil quando há várias correspondências e não é destacado junto com o texto vinculado
• Se o navegador oferecer suporte a fragmentos de texto, é possível alterar o estilo do texto destacado usando o pseudo-elemento ::target-text
  • ::target-text { background-color: yellow; }
• Apenas as seguintes propriedades podem ser alteradas:
  • color
  • background-color
  • text-decoration e propriedades relacionadas
  • text-shadow
  • stroke-color, fill-color, stroke-width
  • propriedades personalizadas
• Suporte dos navegadores e comportamento de fallback
  • Atualmente, fragmentos de texto são suportados por todos os navegadores
  • O pseudo-elemento ::target-text ainda não é suportado no Safari, mas está disponível na versão Technology Preview
  • Se o navegador não oferecer suporte a esse recurso, a página será carregada sem destaque de texto nem rolagem
  • O estilo padrão do destaque varia de navegador para navegador
• Considerações finais
  • No começo, pensei que fragmentos de texto fossem um recurso exclusivo do Chrome, mas percebi que, na verdade, isso faz parte de uma base aberta da web que pode ser implementada por todos os navegadores
  • Espero que esse recurso passe a ser mais amplamente usado, especialmente em sistemas confiáveis de IA generativa
  • Seria ótimo se todos os usuários pudessem usar fragmentos de texto com facilidade
• Atualização
  • Navegadores baseados em Chromium já têm um recurso embutido para gerar links para um texto específico
  • Se você usa o Chrome, pode destacar um texto e clicar com o botão direito para encontrar a opção "Copiar link para o destaque" no menu de contexto

[plorrr]

Às vezes eu via isso enquanto pesquisava no Google, então era isso.

[siisee11]

Ah, então era esse tipo de recurso quando no Arc Browser dava para copiar um link para um texto..!

[galadbran]

No navegador Edge, se você selecionar um texto e abrir o menu de contexto com o botão direito, existe uma opção chamada "Copy link to highlight", e foi por causa desse recurso que eu descobri que existia essa especificação.

[galadbran]

No Firefox, eu uso instalando a extensão https://github.com/ichaoX/ext-textFragment .

[joyfui]

Ah, ótima extensão, obrigado.

[huiya]

Nossa, isso é bem interessante.

[secret3056]

Que recurso... quanto mais a gente conhece o mundo dos navegadores, mais vê que tem de tudo.

https://pt.news.hada.io/topic/?id=17474…