Vínculo en negrita donde nadie se vinculó antes: Fragmentos de texto

Los fragmentos de texto te permiten especificar un fragmento de texto en el fragmento de URL. Al navegar a una URL con ese fragmento de texto, el navegador puede destacar o llamar la atención del usuario.

Thomas Steiner

Identificadores de fragmentos

Chrome 80 fue un gran lanzamiento. Contenía una serie de funciones muy esperadas, como Módulos de ECMAScript en trabajadores web, coalescente nulo, encadenamiento opcional y mucho más Como de costumbre, el lanzamiento anunciadas mediante un entrada de blog Blog de Chromium. Puedes ver un extracto de la entrada de blog en la captura de pantalla a continuación.

Entrada de blog de Chromium con cuadros rojos alrededor de elementos con un atributo id.

Probablemente te estés preguntando qué significan todos los cuadros rojos. Son el resultado de ejecutar siguiente fragmento en Herramientas para desarrolladores. Destaca todos los elementos que tienen un atributo id.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

Puedo colocar un vínculo directo a cualquier elemento destacado con un cuadro rojo gracias a la identificador de fragmento que luego uso en el hash de la URL de la página. Supongamos que quería incluir un vínculo directo a la sección Envíanos tus comentarios en nuestra Foros de productos aparte, yo podría hacerlo manualmente creando la URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 Como puedes ver en el panel Elementos de las Herramientas para desarrolladores, el elemento en cuestión tiene un elemento id. con el valor HTML1.

Herramientas para desarrolladores que muestran el id de un elemento.

Si analizo esta URL con el constructor URL() de JavaScript, se revelan los diferentes componentes. Observa la propiedad hash con el valor #HTML1.

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

Sin embargo, el hecho de que tuve que abrir las Herramientas para desarrolladores para encontrar el id de un elemento dice mucho acerca de la probabilidad de que el autor de esta sección en particular de la página la vinculara la entrada de blog.

¿Qué sucede si quiero establecer un vínculo con un elemento sin un id? Supongamos que quiero establecer un vínculo con los módulos de ECMAScript en el encabezado "Trabajadores web". Como puedes ver en la siguiente captura de pantalla, la <h1> en cuestión no tiene un atributo id, lo que significa que no hay forma de vincularlo a este encabezado. Este es el problema que Se resuelven los fragmentos de texto.

Las Herramientas para desarrolladores muestran un encabezado sin id.

Fragmentos de texto

La propuesta de Fragmentos de texto agrega compatibilidad con especificando un fragmento de texto en el hash de la URL. Al navegar a una URL con ese fragmento de texto, el usuario-agente puede enfatizarlo o llamar la atención del usuario.

Compatibilidad del navegador

Navegadores compatibles

  • Chrome: 89.
  • Borde: 89.
  • Firefox: No es compatible.
  • Safari: no es compatible.

Origen

Por motivos de seguridad, la función requiere que los vínculos se abran en un noopener. Por lo tanto, asegúrate de incluir rel="noopener" en tu Agregar lenguaje de marcado de anclaje <a> o agregar noopener a tu Window.open() lista de características de la funcionalidad de ventana.

start

En su forma más sencilla, la sintaxis de los fragmentos de texto es la siguiente: el símbolo de hash # seguido de :~:text= y, por último, start, que representa la codificado por porcentaje el texto al que quiero establecer un vínculo.

#:~:text=start

Por ejemplo, supongamos que quiero establecer un vínculo al encabezado ECMAScript Modules in Web Workers en la entrada de blog en la que se anuncian funciones en Chrome 80, la URL en este caso sería:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

El fragmento de texto se enfatiza de esta manera. Si haces clic en el vínculo en un navegador compatible como Chrome, el fragmento de texto se destaca y se desplaza a la vista:

Fragmento de texto desplazado hasta la vista y destacado.

start y end

¿Qué sucede si quiero vincular toda la sección titulada Módulos de ECMAScript en los trabajadores web, en lugar de solo el encabezado? La codificación de porcentaje de todo el texto de la sección generaría la URL resultante. impracticablemente largo.

Por suerte, existe una mejor manera. En lugar de todo el texto, puedo enmarcar el texto deseado con el start,end. Por lo tanto, especifico un par de palabras con codificación porcentual al comienzo del texto deseado y un par de palabras con codificación porcentual al final del texto deseado, separadas con una coma ,.

Se ve de la siguiente manera:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

Para start, tengo ECMAScript%20Modules%20in%20Web%20Workers, seguido de una coma , de ES%20Modules%20in%20Web%20Workers. como end. Cuando haces clic en un navegador compatible como en Chrome, se destaca toda la sección y se visualiza la página:

