Продолжая тему небольших полезных CSS-решений, предлагаю вашему
вниманию интересную реализацию механизма рейтингов. С виду — всё
просто: пять звёздочек, клик по каждой фиксирует рейтинг на позиции от
одного до пяти баллов. Если же какой-то рейтинг уже имеется, при
наведении он должен сбрасываться, чтобы пользователь имел возможность
выразить своё мнение.
Каких только решений не придумано для этой тривиальной задачи — от сомнительного списка элементов <img>
до более-менее внятных решений с помощью фоновых изображений. Но одно
неизменно — всё это сдобрено хорошей порцией JS-кода, отвечающего за
необходимое поведение. Что вполне логично приводит к тому, что без JS,
в лучшем случае, не видно всей красоты, а в худшем — вообще нельзя
проголосовать. В общем, не слишком хорошо.
Поэтому я предлагаю новое решение: пять звёздочек и его особенности:
- Вся динамика максимально вынесена в CSS при помощи псевдо-класса
:hover ,
JS применяется только для фиксирования результата голосования и для
того, чтобы заставить IE6 понимать указанный псевдо-класс не только для
ссылок, за счёт переключения дополнительного класса phover при взаимодествии с контролом. - Следовательно, при отключённом JS, во всех браузерах, кроме IE6 и
младше, вся красота со звёздочками продолжает работать, а сам процесс
голосования становится простым переходом по ссылке.
- Для отрисовки звёздочек используется только одна картинка, таким образом — только один запрос и контрол уже готов к работе.
- Потенциально, голосование становится возможно даже при отключённых
картинках — в таком случае рейтинг выглядит как прогресс-бар.
Очевидность контрола в этом случае ухудшается, но и это уже ценно.
Самая интересная часть CSS-кода:
.voting A.cur, .voting A:hover, .voting:hover A.cur:hover, .voting:hover A:hover { background:#FC0 url(../i/stars.png) no-repeat; } .voting:hover A.cur { background:none; }
Признаюсь честно, вещей вроде E:hover E:hover { … } мне до сих пор писать не приходилось.
Также хотелось бы упомянуть про интересное JS-решение для определения версии IE, чтобы для шестой его версии и младше эмулировать псевдо-класс :hover для списков. И вот каким образом я получаю переменную ltIE7 (less than IE7):
var ltIE7 = false /*@cc_on @if (@_jscript_version < 5.7) ltIE7 = true @end @*/
Эта пляска с собачками называется «условное выполнение»
(Conditional Compilation) и формально вообще не является JavaScript'ом,
это JScript. Если я не ошибаюсь, только его IE и понимает, а
официальный JavaScript работает только благодаря довольно широкой
совместимости этих языков. Что-то до боли знакомое, вы не находите?
Прямо условные комментарии (Conditional Comments), только в
JS-реинкарнации. Кто знает, если копнуть MSDN поглубже, может быть найдётся что-то похожее и для CSS?
По аналогии с предыдущим примером, можно получить и переменную ltIE6 (less than IE6), вычислив версию JScript, использующуюся в браузере. Для IE6 она равна 5.5:
@if (@_jscript_version < 5.6) ltIE6 = true @end
Более подробное описание этой чудо-технологии можно найти в статье «Conditional Compilation Variables». |