Tab 1

Це content appears on tab 1.

Tab 2

Це content appears on tab 2.

Tab 3

Це content appears on tab 3.

Цей код відрізняється від коду 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; ) . 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» (далі).

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

Переклад - Чергування

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

Кому потрібні вкладки CSS?

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

1. Симпатичні вкладки зі швидким відгуком на перемикання. Тут немає зайвих анімацій та іншої нісенітниці. Грамотно та у справі. Результат досягається за рахунок:

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 > .item ( background-color: #ffffff; color: #333333; padding: 20px; ; 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; ) // Приховуємо всі вкладки, крім тієї, що активна. : 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?

Дякую за те, що дочитали до кінця.