Скроллим страницу к фрагменту текста
Maksym PohribniakТрадиционно, если вы хотите создать ссылку на часть страницы, вы должны указать свой URL, затем хеш (#) и затем идентификатор (якорь) этой конкретной части.
Но это не всегда возможно, особенно если вы ссылаетесь на веб-сайт, к исходному коду которого вы не имеете доступа.
Сегодня мы поговорим о возможности создать функционал якоря, не имея его на самом деле на веб странице.
Функция прокрутки до фрагмента добавляет поддержку для указания фрагмента текста в фрагменте URL. При переходе по URL-адресу с таким фрагментом браузер может быстро выделить и/или обратить на него внимание пользователя.
Одним из примеров использования является Google Search.
Когда вы что-то ищете и нажимаете на результат, Google использует текстовые фрагменты, чтобы выделить текст, который, по мнению Google, является ответом на ваш поисковый запрос.
Выделенный текст обычно выделяется ярко-желтым цветом выделения, что, безусловно, заметно.
Перейдя по данной ссылке вы увидите следующий результат:
Поддержка браузерами
В настоящее время текстовые фрагменты поддерживаются в браузерах на основе Chromium более ранней версии 80, включая Edge 83, а также поддерживаются в браузерах Opera 68 и Android. И не поддерживается в Firefox и Safari.
Как использовать фрагменты текста
Директива фрагмента текста использует следующий формат:
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
Все что записано в квадратных скобках - опционально. Разберемся как его использовать на примерах ниже:
Возьмем ссылку на конкретную страницу (страница про ссылки в MDN):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/A
Мы хотим отправить пользователя не просто на саму страницу, а к данной секции:
К ссылке нам нужно добавить директиву текстовых фрагментов
#:~:text=
И после символа "=" текст, к которому мы прокрутим страницу и подсветим.
Skip links
Браузер сам применит кодирование к данному контенту из-за ограничений на передачу только алфавитно-цифровых символов ASCII.
Кодировка URL заменяет небезопасные символы ASCII на "%", за которыми следуют две шестнадцатеричные цифры. URL-адреса не могут содержать пробелы. Кодировка URL обычно заменяет пробел со знаком плюса (+) или с %20.
При таком кодировании строчка "корова" будет иметь вид: %D0%BA%D0%BE%D1%80%D0%BE%D0%B2%D0%B0. То есть русской букве к будет соответствовать последовательность %D0%BA и.т.д. Такое кодирование является общепринятым для путей к файлам или папкам, входящим в URL. Полный адрес ссылки будет выглядеть так:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/A#:~:text=Skip%20links
Ссылка выше кликабельна.
textStart и textEnd
В предыдущем примере нам удалось создать ссылку на заголовок на веб-странице без использования тега ID. Однако, если мы хотим выделить весь параграф? Было бы нецелесообразно помещать весь текст в URL. Вместо этого мы можем использовать синтаксис textStart и textEnd, чтобы указать, с чего начать выделение и где закончить. Между textStart и textEnd нам просто нужно добавить запятую.
Чтобы выделить весь блок текста в данном примере:
Нужно использовать ссылку следующего типа:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/A#:~:text=Skip%20links,until%20focused
В наших примерах до сих пор было довольно легко использовать текстовые фрагменты для ссылки на определенную часть страницы. Однако, одна из проблем с приведенными выше примерами заключается в том, что URL-адрес постепенно становится немного длиннее. Избажать этого позволяют следующие параметры:
prefix- и -suffix
Мы можем использовать параметры префикса и суффикса, чтобы сказать, какое слово должно стоять перед или после слова (слов), которое мы пытаемся выделить. Используем префикса "a-".
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/A#:~:text=a-,skip,until
Так как у нас есть несколько слов "skip", мы указываем, что выделить нужно именно то, которое стоит после буквы "a". А не в заголовке.
Cуффикс можно использивать аналогичным образом.
Материал взят из источников: Оригинал статьи, Спецификация.