Что такое target в css. Событие click на чистом CSS без:target. Как сделать гиперссылку в HTML с помощью href

Сегодня мы поговорим об основных функциях, связанных с псевдоклассом :target и о том, как вы можете использовать его для создания потрясающих эффектов на чистом CSS, научимся создавать слайд-шоу при помощи css и многое другое.

Что такое: target?

h1 { font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } h1: target { font-size: 50px; text-decoration: underline; color: #37aee4; }

Добавим анимацию

Давайте оживим наш эффект и добавим немного анимации, например, миленький перехода для изменения цвета. Смотрите, как это работает .

h1 { font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } h1:target { font-size: 50px; text-decoration: underline; color: #37aee4; }

Управление нецелевыми объектами

Скажем, мы хотим изменить стили абзаца, который идет после выбранного заголовка.

Сделать это очень просто при помощи следующего кода. Смотрите демо .

h1: target + р { background: #f7f7f7; padding: 10px; }

Создание простого слайд-шоу при помощи CSS

Разработчики придумали тонны приложений с использованием псевдокласса : target . Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.

Для создадим неупорядоченный список. Каждый элемент списка будет содержать якорь тега, указывающего на идентификатор фрагмента и изображение с соответствующим идентификатором.

• One
• Two
• Three
• Four
• Five

Теперь добавим наши стили:

* { margin: 0px; padding: 0px; } #slideshow { margin: 50px auto; position: relative; width: 400px; } ul { list-style: none; } li { float: left; overflow: hidden; margin: 0 20px 0 0; } li a { color: #222; text-decoration: none; font: 15px/1 Helvetica, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } li a:hover { color: #50b0df; } li img { position: absolute; top: 50px; left: 0; z-index: -1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } li img:target { z-index: 1; } li img:not(:target) { opacity: 0; }

Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.

Далее, установим z-index: -1 для всех изображений, а затем установите z-index: 1 для целевых изображений. Это приведёт к тому, что когда вы нажимаете на элемент списка, изображение изменяется. Чтобы сделать переход более плавным, мы установим значение непрозрачность для других изображений 0 .

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

Кроссбраузерность

Псевдокласс : target является селектором CSS третьего уровня , это значит, что он поддерживается в практически любом браузере, за исключением (не за что не догадаетесь ) ... IE. Старый добрый ослик поддерживает CSS3-селекторы только в 9-ой и 10-ой версиях.

Как и любую другую проблемой отображения CSS3- селекторов в IE , это довольно легко исправить при помощи Selectivizr .

Благодаря этому плагину и магии вуду, нужные CSS3-селекторы будут поддерживаться даже в IE6.

Заключение

Поначалу использование псевдоклассов может показаться сложным, но зачем вы поймёте, как они могут облегчить работу и сделать сайт более интересным. Псевдоселектор

:target -хороший тому пример. Только убедитесь, что вы не переборщили со стилями.

Ещё один интересный пример использования :target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . В XHTML применение этого атрибута запрещено.

Синтаксис

...

Обязательный атрибут

Значения

В качестве значения используется имя окна или фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

Blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .

Значение по умолчанию

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .

HTML5 IE Cr Op Sa Fx

Открыть в новом окне

Псевдо класс:target является одной из замечательных особенностей CSS3. Он соответствует элементу, на который указывает идентификатор в URI документа.

Идентификатор в URI содержит символ “#”, за которым следует имя идентификатора, соответствующее значению атрибута id элемента в документе.

Поддержка

Так как мы говорим о CSS3, то псевдо класс поддерживается всеми современными браузерами, за исключением IE версий с 6 по 8. Обычное разочарование не должно останавливать вас в решении использовать:target. Уже IE9 поддерживает псевдо класс:target .

Как использовать:target?

Данный псевдо класс может иметь свой собственный стиль, так же как и псевдо классы :hover , :active или :focus для ссылок. Так же как и упомянутые псевдо классы :target используется при определенных действиях с веб сайтом. Особенно, когда используется идентификатор фрагмента, например, такой: http://example.com/index.html#lorem-ipsum .

Демонстрация

На демонстрационной странице приведен вполне наглядный пример того, как и когда использовать :target . Псевдо класс :target может улучшить уровень удобства использования вашего ресурса.

Разметка HTML

Ниже приводится пример из демонстрации. У нас есть 4 ссылки и такое же количество блоков. Каждая группа имеет свой уникальный идентификатор.

• Блок 1
• Блок 2
• Блок 3
• Блок 4

CSS

Следующий код CSS позволяет добиться нужного эффекта, с помощью которого выделяется блок с соответствующим идентификатором (появляется тень вокруг прямоугольника).

/* Добавляем немного пространства */ ul, div { margin-bottom: 10px; } /* Cтиль блока по умолчанию */ div { padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border-radius: 5px; } /* Изменяем вид вывода при соответствии */ div:target { border-color: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px #9c9c9c; box-shadow: 0 0 4px #9c9c9c; }

Ниже представлен результат действия кода. Если нажать на ссылке, то соответствующий блок выделяется и становится активным.

Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target . Но что если его нельзя использовать? Есть другой метод.

Посмотрите демонстрацию. Она полностью выполнена на CSS, ни строчки кода JavaScript. В основе лежит оригинальное использование селекторов:active и:hover.

Описание

Сначала нужно создать контейнер, который будет содержать кнопку и блоки, выводимые по нажатию мыши. Структура разметки будет примерно такой:

Нужно сделать.content невидимым до тех пор, пока не нажата кнопка мыши на.wrapper . Для решения задачи установим для.content свойство display: none . Затем при нажатии кнопки мыши на.wrapper , будем включать для.content свойство display: block . Для чего установим для.wrapper:active .content свойство display: block . В таком состоянии.content будет видим только когда кнопка мыши нажата. Если ее отпустить, .content снова исчезнет. Для фиксации сделаем так, чтобы при нахождении курсора мыши над.content , элементу присваивалось свойство display: block . То есть устанавливаем для.content:hover свойство display: block . Код CSS будет иметь вид:

Content { display: none; } .wrapper:active .content { display: block; } .content:hover { display: block; }

Остается только "причесать" внешний вид и придать ему наглядности:

Wrapper { position: relative; } .button { background: yellow; height: 20px; width: 150px; } .content { position: absolute; padding-top: 20px; } .content li { background: red; }

Текст кнопки в выше приведенном коде будет иметь желтый фон, а выводимая по нажатию кнопки мыши информация - красный фон.

Псевдокласс:target (цель) выбирает тот элемент в документе, на который указывает фрагмент URL. Например, этот фрагмент текста обернут элементом с ID #target-test . Если вы перейдете по ссылке , то этот элемент станет целью и стили псевдокласса:target начнут действовать.

В прошлом году я уже писала о псевдоклассе:target в статье 5 малоиспользуемых селекторов CSS (и их применение) . Первым примером было использование псевдокласса:target для подсветки раздела страницы, на который совершен переход. Это может быть, например, добавление фонового цвета или границы, как в примере с .

Но недавно я пришла к выводу, что мы можем использовать псевдокласс:target с большей пользой, создавая на странице интерактивные элементы без JavaScript.

Пример №1: скрытие и показ содержимого

Простым примером использования псевдокласса:target будет скрытие и показ содержимого, на которое мы нацелились. В блоге мы можем таким образом показывать раздел с комментариями после клика пользователя. Это делается простым скрытием элемента до тех пор, пока тот не подпадает под:target .

Show Comments #comments:not(:target) { display: none; } #comments:target { display: block; }

Пример №2: выдвигающаяся навигация

Следующий пример это создание выдвигающейся панели навигации. Мы помещаем панель навигации фиксированно относительно области видимости, чтобы обеспечить отсутствие скачков после клика пользователя.

#nav { 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: всплывающее модальное окно

Развивая эту идею, мы можем создать модальное окно, заполняющее страницу целиком.

#modal-container { 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:not(:target) { main { width: 60%; } aside { width: 30%; } .show-sidebar-link { display: none; } } #body:target { main { width: 100%; } aside { display: none; } .hide-sidebar-link { display: none; } }

Как насчет семантики и доступности?

Как я уже упоминала в статье “Ссылки или кнопки” , при использовании элемента браузер ожидает переход на другую страницу или другой раздел страницы. В моих примерах (кроме последнего) именно это и происходит. Трюк только в том, что в обычном состоянии стилизуемый элемент скрыт, он динамически появлется только в нацеленном состоянии.

Насколько я могу сказать, у этого метода есть два потенциальных недостатка:

1. Меняется URL, что влияет на историю браузера. Это значит, что при переходе пользователя “назад”, он может непреднамеренно перейти к целевому элементу.
2. Для закрытия целевого элемента пользователю надо перейти к другому элементу или просто к # . Последний вариант (который я использую в своих примерах) не является семантичным и может перенаправить пользователя к началу статьи, к чему пользователь может быть не готов.

Тем не менее, при корректном использовании этот метод можно использовать, как минимум, в качестве запасного варианта взаимодействия для пользователей с отключенным JavaScript. В некоторых случаях, как в первом примере, это даже может быть предпочтительнее и проще, чем использование JavaScript. Как всегда, это зависит от каждого конкретного случая.