Творческое использование селектора псевдо-класса :target

Что есть :target?

Говоря по простому, :target есть pseudo-class (псевдо-класс), который направлен на часть идентификатора в адресе URI документа.

Рассмотрим следующий URI:

http://example.com/example.php#references

 
Теперь допустим, что ваша таблица стилей содержит следующее определение:

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

 
Если пользователь сделает переход по адресу url http://example.com/example.php#references, то элемент с идентификатором references получит свойства по определениям target и определённый выше стиль будет применён к указанному элементу.

Что касается совместимости с броузерами, то :target полностью поддерживается Chrome 4+, Firefox 3.5+, IE 9+, Opera 9.5+ and Safari 3.2+.

Хватит теории и посмотрим, как селектор :target может быть вам полезен.

Модальные всплывающие окна

modal[1]
Модальные всплывающие окна очень популярны на многих вэб-сайтах: показать сообщение читателям, сделать подписку для рассылки и многое другое. А знаете ли Вы, как легко можно сделать модальные окна на чистом CSS, используя селектор :target псевдо-класса? Прочитайте подробную статью и посмотрите «живой» пример. Вы не будете разочарованы!
«Живой» примерПодробная статья

Фокусировка контента с селектором :target

summary[1]

Практически это самое естественное применение селектора псевдо-класса :target. Хорошим примером здесь является Wikipedia, где target используется для подсветки контента.
«Живой» примерПодробная статья

Слайдшоу с чистой CSS анимацией

slideshow[1]
Помните те времена, когда создание слайд-шоу изображений было трудоёмкой задачей с обязательным использванием JavaScript? Теперь с CSS3 красивое слайд-шоу легко и просто сделать без JavaScript. Впечатляющий пример с селектором :target Вы можете посмотреть в примере .
«Живой» примерПодробная статья

Слайд-панель навигации

drawer[1]

Меню на слайд-панели навигации стало самым популярным, особенно на мобильных сайтах (mobile websites). Фактически это самый простой способ компактного меню для любого сайта. Используя :target, навигацю можно сделать на чистом CSS. Любой разработчик должен опробовать этот интересный метод прямо сегодня.
«Живой» примерПодробная статья

Лайтбокс на чистом CSS3

lightbox[1]
Вау, этот пример демонстрирует всю мощь CSS3: лайтбокс со множеством эффектов без JavaScript и интересное применение :target.
«Живой» примерПодробная статья

Источник перевода: CREATIVE USES OF THE CSS :TARGET PSEUDO CLASS SELECTOR

CC BY-NC 4.0 Творческое использование селектора псевдо-класса :target, опубликовано waksoft, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


1 нравится это

Добавить комментарий