CSS Практикум: Семантическая вёрстка вкладок — табов
На сайтах очень часто возникает необходимость группировки подобной информации. Например: характеристики товара, отзывы о нём, его фотографии или описание. С этой целью многие web – мастера используют «вкладки – табы (tabs)». Давайте на практике рассмотрим, как с помощью семантической вёрстки сделать логически связанные вкладки, и, используя арсенал CSS 3.0 красиво стилизовать их внешний вид (тени, скругления, динамические эффекты и т.п.). А также научим «запоминать» и «восстанавливать» активную вкладку после загрузки страницы, сделаем возможным для посетителя получение прямой ссылки на конкретную вкладку (чтобы он, например, мог с лёгкостью поделиться информацией, приведённой на вкладке, с друзьями, и последним не доводилось искать её в контексте страницы).
Рассмотрим на практике работу с различными css селекторами. Пример семантической вёрстки вкладок — табов к статье Вы можете посмотреть здесь.
Верстаем семантические вкладки с помощью списка определений (dl — dt — dd).
HTML:
<dl id="tabs" class="tabs">
<dt>CSS3 transitions</dt>
<dd>
<div>
<h3>
CSS3 transitions and 2D transforms
</h3>
<p>
For richer user interfaces it is often desirable to include some animation to make an effect smoother
or more appealing, or effects such as rotating elements and text. Traditionally in HTML pages the
primary means to add animations was to use JavaScript to adjust the desired CSS property value over a
given period of time. This works but can be slower as the JavaScript code is not hardware or software
accelerated. What's more, using JavaScript for animations creates more code to maintain. It has not
been possible to apply effects such as text at an angle without resorting to using images or SVG.
</p>
</div>
</dd>
<dt>
Pseudo-class :nth-of-type()
</dt>
<dd>
<div>
<h3>
Pseudo-class :nth-of-type()
</h3>
<p>
The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded
element name before it in the document tree, for any zero or positive integer value of n, and has a
parent element.
</p>
</div>
</dd>
<dt>Pseudo-classes :enabled </dt>
<dd>
<div>
<h3>Pseudo-classes :enabled</h3>
<p>The :enabled pseudo-class represents user interface elements that are in an enabled state. </p>
</div>
</dd>
<dt>Pseudo-class :last-child </dt>
<dd>
<div>
<h3>
Pseudo-class :last-child
</h3>
<p>The :last-child pseudo-class represents an element that is the last child of some other element.
Same as :nth-last-child(1).</p>
</div>
</dd>
</dl>
Свой выбор мы остановили на html теге dl – списке определений.
Тег dl – список определений:
Дочерние теги:
- dt – название термина;
- dd – следует за dt, может быть несколько, определение термина.
Используя для имен вкладок (наших определений) тег dt, а для содержимого тег dd — мы устанавливаем логические связи названий вкладок с их содержимым – один из приёмов той самой «семантической вёрстки».
Далее будем именовать список определений dl – родительским контейнером, элементы dt, dd – его дочерними элементами.
Так же будем именовать dt – вкладкой, dd, dd>div – содержимым вкладки согласно их назначению.
Присвоим списку определений dl id=»tabs» class=»tabs».
Верстаем css для вкладок:
Вначале зададим общее оформление родительскому элементу dl:
CSS:
.tabs{
margin: 15px auto;
padding: 0;
width: 90%;
position: relative;
min-width: 600px;
}
Зададим для содержимого вкладок dl.tabs динамическую ширину width: 90%;, но, чтобы избежать «сплющивания» содержимого вкладок на маленьких разрешениях экрана и при сворачивании окна, определим минимально возможную длину min-width: 600px; (в зависимости от Вашего дизайна).
Так как вкладки dt мы будем располагать с помощью абсолютного позиционирования, укажем контейнеру dl.tabs position: relative;.
Скроем содержимое dd наших вкладок , используя селектор для выборки исключительно дочерних элементов >:
CSS:
.tabs>dd{
display: none;
}
Но, после загрузки страницы, отобразим посетителю первую вкладку, для этого используем преимущество css правил, определённых с указанием id элемента, над css правилами, определёнными с указанием класса элемента (вот для чего мы задали тегу dl id и класс).
CSS:
#tabs>dt:first-child + dd{
display: block;
}
Разберём приведённый пример:
«показать» (display: block;) элемент dd (+ dd), который следует за первым дочерним элементом dt (dt:first-child)контейнера с id: #tabs (#tabs>dt:first-child)
Какие селекторы были использованы:
- > — выбрать только дочерние элементы (dt) в контексте указанного контейнера(dl);
- + — выбор следующего соседнего элемента (для dt -> dd согласно нашей вёрстке);
- :first-child – псевдо – класс, обозначающий первый дочерний элемент (dt:first-child) в контексте указанного контейнера #tabs (в нашем случае, первым дочерним элементом будет первый элемент dt в родительском контейнере #tabs).
Выполним сброс стилей (обнулим отступы) для всех дочерних элементов dt,dd:
CSS:
.tabs>dt,.tabs>dd{
padding: 0;
margin: 0;
}
По наведению мышки на контейнер .tabs скроем содержимое dd всех дочерних «вкладкок»:
CSS:
.tabs:hover>dd{
display: none;
}
Здесь мы использовали псевдо-класс :hover — указанные правила применяются к элементу по наведению мыши.
Отобразим содержимое dd вкладки, на которую наведен курсор мыши, используя преимущество правил указанных через id элемента, над правилами, указанными с использованием класса элемента.
CSS:
#tabs>dt:hover + dd,#tabs>dd:hover{
display: block;
}
Разберём приведённый пример:
«Показать» (display: block;) содержимое элемента dd (dt:hover + dd), который следует за дочерним элементом dtконтейнера id:#tabs, когда на вкладку dt наведен курсор мыши (dt:hover + dd), а так же «показать» содержимое дочернего элемента dd контейнера #tabs (#tabs>dd), в области которого находится курсор мыши (#tabs>dd:hover). Последнее правило требуется для того, чтобы содержимое вкладки «не пропадало», когда курсор мыши покидает вкладку dt и переходит к её содержимому dd.
Определяем внешний вид вкладок:
CSS:
#tabs>dt{
position: absolute;
cursor: pointer;
top: 0;
left: 1%;
width: 24.25%;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
o-text-overflow: ellipsis;
background: #fff;
border: 1px solid red;
border-bottom: none;
line-height: 20px;
font-size: 1em;
}
Позиционируем наши дочерние «вкладки» dt абсолютно, относительно верхнего левого угла контейнера dl: #tabs (position: absolute; top: 0; left: 1%;), задаем ширину и высоту вкладки dt (так как наших вкладок dt всего 4, то разделим 100% на 4 и отнимем 0.75% на отступы между вкладками dt, получаем ширину одной вкладки dt: width: 24.25%;). Приукрасим внешний вид вкладок dt: выровняем их содержимое по центру, запретим отображение содержимого, которое выходит за границы элемента (overflow: hidden;), и, если такое произошло, поставим автоматически троеточие за «урезанным» названием вкладки dt (text-overflow: ellipsis;) (а для большей совместимости с оперой: повторяем (o-text-overflow: ellipsis;)), запретим «перенос» содержимого на следующую строку (white-space: nowrap;),сменим стандартный курсор на курсор руки (cursor: pointer), подскажем посетителю что нужно «навести», «щелкнуть» по нашей вкладке dt.
При наведении мыши на «вкладку» dt изменим её фон и цвет подписи, а так же сделаем начертание шрифта полужирным:
CSS:
#tabs>dt:hover{
background: #ff0000;
color: #fff;
font-weight: bold;
}
Теперь с помощью применения селектора следующего элемента + установим поочерёдно положение на экране (левый отступ) для каждой вкладки dt:
Вторая вкладка dt:
CSS:
#tabs>dt:first-child + dd + dt{
left: 25.5%;
}
Разберём приведённый пример для второй вкладки dt:
Назначим «отступ» 25.5% от левого угла контейнера #tabs для второй вкладки dt, которая следует после содежимого dd первой вкладки dt(dt:first-child + dd + dt).
Третья вкладка:
CSS:
#tabs>dt:first-child + dd + dt + dd + dt{
left: 50%;
}
Четвёртая вкладка:
CSS:
#tabs>dt:first-child + dd + dt + dd + dt + dd + dt{
left: 74.5%;
}
Стилизуем содержимое (dd) вкладок :
CSS:
#tabs>dd{
width: 100%;
padding: 21px 0;
overflow: hidden;
}
Сделаем отступ от верхней границы в 21px (именно padding, а не margin, что позволит нам при выделении вкладки dt с помощью мыши одновременно выделять содержимое (dd>div) вкладки (#tabs>dt:hover + dd,#tabs>dd:hover).
И небольшой фикс для IE 7.0:
Разместите этот код в окружении условных комментариев в head секции страницы:
HTML:
<!--[if IE 7.0]>
<style type="text/css">
#tabs>dd>div{ margin-top: 21px;}
</style>
<![endif]-->
А теперь поработаем над визуализацией содержимого (dd>div) вкладок.
CSS:
#tabs>dd>div{
border: 1px solid red;
overflow: hidden;
padding: 20px 10px;
overflow: hidden;
}
Задаём отступы для дочерних div ов в дочернего содержимого dd контейнера #tabs (#tabs>dd>div), возьмём «в рамочку» (border: 1px solid red), и запретим показ содержимого за границами элемента (overflow: hidden).
Итак, мы создали вкладки (tabs, табы), при помощи css 2.1 и html вёрстки без javascript а, используя широкую практику селекторов, при этом наши вкладки имеют чёткие логические связи, организованные с помощью списка определений. В следующей статье мы рассмотрим стилизацию вкладок с помощью селекторов и возможностей CSS 3.0. А так же «позаботимся» о сохранении выделения активной вкладки, когда мышка не находится в области вкладок, и сохранения выделенной вкладки после перезагрузки страницы (возможностью добавления страницы с активной просматриваемой вкладкой в избранное).
Теперь займёмся стилизацией средствами css 3.0.
Если Вы заметили, в нашей вёрстке мы не указывали id и классы для вкладок dt, их содержимого dd, dd>div.
Примечание автора: данный подход к вёрстке применён с целью ознакомления читателя с широким кругом возможностей по выбору элементов с помощью селекторов CSS 2.1,3.0.
Возникает вопрос: как же применить стили для отдельных вкладок dt? Для их содержимого dd?
Декорируем Вкладки — табы
Приведём несколько примеров селекторов CSS 3.0, которые нам понадобятся:
- элемент:nth-of-type() – с помощью данного псевдо класса мы можем стилизовать элементы указанного типа по номеру (указанному в скобочках), так же в скобочках можно указать even – чётные элементы (2-4-6…),odd – нечётные (1-3-5), l – последний элемент указанного типа
- элемент:last-of-type – с помощью данного псевдо класса мы можем стилизовать последний элемент указанного типа
- элемент:first-of-type – с помощью данного псевдо класса мы можем стилизовать первый элемент указанного типа
Например, вот так мы можем назначить тёмно-серый фон для содержимого dd чётных вкладок:
CSS:
#tabs>dd:nth-of-type(even)>div{ background: #ccc;}
А вот так мы можем назначить светло-серый фон для содержимого dd нечётных вкладок:
CSS:
#tabs>dd:nth-of-type(odd)>div{ background: #E5E5E5;}
Или сделать «эффект смещения влево» третьей и второй вкладки dt при наведении мышкой:
CSS:
#tabs>dt:hover:nth-of-type(2){
width: 26%;
left: 23.5%;
}
#tabs>dt:hover:nth-of-type(3){
width: 26%;
left: 48%;
}
Назначим полупрозрачный фиолетовый фон для содержимого dd нечётных вкладок (красный фон, 10% прозрачности):
CSS:
#tabs>dd:nth-of-type(even)>div{
background: rgba(255,0,0,0.1);
}
Назначим полупрозрачный серый фон для содержимого dd чётных вкладок (чёрный фон, 10%)
CSS:
#tabs>dd:nth-of-type(odd)>div{
background: rgba(122,0,0,0.1);
}
Где: rgba – указываем фоновый цвет в rgb с процентом прозрачности четвёртой цифрой: 1 – полностью непрозрачный элемент, 0 – полностью прозрачный.
Различие между rgba и opacity (прозрачностью всего элемента) в том, что изменяется прозрачность фона элемента, при этом прозрачность текста и дочерних элементов контейнера остаётся прежней.
«Закругляем нижние края» для содержимого (dd>div) вкладок и добавляем нижнюю тень:
CSS:
#tabs>dd>div{
-moz-border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-o-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-o-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 3px 3px 7px rgba(122,122,122,0.4),-3px 3px 7px rgba(122,122,122,0.4);
-moz-box-shadow: 3px 3px 7px rgba(122,122,122,0.4),-3px 3px 7px rgba(122,122,122,0.4);
-webkit-box-shadow: 3px 3px 7px rgba(122,122,122,0.4),-3px 3px 7px rgba(122,122,122,0.4);
-o-border-box-shadow: 3px 3px 7px rgba(122,122,122,0.4),-3px 3px 7px rgba(122,122,122,0.4);
}
«Закругляем» верхние края вкладок dt:
CSS:
#tabs>dt{
border-top-left-radius: 6px;
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-o-border-top-left-radius: 6px;
border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
-o-border-top-right-radius: 6px;
}
Для большей совместимости с браузерами каждое значение свойства css 3.0 скругления углов (border-radius) и тени (box-shadow) дублируем с указанием фильтров:
- -moz – Mozilla Firefox,
- -o – Opera,
- -webkit – Safari, Chrome.
box-shadow
box-shadow – тень вокруг элемента, указывается в формате:
- сдвиг по x (положительный: вправо, отрицательный – влево) (обязательный параметр),
- сдвиг по y (положительный: вниз, отрицательный – вверх) (обязательный параметр),
- размытие (радиус размытия, чем больше значение, тем мягче, плавнее, прозрачнее тень),
- растяжение (размер тени: по умолчанию равен размеру элемента, чем больше значение, тем больше масштаб тени),
- цвет тени (допускается rgba, hex, именной формат).
Подробнее о box-shadow Вы можете Вы можете прочесть здесь.
border-radius
border-radius – скругление углов, задаём радиус скругления, можно указывать не только радиус круга (border-radius: 13px), но и эллипса (border-radius: 13px/3px)
Указано одно значение радиуса: скругление задаётся для всех четырёх углов
Указано два значения радиуса: первый радиус скругления применяется для верхнего левого и нижнего правого уголка, второй радиус – для верхнего правого и нижнего левого угла.
Указано три значения радиуса: первое значение – верхний левый угол, второе – для верхнего правого и нижнего левого, третье – для нижнего правого угла.
Указано четыре значения радиуса: поочередно для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.
Возможно так же назначение скруглений CSS 3.0 для каждого угла элемента:
- border-top-right-radius – радиус скругления для верхнего правого угла;
- border-bottom-right-radius – радиус скругления для нижнего правого угла;
- border-top-left-radius – радиус скругления для верхнего левого угла;
- border-bottom-left-radius – радиус скругления для нижнего левого угла.
Подробнее о border-radius Вы можете прочесть здесь
Сделаем более плавным скругление для первой вкладки dt и для последней, а так же зададим «тень» для левого угла первой вкладки и для правого последней вкладки dt:
CSS:
#tabs>dt:first-child{
border-top-left-radius: 26px;
-webkit-border-top-left-radius: 26px;
-o-border-top-left-radius: 26px;
-moz-border-top-left-radius: 26px;
box-shadow: -3px 1px 2px rgba(122,122,122,0.4);
-webkit-box-shadow: -3px 1px 2px rgba(122,122,122,0.4);
-o-box-shadow: -3px 1px 2px rgba(122,122,122,0.4);
-moz-box-shadow: -3px 1px 2px rgba(122,122,122,0.4);
}
#tabs>dt:last-of-type{
border-top-right-radius: 26px;
-webkit-border-top-right-radius: 26px;
-o-border-top-right-radius: 26px;
-moz-border-top-right-radius: 26px;
box-shadow: 3px 1px 2px rgba(122,122,122,0.4);
-webkit-box-shadow: 3px 1px 2px rgba(122,122,122,0.4);
-o-box-shadow: 3px 1px 2px rgba(122,122,122,0.4);
-moz-box-shadow: 3px 1px 2px rgba(122,122,122,0.4);
}
А теперь поработаем с динамическими эффектами, визуализируем эффект при наведении со «смещением влево» второй и третьей вкладки с помощью CSS 3.0 transition:
CSS:
#tabs>dt:hover:nth-of-type(2){
width: 26%;
transition-property: left;
transition-duration: 1s;
transition-timing-function: linear;
-moz-transition-property: left;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-property: left;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-o-transition-property: left;
-o-transition-duration: 1s;
-o-transition-timing-function: linear;
left: 23.5%;
}
#tabs>dt:hover:nth-of-type(3){
width: 26%;
transition-property: left;
transition-duration: 0.7s;
transition-timing-function: linear;
-moz-transition-property: left;
-moz-transition-duration: 0.7s;
-moz-transition-timing-function: linear;
-webkit-transition-property: left;
-webkit-transition-duration: 0.7s;
-webkit-transition-timing-function: linear;
-o-transition-property: left;
-o-transition-duration: 0.7s;
-o-transition-timing-function: linear;
left: 48%;
}
От автора: особенно красиво переходной эффект CSS 3.0 transition смотрится в Opera. В данном браузере реализован «обратный» эффект, стоит только «перевести» плавно мышку с одного таба на другой, как вкладка, ставшая неактивной, плавно возвращается на своё место (эффект применяется как в прямом, так и в обратном порядке).
Настраиваем CSS 3.0 transition:
- transition-property — указываем css свойство, которое будет изменяться во время эффекта: в нашем случае это отступ слева left;
- transition-duration — сколько будет длиться переходной эффект: в нашем случае 0.7 секунды (0.7 s);
- transition-timing-function — эффект, который будет применён, в нашем случае плавное линейное изменение linear;
- transition-delay – эффект с задержкой, время, на которое будет отложен переходной эффект, в нашем случае не требуется.
Подробнее о переходных эффектах CSS 3.0 transition Вы можете прочесть здесь
От автора: маленькая подсказка, используйте перечисление свойств transition-property, transition-duration, transition-timing-function, transition-delay, как указано выше, с указанием префиксов браузеров в подробном перечне свойств, а не «быстрым перечислением свойств» «short hand» transition: через запятую. Приведённая нами форма записи имеет более широкую поддержку в браузерах.
Давайте применим так же переходные эффекты с целью морфинга (плавного превращения фонового цвета вкладок из одного в другой) при наведении мышью:
CSS:
#tabs>dt:hover{
background: #ff0000;
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-out;
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;
-o-transition-property: background-color;
-o-transition-duration: 1s;
-o-transition-timing-function: ease-out;
color: #fff;
font-weight: bold;
}
Итак, что же у нас получилось?
Как видите, с помощью простой вёрстки и CSS 3.0, без единой фоновой картинки мы придали нашим вкладкам dt и их содержимому dd>div симпатичный вид, задали скругления уголков, определили тени для вкладок dt и их содержимого dd. А так же на практике рассмотрели селекторы из арсенала CSS 3.0, которые позволяют по своему вкусу с лёгкостью выбирать для стилизации любые элементы определённого типа или по положению их в родительском элементе (дереве документа) (например: первую, последнюю вкладки в нашем примере).
И коснулись темы создания переходных красивых визуальных эффектов transition CSS 3.0.
Но всё-таки у наших вкладок — табов есть ещё один существенный недостаток. Если курсор мыши не находится в области вкладки или её содержимого, то активная вкладка «теряется», вместо неё отображается первая вкладка. Далее мы решим эту проблему, а так же сделаем «запоминание» активной вкладки с возможностью добавления страницы в закладки с восстановлением конкретной вкладки после загрузки/обновления страницы средствами javascript.
Запоминаем активную вкладку
Примечание автора: именно location.hash было отдано предпочтение над работой с document.cookie, для того, чтобы и у других посетителей была возможность получить прямую ссылку в адресной строке браузера для любой из вкладок.
Примечание автора: из css первоначального примера удаляем правило:
CSS:
#tabs>dt:first-child + dd{
display: block;
}
А так же добавляем в css определение стилей для класса активной вкладки:
CSS:
.activeTab{
border-bottom: none!important;
background: #ff0000!important;
height: 21px!important;
color: #fff;
font-weight: bold;
}
.activeTab + dd{
display: block;
}
Добавляем следующий javascript в секцию head:
Javascript:
<script type="text/javascript">
/** евдинственная загзвоздка, css 2 , 3
не позволяют сделать вкладку "активной" (заголовок вкладки),
так как при чтении вкладка теряет фокус,
но мы всегда можем с помощью пары строк
на Javascript присвоить активной "вкладке"
свой класс
**/
function setActiveTab(){
var tabs = document.getElementById("tabs");
if(tabs && tabs.hasChildNodes()){
chNodes = tabs.children;
var chLength = chNodes.length;
var needDt = [];
var activeTab = "";
if(location.hash.indexOf("tabs=")!=-1){
var exp = new RegExp("tabs=(.*?)(&|$)","i");
activeTab = location.hash.match(exp);
if(activeTab
&& typeof activeTab.length != "undefined"
&& activeTab.length
&& activeTab.length > 2
){
activeTab = activeTab[1];
}
}
var found = false;
for(var i = 0; i < chLength; i ++){
if(chNodes[i].nodeName.toLowerCase() == "dt"){
var needDtLength = needDt.length;
needDt[needDtLength]= chNodes[i];
if(needDt[needDtLength].id == ""){
needDt[needDtLength].id = "dt" + needDtLength;
};
if((activeTab == "" && needDtLength == 0) || (needDt[needDtLength].id == activeTab)){
needDt[needDtLength].className = "activeTab";
found = true;
}
}
}
var needDtLength = needDt.length;
if(needDtLength){
if(!found){
needDt[0].className = "activeTab";
}
for(var i = 0; i < needDtLength; i ++){
needDt[i].onmouseover = function(){
var needDtLength = needDt.length;
for(var k = 0; k < needDtLength; k ++){
if(needDt[k].id == this.id){
this.className = "activeTab";
if(location.hash.indexOf("tabs=")!=-1){
var exp = new RegExp("tabs=.*?(&|$)","i");
location.hash = location.hash.replace(exp,"tabs="+escape(this.id)+"&");
} else {
location.hash += "tabs="+escape(this.id)+"&";
}
} else {
needDt[k].className = needDt[k].className.replace("activeTab","");
}
}
}
}
}
}
}
if(typeof window.addEventListener != "undefined"){
window.addEventListener("load", setActiveTab, false);
} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onload", setActiveTab);
}
</script>
В данном javascript е после загрузки страницы мы проверяем, содержится ли в хеше ссылки (часть, следующая за # в ссылке страницы) id вкладки dt (id назначается автоматически, если не задано), если содержится и существует такая вкладка dt с указанным id, тогда показываем её содержимое («запоминаем» активную вкладку dt). А так же регистрируем для каждой вкладки dt событие onmouseover – «по наведению мыши». Когда мы наводим мышь на вкладку, ей присваивается активный класс .activeTab, а так же происходит добавление id выделенной вкладки dt в хеш в адресной строки.
Итак, в результате мы получили семантически (логически) связанные красивые стилизованные вкладки — табы с использованием CSS 2.1, 3.0 + Javascript, которые умеют «запоминать» и «подсвечивать» активную вкладку даже после перезагрузки страницы. Но, целью этих статей была больше практика работы с CSS селекторами 2.1,3.0 и раскрытие их огромных возможностей при вёрстке документов.