Глибокі посилання без ID: нова функція для сучасних браузерів

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Тепер усі основні браузери підтримують функцію створення посилань на текстові фрагменти. Більше не потрібно додавати ID до елементів, щоб перейти до потрібного місця на сторінці.

Ось приклад такого посилання.

Як бачимо, це посилання одразу веде до обраного фрагмента тексту, що значно спрощує навігацію.

Хоча синтаксис #:~: виглядає трохи незвично, користуватися ним дуже просто. Наприклад, у браузерах на основі Chromium є опція «Copy Link to Highlight». Достатньо виділити потрібний текст, натиснути правою кнопкою миші й обрати цю опцію.

Підтримувані браузери можуть самостійно вирішувати, як привернути увагу до пов’язаного тексту, наприклад, за допомогою підсвічування кольором чи прокрутки до відповідного вмісту на сторінці. Це корисно, адже дає змогу авторам веб-контенту створювати глибокі посилання на сторонній контент, який вони не контролюють, не потребуючи ідентифікаторів для реалізації цього.

Однак цей елемент можна трохи стилізувати за допомогою::target-text, що додає інструменту ще більше гнучкості та зручності.

Також залишу для вас тут послання на офіційну документацію.

👍ПодобаєтьсяСподобалось10
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Завжди будь ласка, Олександре! Радий бути корисним! 😊

ще було б, у деяких юзкейсах, мати можливість рамкою виділити область на сторінці і відкрити у окремих табах/вікнах усі лінки, які потрапили в область рамки

Дякую, не знав, тепер буду використовувати.

Досить часто виникає бажання зробити подібне посилання для зручності співрозмовника.

Радий, що мій допис був корисним для Вас 😊

Підписатись на коментарі