Ars Longa, Vita Brevis

May 30, 2008

Пять звёздочек без JavaScript

Рубрика: CSS, HTML
Tags: , , , , ,
Vladimir @ 22:26
RSS 2.0

Кросс-браузерный вариант реализации механизма рейтинга без использования JavaScript

Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS.

Решение Вадима основано на использовании CSS rollovers, плавающих элементах и z-index и выглядит очень красиво. Особенно меня впечатлило то, что его решение будет работать с выключенной загрузкой изображений и отключенным CSS. Весьма приятно, ибо о usability отечественные разработчики задумываются далеко не всегда.

Среди недостатков отмечу следующие:

  1. При использовании IE6 с выключенным JavaScript вся красота перестаёт работать (оффтопик: не могу понять, по каким причинам народ до сих пор сидит на IE6?)
  2. Некоторое неудобство при изменении шкалы: например, если изменить код так, чтобы можно было учитывать полбалла, то помимо ширин придется менять и z-index каждого элемента a. Хотя, в принципе, это мелочь.

Полгода назад я какое-то работал над проектом myfolio.com, там тоже применялось пятизвёздочное голосование (правда, принцип несколько другой). Считая, что тот подход тоже имеет право жить :-), привожу его здесь.

Разметка очень проста:

[-]
View Code HTML
    <!--[if lte IE 6]><a class="ievote" href="#"><table cellpadding="0" cellspacing="0"><tbody><tr><td><![endif]-->
    <ul class="vote">
        <li class="ten"><a href="#rated=10" title="5 stars">5.0</a></li>
        <li class="nine"><a href="#rated=9" title="4.5 stars">4.5</a></li>
        <li class="eight"><a href="#rated=8" title="4 stars">4.0</a></li>
        <li class="seven"><a href="#rated=7" title="3.5 stars">3.5</a></li>
        <li class="six"><a href="#rated=6" title="3 star">3.0</a></li>
        <li class="five"><a href="#rated=5" title="2.5 stars">2.5</a></li>
        <li class="four"><a href="#rated=4" title="2 stars">2.0</a></li>
        <li class="three rated"><a href="#rated=3" title="1.5 stars">1.5</a></li>
        <li class="two"><a href="#rated=2" title="1 star">1.0</a></li>
        <li class="one"><a href="#rated=1" title="0.5 stars">0.5</a></li</span