Розповідаємо, як зробити так, щоб основний вміст не перекривався липкими хедерами. Для цього скористаємось властивістю scroll-padding елемента <html>.
Що таке посилання для пропуску?
Посилання для пропуску (або skip link) дозволяє перемикати групи інтерактивних елементів за допомогою клавіатури. Ви можете так робити на багатьох сайтах — просто натискаєте клавішу Tab і переносите фокус на посилання й кнопки на сторінці. Так можна користуватись навігацією на сайтах без мишки.
Примітка: Якщо ви користуєтеся macOS, можливо, вам доведеться ввімкнути «Переміщуйте фокус між елементами керування за допомогою клавіатури», перш ніж ви зможете переносити фокус на елементи керування (як-от на посилання для пропуску).
Вебсайти застосовують цю техніку, щоб трохи полегшити життя людям, які залежать від користування клавіатурою або допоміжними технологіями. Посилання для пропуску застосовує функцію, вбудовану у браузер. Для неї потрібні лише якір (прив'язка), що вказує на ідентифікатор на сторінці (наприклад, <a href="#main">), та елемент із цим ідентифікатором (наприклад, <main id="main">). Активація якоря перемістить фокус на цільовий елемент.
Це зручно й тому, що наступне натискання клавіші Tab перенесе фокус на перший доступний для цього елемент (наприклад, на посилання, кнопку або поле форми) у цільовому елементі. Так можна переходити між повторюваними, доступними для фокусування, елементами (наприклад, навігаційними посиланнями), звідси й назва.
Як зробити, щоб посилання для пропуску працювало з липкими хедерами?
Проблемою цієї техніки є те, що типово цільовий елемент прокручується до верхньої частини області перегляду (viewport) після переходу до нього. Це проблема, якщо на сторінці є фіксований елемент, наприклад, липкий хедер, який закриває верхню частину області перегляду. На щастя, існує властивість CSS, яка це виправить: scroll-padding!
scroll-padding визначає зміщення, які дозволяють вам повідомляти браузеру, які частини вашої сторінки закриті іншими елементами інтерфейсу (наприклад, «липкий» хедер). scroll-padding — це скорочена властивість, як і padding та margin. Це означає, що ви також можете користуватися розширеною версією для визначення конкретних сторін, наприклад: scroll-padding-top: 2em;.
Щоб скористатися scroll-padding, нам потрібно знати, скільки відступити. Припустимо, липкий хедер на сторінці має висоту 5rem. Щоб браузер пропустив цю частину, коли він обчислює, куди прокрутити сторінку, ми застосуємо scroll-padding-top: 5rem;.
Примітка: ви можете користуватися іншими одиницями виміру.
Визначений для scroll-padding відступ буде застосовано до «контейнера прокручування», до якого він доданий. Цим контейнером буде елемент <html> для пропуску посилань.
Код
Наш CSS матиме схожий вигляд:
html {
scroll-padding-top: 5em;
}
HTML:
<html>
<header>
<a href="#main-content">Skip to main content</a>
</header>
<main id="main-content" tabindex="-1">
<h1>Fancy title for your content</h1>
</main>
</html>
Якщо хочете, ви можете побавитися з оригінальною статтею на Codepen. Ви також можете прочитати коментарі авторки у примітках файлу CSS.
Примітка: tabindex="-1" на елементі основного вмісту не потрібен для роботи посилання для пропуску. Однак ця властивість необхідна, щоб отримати анімоване фокусування.
Результат
Якщо зробити все правильно, наш заголовок (або інший вміст) більше не розрізатиметься навпіл, коли активується посилання для пропуску!
Підтримка браузерами
Працює у всіх найпопулярніших браузерах, окрім Internet Explorer 11.
Чи можуть браузери обчислити цей відступ для нас?
Якщо коротко, то «мабуть, ні», але було б чудово, якби вони це могли.
У специфікації CSS Scroll Snap, в якій визначено scroll-padding, згадується значення auto, яке спочатку може здатися корисним. Але виявляється, що auto — це лише стандартне значення кроку прокручування scroll-padding:
[auto] вказує, що зміщення для відповідного краю scrollport визначає User Agent. Зазвичай це значення дорівнює 0px, але User Agent може застосувати евристику, щоб виявити, коли доцільно застосувати ненульове значення.
Це формулювання означає, що хоч браузери й можуть обчислювати та змінювати значення з 0px на інше для scroll-padding, але вони майже ніколи цього не робитимуть.
З огляду на це вам варто самостійно вказувати значення scroll-padding. Можливо, колись це зміниться.
Ще немає коментарів