Сегодня приведем несколько интересных примеров вкладок (tabs) с контентом без привлечения средств JavaScript или прочих сторонних инструментов. Пользуйтесь!

Кому нужны вкладки CSS?

Чаще всего вопросом «как сделать вкладки CSS » задаются либо новички, которые не могут\не умеют пользоваться скриптами, либо разработчики, преследующие оптимизацию и производительность. Разумеется, легче дополнить файл style.css несколькими строками кода, чем подключать специальные плагины и нагружать сайт еще больше. Ниже мы приведем несколько примеров того, как легко и просто можно реализовать вкладки с контентом на чистом CSS3.

1. Симпатичные вкладки с быстрым откликом на переключения. Здесь нет лишних анимаций и прочей ерунды. Грамотно и по делу. Результат достигается за счет:

< input id = "tab-1" type = "radio" name = "radio-set" class = "tab-selector-1" checked = "checked" / >

2. Второй вариант содержит в себе небольшую анимация при переключении вкладок, да и выглядит тоже неплохо. Средства реализации те же: элемент формы input с атрибутом radio . Поклацать можно во фрейме ниже:

3. Ну и последний вариант интересен тем, что выглядит, как переключение между этапами взаимодействия с пользователем. Алгоритм похожий, только вместо атрибута radio используется check . Результат ниже:

Как этими вкладками CSS пользоваться?

Чтобы забрать пример полностью, откройте фрейм в новой вкладке и вызовите контекстное меню. В нем выберите «Исходный код фрейма» и сохраните к себе на компьютер. Далее скопируйте HTML и CSS код в свой проект. Удачи!

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

Псевдокласс target

В CSS target - это псевдокласс, который призван связать URL (адресную строку браузера) и элемент с указанным идентификатором на странице. Для указания на элемент используется хэштег в конце URL. Элемент, на который указывает хэштег, называется целевым элементом .

Если в URL появляется хэштег, совпадающий со значением идентификатора какого-нибудь элемента на странице, то происходит скролл до него.

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

Для примера, допустим, что имеется следующая разметка:

...

Введение

Здесь находится какой-то текст

...

Https://website.com/articles/target-for-you#introduction

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

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

Heading:target { color: #ffff99; }

Также, с помощью селекторов в CSS можно управлять соседними, дочерними и родственными элементами:

Heading:target + p { font-size: 2.4rem; }

Разумеется, что класс здесь задан лишь для примера - никто не запрещает обращаться сразу к селектору по тегу:

H1:target { color: #ffff99; }

Более подробную информацию о псевдоклассе target можно получить из этих материалов:

• Псевдокласс:target - стили для элемента-якоря в HTML-документе

Первоначальный осмотр

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

Раньше, да и сейчас, такое делали с помощью JavaScript. К сожалению, в конце статьи вы поймете, почему решения на JavaScript куда интереснее с точки зрения удобства использования, чем решения на CSS. От этого никуда не деться, а знать нужно.

Типичный виджет табов выглядит примерно так:

Все ясно и технически очень просто. Но перед тем, как приступить к реализации, я хочу рассказать почему написана эта статья.

Проблема в том, что меня не устраивают существующие решения. Знакомо? Да, но тут всё несколько сложнее, так как в CSS нет решений, которые можно копипастить из проекта в проект.

Так вот, что мне нужно от табов:

• Максимальная адаптируемость под проекты. Имеется в виду, что, делая copy-paste jade- и less-файла я буду счастлив.
• Максимальная отвязка HTML разметки от CSS. То есть, чтобы добавить новые вкладки - я не должен лезть в CSS и, основываясь на разметке, что-то там добавлять.
• Указывать вкладку, отображаемую по умолчанию, через класс.
• Нормальная структура разметки.
• Отсутствие полного абсолютного позиционирования у табов и переключателей.
• Велосипед - что может быть лучше своего велосипеда?
• Отсутствие JavaScript.

Однако, перед тем как приступить к решению, нужно перечислить все методики организации табов на CSS:

• Псевдокласс checked у элемента input ;
• Псевдокласс target ;
• Псевдокласс focus ;
• Псевдокласс hover ;

Варианты с hover и focus мне не нравятся. Их в статье я больше упоминать не буду.

Реализация

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

Изначально, в статье была история о том, как я пришел к решению, но в итоге всё таки её здесь не будет. Не интересное это занятие - рассказывать то, что в итоге оказывается логичным и довольно простым.

Для того, чтобы избавиться от скролла, необходимо целевому элементу прописать свойство display и присвоить ему значение none . В теории мы имеем, что элемент, по сути своей, есть в DOM и скролл к нему должен срабатывать, но так как у нас имеется свойство display , то вычислить координаты элемента невозможно. Не знаю, так ли это на самом деле, но это работает.

Поэтому, мы будем ссылаться не на саму вкладку, а на дополнительный пустой блок, находящийся прямо перед ней. Хитро? Я тоже так подумал, когда потратил два часа своей жизни на поиск решения.

Листинг HTML

Я привел лишь две вкладки из трех. Думаю, что структура предельна ясна и не требует объяснения.

Класс -default указывает таб, отображающийся по умолчанию. Блок, предшествующий блоку с классом item , является его управляющим блоком.

Листинг CSS

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

Tabs-widget > .content { position: relative; } // Скрываем пустой блок, предназначенный для отмены скролла.tabs-widget > .content > .scroller { display: none; } // Следующий за целевым элементов таб отображаем поверх первого таба.tabs-widget > .content > .scroller:target + .item { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; } // Первый таб всегда должен иметь относительное позиционирование.tabs-widget > .content > .scroller:target + .item.-default { position: relative; } // Стили табов // Обратите внимание на наличие указанной максимальной высоты таба, иначе // большие табы будут вылезать за пределы размеров таба по умолчанию, // если тот меньше них.tabs-widget > .content > .item { background-color: #ffffff; color: #333333; padding: 20px; display: none; max-height: 384px; overflow-y: auto; } // Всегда отображаем первый таб.tabs-widget > .content > .item.-default { display: block; z-index: 1; }

Замечательно, вроде как всё даже работает:

Заметьте, я специально определил вторую вкладку отображаемой по умолчанию. Как пользователь поймет, что сейчас активна она? Об этом позже.

Существуют различные варианты реализации этой методики. Но сразу скажу, что во многих из них есть жесткая связь между разметкой и CSS.

Другие реализации

• Вкладки (страницы) на одной странице на html/css с помощью:target

Анимация

Перед тем, как опубликовать статью, я решил выспаться и с утра оценить все то, что уже написано. Однако, меня ждала западня, устроенная пабликом Webtackles - веб-разработка и дизайн . Эти ребята опубликовали табы на JavaScript. Понимаете? Прямо за день до того, как я решил выложить эту статью. Возмутительно!

В комментариях пробежала нотка анимации табов. И тут я решил, что мне нужно добавить анимацию своим табам.

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

Возможно, мне уже лень думать, но ничего лучше этого я придумать так и не смог:

@keyframes tabs { 0% { color: #ffffff; } 100% { color: #333333; } } .tabs-widget > .content > .scroller:target + .item { animation: tabs 1s; ... }

Конец радости

На этом радостные выкрики можно заглушить, ибо проблемы этого метода в том, что:

• Все переходы по табам отражаются в истории.
• Первый таб всегда отображается.
• Довольно проблематично подобрать анимацию из-за того, что первый таб всегда отображается.
• Ужасная реализация подсветки активных табов.

Зато таких проблем лишен метод организации табов, использующий элементы input и псевдокласс:checked . Разумеется, кроме последнего пункта. Например, организация логики переключения табов там делается так:

// Скрываем input .tabs-widget > .content > input { display: none; } // Скрываем все вкладки, кроме той, что активна.tabs-widget > .content > input:not(:checked) + .item { display: none; }

Проблема с выделением активной вкладки носит серьёзный характер. Но тут есть целых четыре решения:

• Добавить ещё один целевой элемент, но уже перед каждой ссылкой - бред.
• Плоская структура виджета и полная привязка CSS к структуре - не хочу.
• Почти плоская структура с привязкой CSS к структуре - не хочу.
• Абсолютное позиционирование вкладок - нет, там будет ужас.

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

Поддержка браузерами

Заходим на Can I Use и видим замечательную картину касательно псевдоклассов target и first-child .

Тестируем с помощью BrowserStack на работоспособность в IE9 и радуемся, что все отображается корректно.

Когда применять табы на CSS?

Довольно интересный вопрос, учитывая то, что вы прочитали почти всю статью перед этим о том, как сделать табы на CSS. Попробую ответить на него.

Табы на CSS стоит применять тогда, когда вам не нужна поддержка IE ниже 9 версии и у вас есть желание этого. Во всех остальных случаях решением будет использование JavaScript.

Самая серьёзная часть статьи

Наверное, подводя итоги, хочется задать себе один единственный вопрос и попытаться ответить на него максимально честно: «Стоила ли игра свеч?».

И мой ответ на него - нет.

Понимаете, как ни крути, табы на target будут уступать табам на input . Проблема их в том, что:

• Нужно как-то показывать контент первого таба - костыль.
• Проблемы с анимацией из-за первого пункта - костыль.
• Решение проблемы со скроллом до целевого элемента - костыль.

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

Если же ваш друг-дизайнер решил их подсвечивать, то у вас два выхода:

• Воруете отсюда 4 Methods CSS3 Tabbed Content табы (какие нравятся) и расстраиваетесь жесткой связи структуры верстки и CSS.
• Используете JS.

Уточню, что в статье «4 Methods CSS3 Tabbed Content» есть привязка логики переключения табов и их разметки, что не соответствует моим требованиям. Логика с добавлением новых табов через CSS хороша там, где вкладки могут долго не меняться и/или не создаются автоматически.

Я думаю, что JavaScript в этом случае самое короткое и рациональное решение. И да, этой строчкой я признаю, что табы на CSS - это некий костыль. Но костылем они не являются до тех пор, пока можно не подсвечивать активный таб и нет сложной анимации переходов.

В любом случае, если у вас на сайте уже используется JavaScript для каких-то интерфейсов (меню, аккордеоны и т.д.), то я призываю вас использовать табы на JavaScript, потому что они:

• Проще в обслуживании.
• Гибче любых табов на CSS.
• Не плодят лишней разметки.
• Используют более семантически верную разметку.
• Лишены недостатков табов на CSS.

И, напоследок, задам два вопроса, которые будут волновать неравнодушного читателя после прочтения этой статьи:

• А какие табы используете вы?
• Что вы думаете по поводу табов на CSS?

Спасибо за то, что дочитали до конца.

В этом уроке мы создадим интересную анимированную группу вкладок, которая покажет возможности селектора CSS3:target, используя только HTML5 и CSS3. Нам не понадобится JavaScript или изображения, и все будет работать в браузерах Internet Explorer версии 9 и выше, Chrome, Firefox, Safari и Opera.

Отличительные особенности

Вы можете найти много групп вкладок на чистом CSS3 в интернете. Но у многих есть следующие проблемы:

• Они не покажут содержание ни одной вкладки, если дать ссылку без идентификатора, т. е., если дать ссылку на mypage.html, а не на mypage.html#tab1.
• Не подсвечивают активную вкладку.

Что насчет браузера Internet Explorer версий 6, 7 и 8?

Можно ли ожидать, что современные эффекты CSS3 будут работать в браузере, выпущенном в 2001 году? Браузеры Internet Explorer версий 7 и 8 отобразят только первую вкладку. Internet Explorer 6 покажет последнюю вкладку, хотя вместо этого можно легко задать показ первой вкладки.

Таким образом, у Вас есть два варианта:

1. Не предлагайте поддержу устаревших версий браузеров. Пользователи браузера Internet Explorer не узнают, что они что-то не видят, так что, если содержимое не критично для Вашей страницы, Вы можете просто проигнорировать эту проблему.
2. Так как предыдущее решение не очень привлекательно, то наиболее быстрым решением будет добавить selectivizr как запасной вариант. Или воспользуйтесь методом последовательного улучшения и забудьте о новых возможностях CSS3.

HTML

Вот основной код HTML5. Содержимое вкладок находится в теге section. Сама вкладка - его первый потомок, и определяется как элемент h2, содержащий внутреннюю ссылку на внешний тег section:

class ="tabs" > id ="tab1" >

Tab 1

This content appears on tab 1.

< /section> id ="tab2" >

Tab 2

This content appears on tab 2.

< /section> id ="tab3" >

Tab 3

This content appears on tab 3.

< /section> < /article>

Этот код отличается от кода HTML для вкладок, который Вы видели раньше. Большая часть определяют вкладки как список тегов ul, после которого идет раздел содержимого. Хотя можно использовать и подобную разметку, с ней сложнее сделать подсветку вкладок, так как вкладке нельзя задать стили с помощью селектора:target. Лучшее решение, которое мы нашли, — добавить тег section, который окрашивается соответственно и располагается под текстом вкладки, что сделало код запутанным и неочевидным.

CSS

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

Article.tabs { position : relative ; display : block ; width : 40em ; height : 15em ; margin : 2em auto ; }

Затем следуют разделы. Они спозиционированны абсолютно на расстояние 1.8em от верха, чтобы оставить место для вкладок. Тени у свойства box-shadow довольно прозрачные, так как каждый раздел расположен один над другим.

Article.tabs section { position : absolute ; display : block ; top : 1 .8em ; left : 0 ; height : 12em ; padding : 10px 20px ; background-color : #ddd ; border-radius: 5px ; box-shadow: 0 3px 3px rgba(0 ,0 ,0 ,0 .1 ) ; z-index : 0 ; }

Так как последняя вкладка будет показана сверху, мы поменяем ее с первой вкладкой, задав ей высокое значение свойства z-index:

Article.tabs section:first-child { z-index : 1 ; }

Теперь мы можем задать стили вкладкам. Они окрашены в закрытом состоянии и расположены выше разделов. Левые отступы второй и третей вкладок изменены, чтобы быть уверенными, что вкладки не накладываются друг на друга.

Article.tabs section h2 { position : absolute ; font-size : 1em ; font-weight : normal ; width : 120px ; height : 1 .8em ; top : -1 .8em ; left : 10px ; padding : 0 ; margin : 0 ; color : #999 ; background-color : #ddd ; border-radius: 5px 5px 0 0 ; } article.tabs section:nth-child (2 ) h2 { left : 132px ; } article.tabs section:nth-child (3 ) h2 { left : 254px ; } article.tabs section h2 a { display : block ; width : 100 % ; line-height : 1 .8em ; text-align : center ; text-decoration : none ; color : inherit ; outline : 0 none ; }

Все вкладки и разделы теперь определены, и первая вкладка показывается по умолчанию, даже если в адресе страницы не задан раздел. Теперь мы можем изменить цвет, цвет фона и глубину расположения выбранного раздела, используя селектор:target:

Article.tabs section:target , article.tabs section:target h2 { color : #333 ; background-color : #fff ; z-index : 2 ; }

Как дополнение давайте добавим эффект перехода, когда меняется выбранная вкладка.

Article.tabs section, article.tabs section h2 { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }

В отличие от многих решений с использованием Javascript наше решение на CSS3 поддерживает полную историю переходов между вкладками, так что кнопки вперед и назад в браузере работают правильно. Также возможно сослаться напрямую на вкладку из любого места страницы, что показано ссылкой «NEXT» (далее).

Это решение не идеально, когда Вы впервые приходите на страницу, первая вкладка активна, но показана в выключенном состоянии. И эту проблему сложно решить. Самым простым решением будет уменьшить разницу между включенным и выключенным состояниями.

Перевод — Дежурка