Más inteligente que Ctrl+F: enlaza directamente a contenido dentro de una página web

• Text Fragment es una potente función de la plataforma web que permite enlazar con precisión a texto específico dentro de una página web sin necesidad de agregar anclas
• Esta función se complementa con el pseudoelemento CSS ::target-text, que ofrece una forma de definir el estilo del texto resaltado
• Sintaxis básica de una URL con fragmento de texto:
  • https://example.com/page.html/…]
• Después del símbolo hash se agrega la sintaxis especial :~:, y después de text= se añade lo siguiente:
  1. prefix-: una cadena de texto que debe aparecer justo antes del texto enlazado. Si hay varias coincidencias, ayuda al navegador a enlazar con el texto correcto. Esta parte no se resalta
  2. textStart: el inicio del texto que se va a resaltar
  3. textEnd: la parte final del texto que se va a resaltar
  4. -suffix: funciona de forma similar a prefix-, pero el guion va antes de la cadena de texto que aparece después del texto enlazado. Es útil cuando hay varias coincidencias y no se resalta junto con el texto enlazado
• Si el navegador admite fragmentos de texto, se puede usar el pseudoelemento ::target-text para cambiar el estilo del texto resaltado
  • ::target-text { background-color: yellow; }
• Solo se pueden cambiar las siguientes propiedades:
  • color
  • background-color
  • text-decoration y propiedades relacionadas
  • text-shadow
  • stroke-color, fill-color, stroke-width
  • propiedades personalizadas
• Compatibilidad entre navegadores y comportamiento de fallback
  • Actualmente, los fragmentos de texto son compatibles con todos los navegadores
  • El pseudoelemento ::target-text todavía no es compatible con Safari, pero está disponible en la versión Technology Preview
  • Si el navegador no admite esta función, la página se carga sin resaltar el texto ni hacer scroll
  • El estilo predeterminado del resaltado varía según el navegador
• Reflexiones finales
  • Al principio pensé que los fragmentos de texto eran una función exclusiva de Chrome, pero descubrí que en realidad se basan en la web abierta y pueden implementarse en todos los navegadores
  • Espero que esta función se use más ampliamente, especialmente en sistemas de IA generativa confiables
  • Sería bueno que cualquier persona pudiera usar fácilmente los fragmentos de texto
• Actualización
  • Los navegadores basados en Chromium ya incluyen una función integrada para generar enlaces a texto específico
  • Si usas Chrome, puedes resaltar un texto y hacer clic derecho para encontrar en el menú contextual la opción "Copiar enlace al texto resaltado"

[plorrr]

A veces lo veía al buscar en Google, así que era esto.

[siisee11]

Así que esta era la función que hacía que en Arc Browser se copiara un enlace directo a un texto...!

[galadbran]

En el navegador Edge, si seleccionas texto y abres el menú contextual con clic derecho, hay una opción llamada "Copy link to highlight"; fue gracias a esa función que me enteré de que existía esta especificación.

[galadbran]

En Firefox estoy usando una extensión llamada https://github.com/ichaoX/ext-textFragment.

[joyfui]

Oh, buena extensión, gracias.

[huiya]

Oh, esto está genial.

[secret3056]

Una función así... cuanto más conoces el mundo de los navegadores, más te das cuenta de que tienen de todo.

https://es.news.hada.io/topic?id=17474#:~:text=cheoeumeneun,kkaedareum