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

[altrosilka]

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

Спасибо за обзор.

[Nico_izo]

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

[mark_ablov]

> Автобус.jpg
Троллейбус.jpg!

[Nico_izo]

Упс. Fixed :)

[Yarysh]

Выпадающее меню с использованием :checked. Страница предназначена для небольших экранов, поэтому чтобы увидеть в действии — сожмите окно браузера < 800px.

[elw00d]

Пошел на qutim.org и проверил, не вышла ли новая версия :) Вы зачем qutIM упомянули? :)

[Nico_izo]

Это ж-ж-ж неспроста! Ну не Lores ipsum пихать же для примера :)

[Lanior]

Всё уже придумали до нас.

[Softlink]

Предлагаю вместо сестринского селектора использовать классы и селектор обобщенных родственных элементов. Код более удобочитаемый. Ваш подправленный пример.

[Nico_izo]

Отлично! :)

[invidia]

типа опа
Functional CSS Tabs Revisited

Там же в комментах:
jsfiddle.net/bUjQm/21/
jsfiddle.net/paullferguson/Sv54G/3/

[Nico_izo]

Интересно. Тоже на радиобаттонах, но немного другой вид.
Воистину, всё придумано до нас.

[wcoder]

Прочитав статью решил по экспериментировать, ниже реализация с использованием 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}}

[wcoder]

Минусы: Текст в input — фоновое изображение.

[Nico_izo]

Тогда уж как в примере по ссылке, делать текст обычным value и ставить атрибут readonly.
Но, гм, зачем, если текст во вкладке нельзя выделить, ибо фокус сбросится?

[Dalairen]

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

[Dalairen]

Прошу пардона, комментарий ниже — отвкт, просто пишу с андроида и меня проглючило на местоположенме формы ответа.

[Dalairen]

*ответ* *местоположение* У меня еще и пальцы толстые.(

[Dalairen]

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

[VolCh]

Список определений, имхо, куда меньше подходит. Заголовок таба же это нечто вроде тултипа или лабела :) — так, справочная информация для удобства. Но никак он контент не определяет.

[Dalairen]

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

[Dalairen]

Ну в табе с заголовком «Кошка» инфу про попугая никому же не придет в голову искать, согласны? Чем не определение контента соответствующего таба и чем не повод считать длку подходящей для этой структуры?

[VolCh]

Для табов с контентом, который содержит определения это логично. Но и всё, пожалуй. Чаще же заголовок таба это именно заголовок, метка. Семантически лучше всего подходит в общем случае section и h[1-6], по-моему. Но у h нет :checked :( впрочем как и у списков.

[lahmatiy]

Имхо, если уж сязались с 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;
 	}