Псевдо-класс :target относится к элементу внутри документа, идентификатор которого указан в URL-адресе после символа #. Например, этот фрагмент текста обернут в тег <mark>, который имеет идентификатор #target-test. Если вы перейдете по URL, http://www.webmasters.by/articles/html-coding/3484-target-trick.html#target-test, то к этому элементу и будут применены стили, определенные для псевдо-класса :target этого элемента.
Используя этот псевдо-класс, мы можем, например, создать различные интерактивные элементы на странице без необходимости использования JavaScript. Вот несколько подобных примеров.
Пример 1 - Скрытие и отображение контента
Простой вариант использования псевдо-класса :target, это просто скрыть и показать целевой элемент. Например, в блоге, мы не хочем, чтобы раздел комментариев отображался до тех пор, пока пользователь не кликнет на ссылку "Показать комментарии". Для достижения этой цели мы можем просто скрыть элемент, если он не является :target.
HTML
<p><section id="comments">
<h3>Комментарии</h3>
<!-- Комментарии здесь... -->
<a href="#">Спрятать Комментарии</a>
</section>
CSS
display: none;
}
#comments:target {
display: block;
}
Пример 2 - Выдвижная панель навигации
Другой вариант использования :target - это создание выдвижной панели навигации. Мы можем зафиксировать панель навигации относительно окна просмотра, чтобы убедиться, что панель не будет прыгать, когда пользователь нажимает кнопку, чтобы её открыть.
position: fixed;
top: 0;
height: 100%;
width: 80%;
max-width: 400px;
}
#nav:not(:target) {
right: -100%;
transition: right 1.5s;
}
#nav:target {
right: 0;
transition: right 1s;
}
Пример 3 - Модальное всплывающее окно
Идем дальше, теперль попробуем создать модальное окно, который будет перекрывать всю страницу.
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
width: 70%;
background: #fff;
padding: 20px;
text-align: center;
}
#modal-container:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
}
#modal-container:target {
opacity: 1;
visibility: visible;
transition: opacity 1s, visibility 1s;
}
Как видим, ничего сложного.
Пример 4 - Изменение глобальных стилей
Самый простой вариант использования - это применить :target к элементу <body>, и полностью изменить стили и расположение элементов на странице.
main { width: 60%; }
aside { width: 30%; }
.show-sidebar-link { display: none; }
}
#body:target {
main { width: 100%; }
aside { display: none; }
.hide-sidebar-link { display: none; }
}
Является ли это способ правильным с точки зрения семантики и доступности?
Когда используется элемент <a>, браузер ожидает, что пользователь будет переходить на другую страницу или в другой раздел на странице. В этих примерах (за исключением последнего), так по сути и происходит. Единственная особенность заключается в том, что целевой элемент скрыт и отображается динамически.
Есть две возможных проблемы с этим подходом:
- Происходят изменения в URL, которые влияют на историю браузера пользователя. Это означает, что если пользователь нажмет кнопку "назад" в браузере, то он может непреднамеренно перейти к целевому элементу.
- Для того, чтобы "закрыть" целевой элемент, пользователь должен перейти либо к другому элементу или просто к #. Последний вариант, который я использовал в примерах, не самый семантический и заставит пользователя перейти к началу страницы, даже если он находился не там.
Тем не менее, если использовать это правильно, этот метод может быть, по крайней мере, запасным вариантом, чтобы обеспечить интерактивность для пользователей, если JavaScript не вариант. В некоторых случаях, как в первом примере, это может быть даже предпочтительнее и проще, чем при использовании JavaScript. Как всегда, это зависит от сценария.
Перевод статьи с bitsofco.de
ВКонтакте
Подробнее...