Cпойлер средствами css…

[Carduelis]

Добавьте, так кошернее будет
.spoiler > input[type=«checkbox»] {
cursor: pointer;
}

[Defff]

Carduelis, сенкс

[Carduelis]

Не всегда. Например, когда мы хотим сделать текст правее чекбокса другого цвета, то тут этот псевдокласс незаменим.

label span {color: #ccc;}
label input:checked + span {color: #333;}

Когда мы нажали — текст черный, иначе серый

[Defff]

Aingis:,«Чистым» такой код невозможно назвать

«Чистым» был назван согласно замыслам статьи использовать только теги HTML и css. Вчитывайтесь в замысел топика, иначе минусы за мои вкусы зимой — как то авторитарно!

[Defff]

Жизнь вообще штука сомнительная, а что то делать в ней, — тем паче, обязательно спросят — Зачем живешь?
Aingis? Собственно разные выключалки на ява-скрипт много делал, Вашу видел тоже, — неплохо, — но мне захотелось разнообразия, Имхо тут, мне кажется, в полемике, именно ваша работа, реагирующая на «фокус на элементе даёт о себе знать.

[Kolonist]

Дело даже не во вкусах, а в том, что ваш метод, 1) сам по себе хак, 2) требует использовать хак для поддержки старых версий IE, 3) не во всех современных браузерах работает.

[Defff]

идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML

[Defff]

Kolonist,« а в том, что ваш метод, 1) сам по себе хак,»

С чего вдруг — Хак? Или сss вида: input:checked + elem недопустимо в какой-либо спецификации?
Исходный минималистический код работает во всех браузерах поддерживающих псевдокласс :checked
Весь нюанс более полного кода, — это подвижка input под левый край .spoiler , скрытого overflow-x: hidden, (дабы не было видно окно чекита). Если не стремится к экстремальному скрытию окна чекита, никаких нюансов и нарушений — нет!

[Defff]

Aingis,-«Здесь же вставляются лишние элементы ради сомнительной цели. Нарушается семантика»

Не убедительно, — укажи на эти лишние элементы?

Вот разница в css, по сравнению с типовым ява-скрипт спойлером такого же дизайна

.spoiler >  input + .box > blockquote{
    display: none;
}
.spoiler >  input:checked + .box > blockquote {
    display: block;
}

При обычном спойлере эти строки типично заменяются на:

.spoiler > .box > blockquote{
    display: none;
}
.spoiler.active > .box > blockquote {
    display: block;
}

Aingis, — «и зависит от структуры HTML»

Приведите примеры. Код достаточно гибок к структуре окружения,
Моим примером может послужить работа вложенных cпойлеров: Ссылка

[Defff]

Aingis, я не против javascrip. Неужели не забавно решать неординарные задачки?
Если б у меня было желание делать в новый код скриптом… когда весь год только в скриптах и сижу…
И я не навязываю никому свою идею, — вот захотелось сделать,- покрутил — получилось, а потребуется — нет — Ваше дело.
Это как шахматная партия, — интересно и всё. А нужность — дело личных предрасположений и оценок, не так ли?

[Defff]

С какого рожна тут чекбокс?

Хм, — вспомним, что в эпоху Аякса — чекиты, селекты и input(ы) всех марок — можно увидеть разбросанными по странице, согласно удобству интерфейса, а отсылается — собирается все через FormData и отправляется Аяксом.

чтобы присобачить :checked не по назначению

Опять проводка собственного мнения, — есть спецификация! В которой оглашено применение псевдоклассов. Запреты — не аргументированы

[Defff]

Aingis, еще раз :

идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML

Поскольку не загорами => details htmlbook.ru/html/details
Пока доступный только в Хроме, вот данный эксперимент на подключение-пробы к переходу текущих браузеров.

[Defff]

не по назначению используется сам HTML-элемент input

Зачитайте пожалуста список назначений для чекита? К примеру на стандатных шаблонах форуиа чекит вне формы стоит для скрипта транслита — переводит — не переводить вввод текста — т.е для скрипта(транслита) — это по назначению — для свойства сss cпойлера — нет. Аргументы могут быть лишь одни — спецификация, и предупреждения о багах производителей браузеров. Да и потом, все эти вещи и скрипты и сss для данного применения временны, грядущее HTML5 даёт нам уже тег спойлера с автоматикой. Данная версия лишь отработка сss замены, когда заъочется подключить к контейнеру скрытия плавность хода, скругления и иные диз наработки, поскольку в текущее время они выполнялись по большей части скриптом(Возьмите плавность спойлера на Хабре, а уже 'завтра' css нужно будет адаптировать к details.)

