TGViewer
Веб-страница Веб-страница @tproger_web · 22.5K subscribers
Post #6461 1.75K
Подсветка фрагментов текста без единого лишнего span в разметке

Люди страницу не читают, а сканируют, поэтому подсветка нужных кусков работает. В CSS для этого целое семейство псевдоэлементов: ::selection для выделенного мышью текста, ::target-text для перехода из поиска и самый гибкий из них, ::highlight(), который красит произвольный фрагмент по вашему выбору.

Подкупает то, что оборачивать текст в разметку не надо: диапазон задаётся в JavaScript, а стили живут в CSS. В DOM не появляется ни одного лишнего узла, а значит, ничего не ломается ни в вёрстке, ни в доступности.

Поддержка пока не везде, поэтому Сюнками Фафовора показывает, как включать это через progressive enhancement: браузер без поддержки просто не покрасит, и страница останется рабочей.

#css
Piccalilli Working with ::highlight() using progressive enhancement Using a baseline of <mark> elements, Sunkanmi Fafowora helps you to understand how the new highlight API works with some progressive enhancement for good measure.
  • 🔥 5
More from @tproger_web
  1. Sep 20, 2026Как проверять CSS после рефакторинга с ИИ Пять ИИ-инструментов получили HTML и CSS карточк…
  2. Sep 20, 2026Как защитить списание кредитов в Django от гонки запросов У аккаунта один кредит. Два запр…
  3. Sep 20, 2026Как анимировать перестройку CSS Grid без JavaScript В разборе приёма содержимое каждой пли…
  4. Sep 19, 2026Как защитить API от повторной оплаты Клиент не получил ответ и повторил POST. Сервер мог у…
  5. Sep 19, 2026Как заблокировать отрисовку JavaScript, не останавливая HTML-парсер Когда компоненту нужно…
  6. Sep 19, 2026Почему box-shadow не заменяет outline для фокуса CSS-тень даёт больше свободы в оформлении…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →