Comments 65
Добавьте, так кошернее будет
.spoiler > input[type=«checkbox»] {
cursor: pointer;
}
.spoiler > input[type=«checkbox»] {
cursor: pointer;
}
+4
Carduelis, сенкс
0
UFO just landed and posted this here
Не всегда. Например, когда мы хотим сделать текст правее чекбокса другого цвета, то тут этот псевдокласс незаменим.
label span {color: #ccc;}
label input:checked + span {color: #333;}
Когда мы нажали — текст черный, иначе серый
label span {color: #ccc;}
label input:checked + span {color: #333;}
Когда мы нажали — текст черный, иначе серый
+1
Aingis:,«Чистым» такой код невозможно назвать«Чистым» был назван согласно замыслам статьи использовать только теги HTML и css. Вчитывайтесь в замысел топика, иначе минусы за мои вкусы зимой — как то авторитарно!
0
UFO just landed and posted this here
Жизнь вообще штука сомнительная, а что то делать в ней, — тем паче, обязательно спросят — Зачем живешь?
Aingis? Собственно разные выключалки на ява-скрипт много делал, Вашу видел тоже, — неплохо, — но мне захотелось разнообразия, Имхо тут, мне кажется, в полемике, именно ваша работа, реагирующая на «фокус на элементе даёт о себе знать.
Aingis? Собственно разные выключалки на ява-скрипт много делал, Вашу видел тоже, — неплохо, — но мне захотелось разнообразия, Имхо тут, мне кажется, в полемике, именно ваша работа, реагирующая на «фокус на элементе даёт о себе знать.
-1
Дело даже не во вкусах, а в том, что ваш метод, 1) сам по себе хак, 2) требует использовать хак для поддержки старых версий IE, 3) не во всех современных браузерах работает.
+1
идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML
0
Kolonist,« а в том, что ваш метод, 1) сам по себе хак,»С чего вдруг — Хак? Или сss вида: input:checked + elem недопустимо в какой-либо спецификации?
Исходный минималистический код работает во всех браузерах поддерживающих псевдокласс :checked
Весь нюанс более полного кода, — это подвижка input под левый край .spoiler , скрытого overflow-x: hidden, (дабы не было видно окно чекита). Если не стремится к экстремальному скрытию окна чекита, никаких нюансов и нарушений — нет!
-1
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пойлеров: Ссылка
0
UFO just landed and posted this here
Aingis, я не против javascrip. Неужели не забавно решать неординарные задачки?
Если б у меня было желание делать в новый код скриптом… когда весь год только в скриптах и сижу…
И я не навязываю никому свою идею, — вот захотелось сделать,- покрутил — получилось, а потребуется — нет — Ваше дело.
Это как шахматная партия, — интересно и всё. А нужность — дело личных предрасположений и оценок, не так ли?
Если б у меня было желание делать в новый код скриптом… когда весь год только в скриптах и сижу…
И я не навязываю никому свою идею, — вот захотелось сделать,- покрутил — получилось, а потребуется — нет — Ваше дело.
Это как шахматная партия, — интересно и всё. А нужность — дело личных предрасположений и оценок, не так ли?
0
С какого рожна тут чекбокс?Хм, — вспомним, что в эпоху Аякса — чекиты, селекты и input(ы) всех марок — можно увидеть разбросанными по странице, согласно удобству интерфейса, а отсылается — собирается все через FormData и отправляется Аяксом.
чтобы присобачить :checked не по назначениюОпять проводка собственного мнения, — есть спецификация! В которой оглашено применение псевдоклассов. Запреты — не аргументированы
0
UFO just landed and posted this here
Aingis, еще раз :
Пока доступный только в Хроме, вот данный эксперимент на подключение-пробы к переходу текущих браузеров.
идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTMLПоскольку не загорами => details htmlbook.ru/html/details
Пока доступный только в Хроме, вот данный эксперимент на подключение-пробы к переходу текущих браузеров.
0
UFO just landed and posted this here
не по назначению используется сам HTML-элемент inputЗачитайте пожалуста список назначений для чекита? К примеру на стандатных шаблонах форуиа чекит вне формы стоит для скрипта транслита — переводит — не переводить вввод текста — т.е для скрипта(транслита) — это по назначению — для свойства сss cпойлера — нет. Аргументы могут быть лишь одни — спецификация, и предупреждения о багах производителей браузеров. Да и потом, все эти вещи и скрипты и сss для данного применения временны, грядущее HTML5 даёт нам уже тег спойлера с автоматикой. Данная версия лишь отработка сss замены, когда заъочется подключить к контейнеру скрытия плавность хода, скругления и иные диз наработки, поскольку в текущее время они выполнялись по большей части скриптом(Возьмите плавность спойлера на Хабре, а уже 'завтра' css нужно будет адаптировать к details.)
0
SelenIT2. Потом, что Вы мне говорите — «не по назначению используется сам HTML-элемент input»
Кнопка input изначально используется для скрытия/открытия спойлеров! (Давайте теперь спорить за type
Так что аргументы излишества или не по назначению — не убедительны, -существует куча спойлеров с кнопкой инпут, значит спор только за тип — а чем хуже чекит нежели буттон?
Кнопка input изначально используется для скрытия/открытия спойлеров! (Давайте теперь спорить за type
Так что аргументы излишества или не по назначению — не убедительны, -существует куча спойлеров с кнопкой инпут, значит спор только за тип — а чем хуже чекит нежели буттон?
0
который, к тому же, может закешироваться и ненавязчиво использоваться повторно в куче мест),Хитро улыбаясь, — а что, сss файл намного хуже кешируется? 2. Скрипты создают бо'льшую нагрузку на браузер, нежели сss. 3-е и решающее, делал я вещицу для себя, — понравился ход решения и показался занятным. Поэтому выложил, посколь задачка интересная.
Собственно задачка, -внутренний призыв к читателю, — попробуйте сделать лучше(сложить кубик рубика, — это занимательные задачки Перельмана -./.конечно если есть время и интерес./
0
Да что вы так заводитесь?
Всем же понятно, что делалось для фана.
Практическая ценность решения нулевая, если не отрицательная, но сам факт понимания того, что можно сделать и так, достаточно ценен.
Нагрузка на браузер? От скрипта, добавляющего всего лишь одно свойство одному элементу? Да «в эпоху Аякса» (ваши же слова)? Да вы лукавите.
Хороший эксперимент. Хорошая демонстрация возможностей css. Разминка для мозга — всё здорово. Поймёт не каждый, но кому интересно, тот поймёт и оценит.
Просто не надо это решение позиционировать как практическое, и не надо удивляться, когда его таковым не воспринимают.
Всем же понятно, что делалось для фана.
Практическая ценность решения нулевая, если не отрицательная, но сам факт понимания того, что можно сделать и так, достаточно ценен.
Нагрузка на браузер? От скрипта, добавляющего всего лишь одно свойство одному элементу? Да «в эпоху Аякса» (ваши же слова)? Да вы лукавите.
Хороший эксперимент. Хорошая демонстрация возможностей css. Разминка для мозга — всё здорово. Поймёт не каждый, но кому интересно, тот поймёт и оценит.
Просто не надо это решение позиционировать как практическое, и не надо удивляться, когда его таковым не воспринимают.
0
UFO just landed and posted this here
да ну при чём тут демагогия?
Всё же очевидно. Автор нашёл интересную возможность, поделился на хабре, рассчитывая на то, что местное население оценит тоже. Тоже понятно: хабр вроде как позиционируется как сообщество айтишников — людей, двигающих прогресс вперёд.
А тут вдруг взяли и обругали.
Признаться честно, я такого рода открытия тоже время от времени делаю, но публиковаться не хватает духа как раз из-за того, что вот точно так же обругать могут, что это большинству читателей неинтересно будет.
Всё же очевидно. Автор нашёл интересную возможность, поделился на хабре, рассчитывая на то, что местное население оценит тоже. Тоже понятно: хабр вроде как позиционируется как сообщество айтишников — людей, двигающих прогресс вперёд.
А тут вдруг взяли и обругали.
Признаться честно, я такого рода открытия тоже время от времени делаю, но публиковаться не хватает духа как раз из-за того, что вот точно так же обругать могут, что это большинству читателей неинтересно будет.
0
Просто не надо это решение позиционировать как практическоеНу начало cтатьи точно соответствует кино: — 31декабря «Мы все вместе ходим в баню», и далее описание короткого приключения, а тут завелось как-то по- серьезному, хотя аргументы — слабые.
«Нагрузка на браузер? От скрипта, добавляющего всего лишь одно свойство одному элементу? » — «Нагрузка от чекита, той же длины что кнопка input во многих спойлерах? „
Спасибо, что поняли про задачку разминка для мозга… Просто топик завёл… уже инерция, пойду спать, Вам, — удачи в новом дне.
0
UFO just landed and posted this here
UFO just landed and posted this here
SelenIT2, Возможно, в некоторых частных случаях может быть уместно использование псевдокласса :target для этойИмхо, «:target» — не Айс — чекит забавней — если потыкать по аккордиону (по ссылке), а потом попробовать вернуться на исходную страницу, стартовую страницу, — число страниц растёт согласно кол-ву кликов.
0
UFO just landed and posted this here
Aingis, не буду спорить, кому то зимой захотелось свежих огурцов, но зимой это не кошерно, нарушает установленный распорядок. Вот просто под Новый год, когда все заботы висят, захотелось отойти от обыденного…
-1
Aingis: появляется лишняя точка фокусаА это плохо? — Вероятно кто-то найдёт это нужным
Собственно спойлер проходит обкатку в постах на форумах.
0
UFO just landed and posted this here
tabindex="-1"
— что бы не споткнутся0
UFO just landed and posted this here
Простите, комменты читаю по диагонали — пропустил. Буду по внимательнее.
0
Я знаю, потому и написал: «…хоть бы tabindex="-1" приписали…»
Да я не против — но расчитываю, для тех кому нужно — сами поправят ( Сейчас внесу в комменты)
На форумах, где спойлер тестировался, достаточно удобно табом передвигаться по спойлерам, кроме нижней формы и главного меню, там элементов с фокусом нет, фокусировка на форме ввода — автомат по клику на «цитату»
0
Не далее, как сегодня вечером, пытался сделать спойлеры без JS. Не получилось. И тут ваша статья… Спасибо :)
+3
Не работает в ФФ 18.0.1, Kubuntu 12.04, margin задан нормально, но он не «накрывает» текст «Показать».
+4
+1
Хм, интересно как бы реагировали на самолёт Райтов начале 20 века? Подобного рабочего варианта чисто на сss в инете не найдено, Надо отметить, что мучительные искания работоспособной версии кода вызвало изъятие <label> из использования в спойлере перед чекитом, посколь тег <label> приводил к необходимости прописывания в каждом экземпляре input в спойлере нового ID, что создавало лишние «движения» серверу.
-4
Label не всегда нужно связывать по id. Достаточно поместить input и любые другие теги внутрь label. Тогда по клику по любым другим тегам, будет искомое действие. И все без id/name.
0
На android не заработало демо, ни в родном браузере ни в fx beta… Android 4.1
0
Вот интересный пример через этот же псевдокласс — proto.io/freebies/onoff/
p.s ксатит, кто-нибудь подскажет что вообще означают подобные конструкции?
Что значит + а что >
p.s ксатит, кто-нибудь подскажет что вообще означают подобные конструкции?
.spoiler > input + .box > blockquote{
display: none;
}
Что значит + а что >
0
Соседние и дочерние селекторы:
htmlbook.ru/samcss/sosednie-selektory
htmlbook.ru/samcss/dochernie-selektory
htmlbook.ru/samcss/sosednie-selektory
htmlbook.ru/samcss/dochernie-selektory
0
Piterski:, Вот интересный пример через этот же псевдоклассЭто прошлогодний наш вариант, неудобства были описаны:
посколь тег label приводил к необходимости прописывания в каждом экземпляре input в спойлере нового ID, что создавало лишние «движения» серверу.
0
В ИЕ9 (вин7) область для клика смещена вверх относительно текста.
+1
Палец вверх, кто кликал на Показать! :)
-2
В примере минус с плюсом нужно поменять местами. Развернутый — минус, свернутый — плюс
0
[sarcasm] Предлагаю автору написать статью о том как можно сверстать таблицу не испульзуя table [/sarcasm]
+1
А если так (для мелких кусков текста):
.content {
background-color:white;
}
.content .spoiler{
color:white;
background-color:silver;
}
.content .spoiler:hover{
color:black;
}
0
jab, Да код, в принципе, — конструктор. Можно баловаться — править дизайн в своё удовольствие, минималистически необходимые строки для работы кода даны в начале топика, — большой код, это уже личные предрасположения.
0
В ИЕ8 — наличествует пунктирная обводка чекит-бокса при фокусе;
комменты не читал, слишком много их, может уже кто-то и предложил решение этой проблемы, навесить на бокс при фокусе CSS-свойство:
outline:none;
htmlbook.ru/css/outline
комменты не читал, слишком много их, может уже кто-то и предложил решение этой проблемы, навесить на бокс при фокусе CSS-свойство:
outline:none;
htmlbook.ru/css/outline
+1
fcunited, Cпс!
0
Sign up to leave a comment.
Cпойлер средствами css…