Fragmento de texto desplazado hasta la vista y destacado.

Es posible que te preguntes sobre mi elección de start y end. En realidad, la URL un poco más corta https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. con solo dos palabras en cada lado también habría funcionado. Compara start y end con la valores anteriores.

Si voy un paso más allá y ahora uso solo una palabra para start y end, puedes ver que estoy en problemas. La URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. ahora es incluso más corto, pero el fragmento de texto destacado ya no es el deseado originalmente. El el resalte se detiene cuando aparece la primera palabra Workers., que es correcta, pero no es lo que que deseas destacar. El problema es que la sección deseada no está identificada de manera inequívoca por el Valores actuales de start y end de una palabra:

Fragmento de texto no deseado que se desplazó hasta a la vista y se destacó.

prefix- y -suffix

Usar valores lo suficientemente largos para start y end es una solución para obtener un vínculo único. Sin embargo, en algunas situaciones, esto no es posible. Como nota al margen, ¿por qué elegí como ejemplo, a una entrada de blog de la versión de Chrome 80? La respuesta es que, en esta versión, Text Fragments se presentaron:

Texto de la entrada de blog: Fragmentos de URL de texto. Los usuarios o autores ahora pueden vincular a una parte específica de una página usando un fragmento de texto proporcionado en una URL. Cuando se carga la página, el navegador destaca el texto y desplaza el fragmento hasta la vista. Por ejemplo, la siguiente URL carga una página wiki sobre &quot;Gato&quot; y se desplaza hasta el contenido que aparece en el parámetro `text`.
Extracto de la entrada de blog sobre el anuncio de Text Fragments.

Observa cómo, en la captura de pantalla, sobre la palabra "texto" aparece cuatro veces. El cuarto caso es escrita con una fuente de código verde. Si quisiera vincular a esta palabra en particular, configuraría start. a text. Dado que la palabra "texto" es solo una palabra, no puede haber un end. ¿Y ahora qué? El URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text coincide en la primera aparición de la palabra "texto" que ya están en el encabezado:

Fragmento de texto que coincide en el primer caso de "Texto".

Por suerte, existe una solución. En casos como este, puedo especificar una prefix​- y una -suffix. El palabra antes de la fuente de código verde “texto” es "el", y la palabra que sigue es "parámetro". Ninguna de las otras tres apariciones de la palabra "texto" tiene las mismas palabras circundantes. Armado con este , puedo modificar la URL anterior y agregar prefix- y -suffix. Como el otro parámetros, estas también deben estar codificadas en porcentajes y pueden contener más de una palabra. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter. Para permitir que el analizador identifique claramente los elementos prefix- y -suffix, deben separarse. desde start y el end opcional con un guion -.

El fragmento de texto coincide con el caso deseado de "texto".

La sintaxis completa

A continuación, se muestra la sintaxis completa de los fragmentos de texto. (los corchetes indican un parámetro opcional). Los valores de todos los parámetros deben estar codificados en porcentajes. Esto es muy importante para el guion -, el signo et & y la coma , para que no se interpreten como parte del texto de directivas de grupo.

#:~:text=[prefix-,]start[,end][,-suffix]

Los elementos prefix-, start, end y -suffix solo coincidirán con el texto de una elemento a nivel de bloque, pero los rangos completos de start,end pueden abarcar varios bloques. Por ejemplo: :~:text=The quick,lazy dog no coincidirá en el siguiente ejemplo, porque el inicio string "The Quick" No aparece dentro de un único elemento a nivel de bloque sin interrupciones:

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

Sin embargo, sí coincide en este ejemplo:

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

Cómo crear URLs de fragmentos de texto con una extensión de navegador

Crear URLs de Fragmentos de texto a mano es una tarea tediosa, en especial cuando se trata de garantizar que lo hagan únicos. Si quieres, la especificación incluye algunas sugerencias y enumera pasos para generar URLs de fragmentos de texto. Ofrecemos una extensión de código abierto para navegadores llamada Vínculo a Fragmento de texto que te permite enlace a cualquier texto al seleccionarlo y luego hacer clic en "Copiar enlace en el texto seleccionado" en el contexto . Esta extensión está disponible para los siguientes navegadores:

. Vínculo a fragmento de texto . de tu navegador.

Varios fragmentos de texto en una URL

Ten en cuenta que pueden aparecer varios fragmentos de texto en una sola URL. Los fragmentos de texto específicos deben separadas por un signo et &. Este es un ejemplo de vínculo con tres fragmentos de texto: https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet

Tres fragmentos de texto en una URL.

