Как и _parent
, значение _top
относится к фреймам. С помощью
можно создать фреймы внутри фреймов с многоуровневой иерархией. _top
отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.
Framename
Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target
. Например, открывается во фрейме с именем frame1
, то есть
Символ подчёркивания
Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank»
, то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ
и разместите на нем код следующей ссылки:
ltconsulting.co.uk
ltconsulting.co.uk/contact-us
Это связано со значением framename
, которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank
” интерпретируется как значение типа framename
. В случае если framename
указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank
”.
Чтобы избежать этой проблемы, для ключевых слов значений было добавлено нижнее подчеркивание. Вот откуда взялось _blank
.
Данная публикация представляет собой перевод статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE
» , подготовленной дружной командой проекта
Сегодня мы поговорим об основных функциях, связанных
с псевдоклассом :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
. Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.
Для создадим неупорядоченный список. Каждый элемент списка будет содержать якорь тега, указывающего на идентификатор фрагмента и изображение с соответствующим идентификатором.
Теперь добавим наши стили:
* {
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
Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo
происходит переход к элементу, атрибут id
которого задан как target-pseudo
. Такая запись адреса называется «целевой элемент». Псевдокласс :target
применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.
Обозначения
Описание
Пример
<тип>
Указывает тип значения.
<размер>
A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count
Группирует значения.
[ crop || cross ]
*
Повторять ноль или больше раз.
[,<время>]*
+
Повторять один или больше раз.
<число>+
?
Указанный тип, слово или группа не является обязательным.
inset?
{A, B}
Повторять не менее A, но не более B раз.
<радиус>{1,4}
#
Повторять один или больше раз через запятую.
<время>#
×
Пример
target
История 1
История о том, как необходимо было сделать могилу,
ее начали копать, а потом закапывать, и что из этого получилось.
История 2
История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.
В данном примере целевой элемент выделяется цветом фона.
Примечание В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).
Спецификация Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация
) - спецификация одобрена W3C и рекомендована как стандарт. Candidate Recommendation (Возможная рекомендация
) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта. Proposed Recommendation (Предлагаемая рекомендация
) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения. Working Draft (Рабочий проект
) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом. Editor"s draft (Редакторский черновик
) - черновая версия стандарта после внесения правок редакторами проекта. Draft (Черновик спецификации
) - первая черновая версия стандарта.
×
Браузеры В таблице браузеров применяются следующие обозначения.
Псевдо класс: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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.
Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.
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;
}
Ниже представлен результат действия кода. Если нажать на ссылке, то соответствующий блок выделяется и становится активным.
Псевдокласс: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; }
}
Как насчет семантики и доступности? Как я уже упоминала в статье “Ссылки или кнопки” , при использовании элемента браузер ожидает переход на другую страницу или другой раздел страницы. В моих примерах (кроме последнего) именно это и происходит. Трюк только в том, что в обычном состоянии стилизуемый элемент скрыт, он динамически появлется только в нацеленном состоянии.
Насколько я могу сказать, у этого метода есть два потенциальных недостатка:
Меняется URL, что влияет на историю браузера. Это значит, что при переходе пользователя “назад”, он может непреднамеренно перейти к целевому элементу. Для закрытия целевого элемента пользователю надо перейти к другому элементу или просто к # . Последний вариант (который я использую в своих примерах) не является семантичным и может перенаправить пользователя к началу статьи, к чему пользователь может быть не готов.
Тем не менее, при корректном использовании этот метод можно использовать, как минимум, в качестве запасного варианта взаимодействия для пользователей с отключенным JavaScript. В некоторых случаях, как в первом примере, это даже может быть предпочтительнее и проще, чем использование JavaScript. Как всегда, это зависит от каждого конкретного случая.