Поговорим про :checked

    В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
    Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).

    Но обо всём по порядку.



    :checked или немного теории


    Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
    Вкратце, этот псевдокласс применяется к тем input'ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).

    Табы, табы, табы

    Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text» выставленное в readonly), но в большинстве своём они опирались на псевдокласс :target, чьё использование немного неоправданно из-за «прыгающего» контента.

    Из-за чего была придумана сверхпростая реализация вкладок при помощи :checked и радиобаттонов.

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

    HTML:
    <section>
    <input type="radio" id="tab1" name="radiobutton" checked="checked"/>
    <label for="tab1" class="tabs">qutIM 0.1</label>
    <input type="radio" id="tab2" name="radiobutton"/>
    <label for="tab2" class="tabs">qutIM 0.2</label>
    <article>
    qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
    </article>
    <article>
    qutIM 0.2 — Многопротокольный клиент, вышедший в 2010 году.
    </article>
    </section>
    


    CSS:
    input { 
    	display: none;
    }
    			
    input:checked + label {
    	background: #CCC;
    }
    			
    input:checked + label + input + label + article { /* Страшно? */
    	display: block;
    }
    			
    input:checked + label + article + article {
    	display: block;
    }
    
    			
    article {
    	display: none;
    }
    


    Сей код лишён всех лишних стилей, дабы не мешать пониманию.
    Отдельно хочу сказать, что это лишь пример, что можно сделать при помощи CSS и HTML, ибо использование сего в реальных сайтах затруднительно и вот почему:
    Сей код корректно работает в Firefox, Opera, IE9+, но не работает в Webkit-браузерах. а вот тут я немного поспешил.
    WebKit не обновляет значение до изменения кода, но его можно принудительно заставить это делать, добавив весьма грязный хак:

    section {
    	-webkit-animation: 0.1s hack infinite;
    }
    			
    @-webkit-keyframes hack {
    	from {margin: 0; padding: 0;}
    	to {margin: 0; padding: 0;}
    }
    


    Анимация, которая ничего не делает. Вебкит не перестаёт удивлять.

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

    Немного бреда


    А что, если использовать чекбоксы для ввода двоичных чисел?

    Берём два чекбокса, располагаем последовательно и делаем что-то вроде:
    input + div::after {
    content: "0";
    }
    
    input:checked + div::after {
    content: "1";
    }
    
    input:checked + input + div::after {
    content: "2";
    }
    
    input:checked + input:checked + div::after {
    content: "3";
    }
    


    Бред? Сумасшествие? Троллейбус.jpg? На самом деле, всего-лишь демонстрация и немного свободного времени.
    К слову, за полчаса был написан вот такой небольшой скриптик, генерирующий стиль (Аналогичный вышенаписанному) и строчку из чекбоксов для перевода из двоичной системы в десятеричную :)
    Немного погодя был написан аналогичный скрипт, генерирующий аналогичный стиль, но для перевода из троичных чисел в десятеричные.
    В HTML существуют tri-state чекбоксы, но для их создания требуется javascript (для выставления элементу indeterminate = true), а так же есть псевдокласс :indeterminate по аналогии с :checked.

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

    А ещё?


    Вот здесь можно почитать заметку за авторством kizu про выпадающие менюшки, основанные на том же принципе.
    Share post

    Similar posts

    Comments 27

      +3
      webkit такой webkit :(
      в том самом небольшом примере на хроме проблемы, капитальные. Опера ок.

      Спасибо за обзор.
        +2
        В вебките заметил странную проблему: При выборе галочек для изменения значения необходимо «передёрнуть» последнюю. Не понял, чем это вызвано, но очень похоже на первую проблему.
        +4
        > Автобус.jpg
        Троллейбус.jpg!
          +1
          Упс. Fixed :)
          +1
          Выпадающее меню с использованием :checked. Страница предназначена для небольших экранов, поэтому чтобы увидеть в действии — сожмите окно браузера < 800px.
            0
            Пошел на qutim.org и проверил, не вышла ли новая версия :) Вы зачем qutIM упомянули? :)
              0
              Это ж-ж-ж неспроста! Ну не Lores ipsum пихать же для примера :)
              0
              Всё уже придумали до нас.
                +2
                Предлагаю вместо сестринского селектора использовать классы и селектор обобщенных родственных элементов. Код более удобочитаемый. Ваш подправленный пример.
                  0
                  Отлично! :)
                  • UFO just landed and posted this here
                    0
                      0
                      Интересно. Тоже на радиобаттонах, но немного другой вид.
                      Воистину, всё придумано до нас.
                      0
                      Прочитав статью решил по экспериментировать, ниже реализация с использованием input:focus:

                      HTML:
                      <section>
                      
                      		<input type="text" value=" "/>		
                      		<input type="text" value=" "/>
                      		<input type="text" value=" "/>
                      
                      		<hr/>
                      
                      		<article>Text 1</article>
                      		<article>Text 2</article>
                      		<article>Text 3</article>	
                      	
                      	</section>
                      


                      CSS:
                      		input
                      		{
                      			text-indent: -999999px;
                      			cursor: pointer;
                      			border: 0;
                      			outline: none;
                      			background: #0F0;
                      			width: 50px;
                      		}
                      
                      		input:focus
                      		{
                      			background: #F00;
                      		}
                      
                      		input:focus + input + input + hr + article,
                      		input:focus + input + hr + article + article,
                      		input:focus + hr + article + article + article
                      		{
                      			display: block;
                      		}
                      
                      		article
                      		{
                      			display: none;			
                      		}
                      
                      		/* Hack for Webkit */
                      		section {-webkit-animation: 0.1s hack infinite}
                      		@-webkit-keyframes hack{from{margin:0;padding:0}to{margin:0;padding:0}}
                      
                      
                        0
                        Минусы: Текст в input — фоновое изображение.
                          0
                          Тогда уж как в примере по ссылке, делать текст обычным value и ставить атрибут readonly.
                          Но, гм, зачем, если текст во вкладке нельзя выделить, ибо фокус сбросится?
                        0
                        Интересно, почему для реализации одного логического элемента надо обязательно использовать элемент с совершенно другой логикой и перецарапать полностью его поведение?
                        • UFO just landed and posted this here
                            0
                            Прошу пардона, комментарий ниже — отвкт, просто пишу с андроида и меня проглючило на местоположенме формы ответа.
                              0
                              *ответ* *местоположение* У меня еще и пальцы толстые.(
                          0
                          Общность, равноценная общности кошки с попугаем по критериям количества глаз на голове. По мне так тут больше подходит список определений, пушо табы это не выбор опции, это выбор показывать контент, релевантный заголовку в табе, который этот контент определяет. Плюс вот тебе и ярлыки, вот тебе и сменные области, вот тебе и замыкающая оболочка, не говоря уже о простоте стилевого и скриптового контроля.
                            +1
                            Список определений, имхо, куда меньше подходит. Заголовок таба же это нечто вроде тултипа или лабела :) — так, справочная информация для удобства. Но никак он контент не определяет.
                              0
                              Опять сглючило :D Ответ ниже. Думаю, я лучше в следующий раз с работы отвечу, а то дискуссия будет отличаться визуальной алогичностью.
                            • UFO just landed and posted this here
                              0
                              Ну в табе с заголовком «Кошка» инфу про попугая никому же не придет в голову искать, согласны? Чем не определение контента соответствующего таба и чем не повод считать длку подходящей для этой структуры?
                                +1
                                Для табов с контентом, который содержит определения это логично. Но и всё, пожалуй. Чаще же заголовок таба это именно заголовок, метка. Семантически лучше всего подходит в общем случае section и h[1-6], по-моему. Но у h нет :checked :( впрочем как и у списков.
                                0
                                Имхо, если уж сязались с CSS3, то можно сделать проще:
                                	#tab1:checked ~ article:nth-of-type(1),
                                	#tab2:checked ~ article:nth-of-type(2),
                                	#tab3:checked ~ article:nth-of-type(3),
                                	#tab4:checked ~ article:nth-of-type(4) {
                                		display: block;
                                	}
                                

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

                                Есть и другой вариант, для этого нужно добавить либо id для <article>, либо другой атрибут с уникальным значением, например:

                                <input type="radio" id="tab1" name="radiobutton" checked="checked"/>
                                <label for="tab1" class="tabs">qutIM 0.1</label>
                                ...
                                <article class="contenttab" tabcontent="tab1">
                                	qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
                                </article>
                                

                                После чего правила становятся проще:
                                 	#tab1:checked ~ [tabcontent="tab1"],
                                 	#tab2:checked ~ [tabcontent="tab2"],
                                 	#tab3:checked ~ [tabcontent="tab3"],									
                                 	#tab4:checked ~ [tabcontent="tab4"] {
                                 		display: block;
                                 	}
                                

                                Only users with full accounts can post comments. Log in, please.