[Defff]

SelenIT2. Потом, что Вы мне говорите — «не по назначению используется сам HTML-элемент input»
Кнопка input изначально используется для скрытия/открытия спойлеров! (Давайте теперь спорить за type
Так что аргументы излишества или не по назначению — не убедительны, -существует куча спойлеров с кнопкой инпут, значит спор только за тип — а чем хуже чекит нежели буттон?

[Defff]

который, к тому же, может закешироваться и ненавязчиво использоваться повторно в куче мест),

Хитро улыбаясь, — а что, сss файл намного хуже кешируется? 2. Скрипты создают бо'льшую нагрузку на браузер, нежели сss. 3-е и решающее, делал я вещицу для себя, — понравился ход решения и показался занятным. Поэтому выложил, посколь задачка интересная.
Собственно задачка, -внутренний призыв к читателю, — попробуйте сделать лучше(сложить кубик рубика, — это занимательные задачки Перельмана -./.конечно если есть время и интерес./

[GoldenHind]

Да что вы так заводитесь?
Всем же понятно, что делалось для фана.
Практическая ценность решения нулевая, если не отрицательная, но сам факт понимания того, что можно сделать и так, достаточно ценен.
Нагрузка на браузер? От скрипта, добавляющего всего лишь одно свойство одному элементу? Да «в эпоху Аякса» (ваши же слова)? Да вы лукавите.
Хороший эксперимент. Хорошая демонстрация возможностей css. Разминка для мозга — всё здорово. Поймёт не каждый, но кому интересно, тот поймёт и оценит.
Просто не надо это решение позиционировать как практическое, и не надо удивляться, когда его таковым не воспринимают.

[GoldenHind]

да ну при чём тут демагогия?
Всё же очевидно. Автор нашёл интересную возможность, поделился на хабре, рассчитывая на то, что местное население оценит тоже. Тоже понятно: хабр вроде как позиционируется как сообщество айтишников — людей, двигающих прогресс вперёд.
А тут вдруг взяли и обругали.
Признаться честно, я такого рода открытия тоже время от времени делаю, но публиковаться не хватает духа как раз из-за того, что вот точно так же обругать могут, что это большинству читателей неинтересно будет.

[Defff]

Просто не надо это решение позиционировать как практическое

Ну начало cтатьи точно соответствует кино: — 31декабря «Мы все вместе ходим в баню», и далее описание короткого приключения, а тут завелось как-то по- серьезному, хотя аргументы — слабые.
«Нагрузка на браузер? От скрипта, добавляющего всего лишь одно свойство одному элементу? » — «Нагрузка от чекита, той же длины что кнопка input во многих спойлерах? „

Спасибо, что поняли про задачку разминка для мозга… Просто топик завёл… уже инерция, пойду спать, Вам, — удачи в новом дне.

[Defff]

SelenIT2, Возможно, в некоторых частных случаях может быть уместно использование псевдокласса :target для этой

Имхо, «:target» — не Айс — чекит забавней — если потыкать по аккордиону (по ссылке), а потом попробовать вернуться на исходную страницу, стартовую страницу, — число страниц растёт согласно кол-ву кликов.

[Defff]

Тут возможно в использовании таргет, есть плюс, — запоминании позиции меню, при переходе на новую страницу, вместо типового кукис запоминания. Для спойлеров конечно не айс.

> а вот input-ы c label-ами для каждого спойлера

label(ей), — нет(ниже есть пояснения, почему)

[Defff]

Aingis, не буду спорить, кому то зимой захотелось свежих огурцов, но зимой это не кошерно, нарушает установленный распорядок. Вот просто под Новый год, когда все заботы висят, захотелось отойти от обыденного…

[Defff]

Aingis: появляется лишняя точка фокуса

А это плохо? — Вероятно кто-то найдёт это нужным
Собственно спойлер проходит обкатку в постах на форумах.

[tenbits]

tabindex="-1"

— что бы не споткнутся

[tenbits]

Простите, комменты читаю по диагонали — пропустил. Буду по внимательнее.

[Defff]

Я знаю, потому и написал: «…хоть бы tabindex="-1" приписали…»

Да я не против — но расчитываю, для тех кому нужно — сами поправят ( Сейчас внесу в комменты)
На форумах, где спойлер тестировался, достаточно удобно табом передвигаться по спойлерам, кроме нижней формы и главного меню, там элементов с фокусом нет, фокусировка на форме ввода — автомат по клику на «цитату»

[DjPhoeniX]

Не далее, как сегодня вечером, пытался сделать спойлеры без JS. Не получилось. И тут ваша статья… Спасибо :)

[frol]

Не работает в ФФ 18.0.1, Kubuntu 12.04, margin задан нормально, но он не «накрывает» текст «Показать».

[kafeman]

Аналогично. Курсор даже не меняет свой вид (на указательный палец).

[kafeman]

Но если вернуть checkbox через Firebug, то клик на него скрывает/раскрывает спойлер.

[Kolonist]

Под ArchLinux x86_64 тоже не работает. Вероятно, под другими дистрибутивами Linux в FF 18.0.1 тоже не будет работать.

[Defff]

frol, Kubuntu 12.04 — нет к сожалению, но в ХP и Win7-8 работает

[kamazee]

Та же ситуация.
Ubuntu, Firefox 18.
Чекбокс куда-то уехал:

[Defff]

Хм, интересно как бы реагировали на самолёт Райтов начале 20 века? Подобного рабочего варианта чисто на сss в инете не найдено, Надо отметить, что мучительные искания работоспособной версии кода вызвало изъятие <label> из использования в спойлере перед чекитом, посколь тег <label> приводил к необходимости прописывания в каждом экземпляре input в спойлере нового ID, что создавало лишние «движения» серверу.

[Carduelis]

Label не всегда нужно связывать по id. Достаточно поместить input и любые другие теги внутрь label. Тогда по клику по любым другим тегам, будет искомое действие. И все без id/name.

[Defff]

Carduelis,
C оберткой в label нельзя выстроить конструкцию css скрытия, (*если только не обернуть весь спойлер, тогда кликнуть, к примеру по ссылке в его контенте нельзя без скрытия… Тут на затее не одна голова была сломана

[splav_asv]

На android не заработало демо, ни в родном браузере ни в fx beta… Android 4.1

[Piterski]

Вот интересный пример через этот же псевдокласс — proto.io/freebies/onoff/

p.s ксатит, кто-нибудь подскажет что вообще означают подобные конструкции?

.spoiler >  input + .box > blockquote{
    display: none;
}

Что значит + а что >

[druf]

Соседние и дочерние селекторы:
htmlbook.ru/samcss/sosednie-selektory
htmlbook.ru/samcss/dochernie-selektory

[Defff]

Piterski:, Вот интересный пример через этот же псевдокласс

Это прошлогодний наш вариант, неудобства были описаны:

посколь тег label приводил к необходимости прописывания в каждом экземпляре input в спойлере нового ID, что создавало лишние «движения» серверу.

[vanxant]

В ИЕ9 (вин7) область для клика смещена вверх относительно текста.

[Defff]

Если можно — ccылку на скриншот? /для ИЕ обычно достаточно условного коммента/

[eZzZz]

Палец вверх, кто кликал на Показать! :)

[bRuz]

В примере минус с плюсом нужно поменять местами. Развернутый — минус, свернутый — плюс

[Defff]

Поменял, (вчера досили сервис с первичной картинкой — пришлось срочно перезаливать — перевставлять)

[expression]

[sarcasm] Предлагаю автору написать статью о том как можно сверстать таблицу не испульзуя table [/sarcasm]

[Defff]

Записал в ежедневник //Куда деваться, если не все публикуют идеи Посмотрел

[jab]

А если так (для мелких кусков текста):

.content {
background-color:white;
}

.content  .spoiler{
color:white;
background-color:silver;
}

.content  .spoiler:hover{
color:black;
}

[Defff]

jab, Да код, в принципе, — конструктор. Можно баловаться — править дизайн в своё удовольствие, минималистически необходимые строки для работы кода даны в начале топика, — большой код, это уже личные предрасположения.

[fcunited]

В ИЕ8 — наличествует пунктирная обводка чекит-бокса при фокусе;

комменты не читал, слишком много их, может уже кто-то и предложил решение этой проблемы, навесить на бокс при фокусе CSS-свойство:

outline:none;

htmlbook.ru/css/outline

[Defff]

fcunited, Cпс!