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

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

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

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

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

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

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

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

типа опа
Functional CSS Tabs Revisited

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

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

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

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

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

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