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

Спасибо за обзор.
+2
В вебките заметил странную проблему: При выборе галочек для изменения значения необходимо «передёрнуть» последнюю. Не понял, чем это вызвано, но очень похоже на первую проблему.
+1
Выпадающее меню с использованием :checked. Страница предназначена для небольших экранов, поэтому чтобы увидеть в действии — сожмите окно браузера < 800px.
0
Пошел на qutim.org и проверил, не вышла ли новая версия :) Вы зачем qutIM упомянули? :)
+2
Предлагаю вместо сестринского селектора использовать классы и селектор обобщенных родственных элементов. Код более удобочитаемый. Ваш подправленный пример.
UFO landed and left these words here
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
Тогда уж как в примере по ссылке, делать текст обычным value и ставить атрибут readonly.
Но, гм, зачем, если текст во вкладке нельзя выделить, ибо фокус сбросится?
0
Интересно, почему для реализации одного логического элемента надо обязательно использовать элемент с совершенно другой логикой и перецарапать полностью его поведение?
UFO landed and left these words here
0
Прошу пардона, комментарий ниже — отвкт, просто пишу с андроида и меня проглючило на местоположенме формы ответа.
0
Общность, равноценная общности кошки с попугаем по критериям количества глаз на голове. По мне так тут больше подходит список определений, пушо табы это не выбор опции, это выбор показывать контент, релевантный заголовку в табе, который этот контент определяет. Плюс вот тебе и ярлыки, вот тебе и сменные области, вот тебе и замыкающая оболочка, не говоря уже о простоте стилевого и скриптового контроля.
+1
Список определений, имхо, куда меньше подходит. Заголовок таба же это нечто вроде тултипа или лабела :) — так, справочная информация для удобства. Но никак он контент не определяет.
0
Опять сглючило :D Ответ ниже. Думаю, я лучше в следующий раз с работы отвечу, а то дискуссия будет отличаться визуальной алогичностью.
UFO landed and left these words 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 &mdash; Однопротокольный клиент, вышедший в 2008 году.
</article>

После чего правила становятся проще:
 	#tab1:checked ~ [tabcontent="tab1"],
 	#tab2:checked ~ [tabcontent="tab2"],
 	#tab3:checked ~ [tabcontent="tab3"],									
 	#tab4:checked ~ [tabcontent="tab4"] {
 		display: block;
 	}
Only those users with full accounts are able to leave comments.  , please.