Cómo combinar fragmentos de elementos y texto

Los fragmentos de elementos tradicionales se pueden combinar con fragmentos de texto. Está perfectamente bien tener tanto en la misma URL, por ejemplo, para proporcionar un resguardo significativo en caso de que el texto original de la página cambia, y el fragmento de texto ya no coincide. La URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. vínculo a la página Envíanos tus comentarios en nuestra Sección Foros de productos Contiene tanto un fragmento de elemento (HTML1) como un fragmento de texto (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Vinculación con fragmentos de elementos y de texto

La directiva del fragmento

Hay un elemento de la sintaxis que aún no expliqué: la directiva del fragmento :~:. Para evitar problemas de compatibilidad con fragmentos de elementos de URL existentes, como se muestra arriba, el La especificación de fragmentos de texto presenta el fragmento directiva. La directiva del fragmento es una parte del fragmento de URL delimitado por la secuencia de código :~: Está reservado para las instrucciones del usuario-agente, como text=, y se quita de la URL. durante la carga para que las secuencias de comandos del autor no puedan interactuar directamente con él. Las instrucciones del usuario-agente son también llamadas directivas. Por lo tanto, en el caso concreto, text= se denomina directiva de texto.

Detección de funciones

Para detectar compatibilidad, prueba la propiedad fragmentDirective de solo lectura en document. El fragmento directiva es un mecanismo para que las URL especifiquen instrucciones dirigidas al navegador en lugar de a la . Se diseñó para evitar la interacción directa con la secuencia de comandos del autor, para que el futuro usuario-agente se pueden agregar instrucciones sin miedo a introducir cambios rotundos en el contenido existente. Uno Un posible ejemplo de esas adiciones futuras podrían ser las sugerencias de traducción.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

La detección de funciones está diseñada principalmente para casos en los que los vínculos se generan de forma dinámica (por ejemplo, mediante motores de búsqueda) para evitar publicar vínculos de fragmentos de texto a navegadores que no los admiten.

Cómo aplicar estilo a fragmentos de texto

De forma predeterminada, los navegadores diseñan los fragmentos de texto de la misma manera que diseñan mark (generalmente negro sobre amarillo, los colores del sistema de CSS para mark). La hoja de estilo usuario-agente contiene CSS con el siguiente aspecto:

:root::target-text {
  color: MarkText;
  background: Mark;
}

Como puedes ver, el navegador expone un pseudoselector. ::target-text que puedes usar para lo siguiente: personalizar el resaltado aplicado. Por ejemplo, puedes diseñar tus fragmentos de texto para que sean negros. texto sobre un fondo rojo. Como siempre, asegúrate de consulta el contraste de color de modo que el estilo de anulación no cause problemas de accesibilidad y se asegure de que el elemento destacado realmente se destaque visualmente del resto del contenido.

:root::target-text {
  color: black;
  background-color: red;
}

Polifillabilidad

La función Fragmentos de texto puede tener polyfills hasta cierto punto. Ofrecemos un polyfill, que se usa internamente en la extensión, para los navegadores que no tienen brindan compatibilidad integrada para fragmentos de texto en los que la funcionalidad se implementa en JavaScript.

Generación de vínculos de fragmentos de texto programáticos

El polyfill contiene un archivo fragment-generation-utils.js que puedes importar y usar para generar vínculos de fragmentos de texto. Este es descritos en la siguiente muestra de código:

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

Cómo obtener fragmentos de texto con fines estadísticos

Muchos sitios usan el fragmento para el enrutamiento, por lo que los navegadores eliminan los fragmentos de texto. para no romper esas páginas. Hay un necesidad confirmada para exponer vínculos de fragmentos de texto a páginas; por ejemplo, con fines estadísticos pero la solución propuesta aún no se ha implementado. Como solución alternativa, por ahora, puedes usar el siguiente código para extraer la información deseada.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

Seguridad

Las directivas de fragmentos de texto se invocan solo en navegaciones completas (que no son de la misma página) que son el resultado de a activación de usuarios. Además, las navegaciones con origen en un origen diferente al de destino requerirán la la navegación se realice en un noopener, como que se sabe que la página de destino está lo suficientemente aislada. Las directivas de fragmentos de texto solo al marco principal. Esto significa que el texto no se buscará dentro de iframes y la navegación no invocará un fragmento de texto.

Privacidad

Es importante que las implementaciones de la especificación de fragmentos de texto no presenten fugas si un texto se encontró o no el fragmento en una página. Si bien los fragmentos de elementos se encuentran completamente bajo el control del autor de la página original, cualquiera puede crear fragmentos de texto. ¿Recuerdas que, en el ejemplo anterior, no había forma de vincular al encabezado Módulos de ECMAScript en trabajadores web, ya que el <h1> lo hizo no tienen un id, pero cómo cualquiera, incluido yo, podría simplemente vincular a cualquier lugar al crear cuidadosamente el fragmento de texto?

Imagina que ejecutaba una red de publicidad maliciosa evil-ads.example.com. Ahora, imagino que, en uno de mis anuncios iframes Creé dinámicamente un iframe de origen cruzado oculto para dating.example.com con una etiqueta de texto URL del fragmento dating.example.com#:~:text=Log%20Out una vez que el usuario interactúa con el anuncio. Si el mensaje "Cerrar sesión" de la víctima, sé que la víctima está actualmente Accedí a dating.example.com, que podía usar para la generación de perfiles del usuario. Desde un texto simple La implementación de fragmentos podría determinar que una coincidencia correcta debe provocar un cambio de enfoque, en evil-ads.example.com pude escuchar el evento blur y, así, saber cuándo hubo un partido. En Chrome, implementamos Fragmentos de texto de tal manera que la situación anterior no puede suceder.

Otro ataque podría ser aprovecharse del tráfico de red en función de la posición de desplazamiento. Supongo que tengo acceso a los registros de tráfico de red de mi víctima, como el administrador de la intranet de una empresa. Ahora, imagínalo existía un extenso documento de recursos humanos Qué hacer si te resulta... y una lista de como agotamiento, ansiedad, etc. Puedo colocar un píxel de seguimiento junto a cada elemento del lista. Si luego determino que la carga del documento coincide temporalmente con la carga del junto al elemento de agotamiento, entonces puedo, como administrador de intranet, determinar que un empleado hizo clic en un vínculo de un fragmento de texto con :~:text=burn%20out, y el empleado haya asumido que era confidencial y que nadie la veía. Como este ejemplo es, diseñada para comenzar y, dado que su explotación requiere que se cumplan condiciones previas muy específicas, el equipo de seguridad de Chrome evaluó el riesgo de implementar la navegación con desplazamiento para que sea manejable. Otros usuarios-agentes pueden decidir mostrar un elemento de la IU con desplazamiento manual en su lugar.

Para los sitios que desean inhabilitar esta opción, Chromium admite un Política del documento valor de encabezado que puedan enviar para que los usuarios-agentes no procesen las URLs de fragmentos de texto.

Document-Policy: force-load-at-top

Cómo inhabilitar fragmentos de texto

La forma más sencilla de inhabilitar la función es usar una extensión que pueda inyectar una respuesta HTTP encabezados, por ejemplo, ModHeader (no es un producto de Google), para insertar un encabezado de respuesta (no solicitud) de la siguiente manera:

Document-Policy: force-load-at-top

Otra forma de inhabilitarlo, que está más involucrada, es mediante el uso de la configuración empresarial ScrollToTextFragmentEnabled Para hacerlo en macOS, pega el siguiente comando en la terminal.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

En Windows, sigue la documentación del Asistencia de la Ayuda de Google Chrome Enterprise .

Fragmentos de texto en la búsqueda web

En algunas búsquedas, el motor de búsqueda Google proporciona una respuesta rápida o un resumen con una de un sitio web relevante. Estos fragmentos destacados tienen más probabilidades de aparecer durante una búsqueda es en forma de pregunta. Cuando un usuario hace clic en un fragmento destacado, se lo dirige directamente a él del texto del fragmento en la página web de origen. Esto funciona gracias a las URLs de fragmentos de texto creadas automáticamente.

La página de resultados del motor de búsqueda de Google que muestra un fragmento destacado. La barra de estado muestra la URL de Text Fragments.
Después de hacer clic, se muestra la sección relevante de la página.

Conclusión

La URL de fragmentos de texto es una función potente que permite vincular a texto arbitrario en páginas web. El académico puede usarlo para proporcionar vínculos de referencia o citas de alta precisión. Los motores de búsqueda pueden usar para crear vínculos directos a resultados de texto en páginas. Los sitios de redes sociales pueden usarlo para permitir que los usuarios pasajes específicos de una página web, en lugar de capturas de pantalla inaccesibles. Espero que empieces uso de URLs de fragmentos de texto y las considero tan útiles como yo. Asegúrate de instalar Navegador Vínculo al fragmento de texto .

Agradecimientos

Nick Burris implementó y especificó fragmentos de texto, y David Bokan, con contribuciones de Grant Wang. Agradecemos a Joe Medley por la revisión exhaustiva de este artículo. Imagen hero de Greg Rakozy en Retiro: