Продолжая тему небольших полезных CSS-решений, предлагаю вашему вниманию интересную реализацию механизма рейтингов. С виду — всё просто: пять звёздочек, клик по каждой фиксирует рейтинг на позиции от одного до пяти баллов. Если же какой-то рейтинг уже имеется, при наведении он должен сбрасываться, чтобы пользователь имел возможность выразить своё мнение.

Каких только решений не придумано для этой тривиальной задачи — от сомнительного списка элементов <img> до более-менее внятных решений с помощью фоновых изображений. Но одно неизменно — всё это сдобрено хорошей порцией JS-кода, отвечающего за необходимое поведение. Что вполне логично приводит к тому, что без JS, в лучшем случае, не видно всей красоты, а в худшем — вообще нельзя проголосовать. В общем, не слишком хорошо.

Поэтому я предлагаю новое решение: пять звёздочек и его особенности:

• Вся динамика максимально вынесена в CSS при помощи псевдо-класса :hover, JS применяется только для фиксирования результата голосования и для того, чтобы заставить IE6 понимать указанный псевдо-класс не только для ссылок, за счёт переключения дополнительного класса phover при взаимодествии с контролом.
• Следовательно, при отключённом JS, во всех браузерах, кроме IE6 и младше, вся красота со звёздочками продолжает работать, а сам процесс голосования становится простым переходом по ссылке.
• Для отрисовки звёздочек используется только одна картинка, таким образом — только один запрос и контрол уже готов к работе.
• Потенциально, голосование становится возможно даже при отключённых картинках — в таком случае рейтинг выглядит как прогресс-бар. Очевидность контрола в этом случае ухудшается, но и это уже ценно.

Самая интересная часть CSS-кода:

1. .voting A.cur,
2. .voting A:hover,
3. .voting:hover A.cur:hover,
4. .voting:hover A:hover {
5. background:#FC0 url(../i/stars.png) no-repeat;
6. }
7. .voting:hover A.cur {
8. background:none;
9. }

Признаюсь честно, вещей вроде E:hover E:hover { … } мне до сих пор писать не приходилось.

Также хотелось бы упомянуть про интересное JS-решение для определения версии IE, чтобы для шестой его версии и младше эмулировать псевдо-класс :hover для списков. И вот каким образом я получаю переменную ltIE7 (less than IE7):

1. var ltIE7 = false
2. /*@cc_on
3. @if (@_jscript_version < 5.7)
4. ltIE7 = true
5. @end
6. @*/

Эта пляска с собачками называется «условное выполнение» (Conditional Compilation) и формально вообще не является JavaScript'ом, это JScript. Если я не ошибаюсь, только его IE и понимает, а официальный JavaScript работает только благодаря довольно широкой совместимости этих языков. Что-то до боли знакомое, вы не находите? Прямо условные комментарии (Conditional Comments), только в JS-реинкарнации. Кто знает, если копнуть MSDN поглубже, может быть найдётся что-то похожее и для CSS?

По аналогии с предыдущим примером, можно получить и переменную ltIE6 (less than IE6), вычислив версию JScript, использующуюся в браузере. Для IE6 она равна 5.5:

1. @if (@_jscript_version < 5.6)
2. ltIE6 = true
3. @end

Более подробное описание этой чудо-технологии можно найти в статье «Conditional Compilation Variables». Пятизвёздочных вам рейтингов ;)