Скроллим страницу к фрагменту текста

Традиционно, если вы хотите создать ссылку на часть страницы, вы должны указать свой 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уффикс можно использивать аналогичным образом.

Материал взят из источников: Оригинал статьи, Спецификация.