Sobre cómo agregar identificaciones a los encabezados

 

 

 

Aquí hay una revisión de dos segundos. Si un elemento tiene un ID, puede vincularlo con el comportamiento natural del navegador. Es genial si los títulos los tienen, porque a menudo es útil vincular directamente a una sección específica de contenido.

h3Step 2/a

Si así lo quisiera, podría vincular directamente a este encabezado, ya sea desde una URL, como https://my-website.com/#step-2, o un vínculo en la página, como:

a href="#step-2"Jump to Step 2/a

Por lo tanto, es ideal si todos los encabezados tienen ID únicos.

Sin embargo, me parece demasiado trabajo agregar manualmente ID a todos mis encabezados. Durante años y años, lo hice así usando jQuery en este mismo sitio (demándame):

 

// Adjust this for targetting the headers important to have IDsconst $headers = $(".article-content h3");$headers.each((i, el) = { const $el = $(el); // Probably a flexbox layout style page if ($el.has("a").length != 0) { return; } let idToLink = ""; if ($el.attr("id") === undefined) { // give it ID idToLink = "article-header-id-" + i; $el.attr("id", idToLink); } else { // already has ID idToLink = $el.attr("id"); } const $headerLink = $("a /", { html: "#", class: "article-headline-link", href: "#" + idToLink }); $el.addClass("has-header-link").prepend($headerLink);});

Ese script va un paso más allá de simplemente agregar ID (si aún no tiene uno) al agregar un #enlace dentro del encabezado que enlaza con ese encabezado. El objetivo de esto es demostrar que los encabezados tienen ID y facilitan hacer cosas como hacer clic derecho en copiar un enlace. Aquí está esa demostración , si quieres verla.

¡Problema! De repente esto dejó de funcionar.

No el guión en sí, funciona bien. Pero el comportamiento nativo del navegador que le permite saltar al encabezado cuando se carga la página es lo que está roto. Me imagino que es una condición de carrera:

  1. Llega el HTML
  2. La página comienza a renderizarse.
  3. El navegador busca el ID en la URL para desplazarse hacia abajo
  4. No lo encuentra…
  5. ¡Oh, espera, ahí está!
  6. Desplácese hasta allí.

¡ Oh, espera, ahí está! El paso es desde el script ejecutando y poniendo esa ID en el encabezado. Realmente no culpo a los navegadores por no saltar a enlaces insertados dinámicamente. Me sorprende que esto haya funcionado durante tanto tiempo.

Es mucho mejor tener los ID en los títulos cuando llegue el HTML. Este sitio es WordPress, así que sabía que podía hacerlo con algún tipo de filtro de contenido. Resulta que ni siquiera tuve que molestarme porque, por supuesto, hay un complemento para eso: Add Anchor Links de Karolína Vyskočilová . Funciona muy bien para mí. Su técnica es que agrega la identificación en el enlace de anclaje, lo cual también está totalmente bien. Supongo que esa es otra forma de evitar alterar las identificaciones existentes. Blog quiniela

Si no tuviera WordPress, habría encontrado otra forma de procesar el lado del servidor HTML para asegurarme de que haya algún tipo de enlace de encabezado de alguna manera. Siempre hay una manera. De hecho, si fuera demasiado extraño o engorroso o lo que fuera hacer durante el proceso de compilación o en un filtro del lado del servidor, consideraría hacerlo en un trabajador de servicio. Me he divertido jugando con HTMLRewriter de Cloudflare , que es totalmente capaz de hacer esto.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Sobre cómo agregar identificaciones a los encabezados

Sobre cómo agregar identificaciones a los encabezados

Aquí hay una revisión de dos segundos. Si un elemento tiene un ID, puede vincularlo con el comportamiento natural del navegador. Es genial si los títulos lo

programar

es

https://pseint.es/static/images/programar-sobre-como-agregar-identificaciones-a-los-encabezados-1564-0.jpg

2024-06-13

 

Sobre cómo agregar identificaciones a los encabezados
Sobre cómo agregar identificaciones a los encabezados

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences