В предпраздничные дни выдаётся минутка, когда отвлекаясь от забот, хочется окунуться в собственный мир идей, отстраняясь от предстоящего праздника…
В итоге, — идея: Cмастерить спойлер посредством css и HTML, не дожидаясь триумфального шествия HTML5. Выражаю благодарность Octane с javascript.ru форума и devote, без которых идея не осуществилась!
Ранее исследованные попытки в инете делались через псевдоклассы, в основном через :focus, что вело к самоскрытию контейнера, при потере фокуса.
Основа же данной идеи псевдокласс :checked
Мистический код идеи таков:
/* CSS */ .spoiler > input + .box { display: none; } .spoiler > input:checked + .box { display: block; }
<!--// HTML //--> <div class="spoiler"> <input type="checkbox" > <div class="box"> Текст сообщения в спойлере. </div> </div>
Как видим получился кроссбраузерный код, (начиная с ИЕ9/где есть псевдоклассы/ и кончая актуальными весиями остальных браузеров). Cогласно замыслу, — это был «чистый» код!
При попытках расширить действие на ИЕ6-8, (тут, как обычно для ие,- «чистота» эксперимента теряется), и мы подключаем гугловскую библиотеку псевдоклассов для ИЕ:
<!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Cпойлер средствами css</title> <style> .spoiler > input + .box > blockquote{ display: none; } .spoiler > input:checked + .box > blockquote { display: block; } .spoiler > input[type="checkbox"] { border-color:transparent!important; border-style:none!important; background:transparent none!important; position:relative;z-index:1; margin:-10px 0 -30px -230px; } .spoiler span.close, .spoiler span.open{ padding-left:22px; color: #00f!important; text-decoration: underline; } .spoiler > input + .box > span.close { display: none; } .spoiler > input:checked + .box > span.close { background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat; display: inline; } .spoiler > input:checked + .box > span.open { display: none; } .spoiler > input + .box > span.open { background: url(http://st0.bbcorp.ru/img/plus.png) 4px 60% no-repeat; display: inline; } .spoiler blockquote, .spoiler{ padding:1em; border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; } .spoiler { overflow-x:hidden; box-shadow: 0px 3px 8px #808080; border:#E5E5E5 solid 2px; -webkit-box-shadow:0px 3px 8px #808080; -khtml-box-shadow:0px 3px 8px #808080; -moz-box-shadow:0px 3px 8px #808080; -ms-box-shadow:0px 3px 8px #808080; } .spoiler blockquote { margin-top:12px; min-height: 23px; border:#CDCDCD 2px dashed; } </style> <!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]--> </head> <body><div id="wrap" style="padding:200px 40px;width:70%;margin:0 auto;background-color:#fff;height:100%"> <div class="spoiler"> <input style="width:360px;height:45px;" type="checkbox" > <div class="box"> <span class=close>Скрыть</span><span class=open>Показать</span> <blockquote class="Untext"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </blockquote> </div> </div> </body> </html>
Минусы:
В ИЕ8 — наличествует пунктирная обводка чекит-бокса при фокусе;
в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не утомляли себя этими задачами в начальных замыслах.
DEMO
ссылка на оригинал статьи http://habrahabr.ru/post/167151/
Добавить комментарий