Звездный рейтинг и закладки на чситом CSS

8 ноября 2011 г.

Не так давно мне было поручено создать на одном из сайтов звездный рейтинг. Вся беда была в том, что все найденные мной решения в интернете предпологали наличие javascript-библиотеки (jQuery, Mootools и т.д.), что, естественно, тянуло за собой несколько ненужных Кб. Конечно, скажите Вы, можно обойтись и без этих библиотек и написать на звездный рейтинг на чистом javascript, но меня это тоже не устраивало. Зачем писать лишний код, когда есть такая замечательная вещь, как CSS3 со своими псевдо-элементами, которые значительно упростят задачу?

Дабы не разводить долгую дискусию, сразу приведу пример создания звездного рейтинга на чистом CSS.

Как можно заметить, CSS-код совсем небольшой, а результат отличный. Для создания такого рейтинга, я использовал радио-кнопки, которые скрыл от глаз пользователя, label-элементы, в которых расоложенны div-ы самих звездочек. Для большей оптимизации я предварительно закодировал png-файл в base64. Теперь для расположения такого рейтинга в любой части сайта достаточно добавить небольшой html-код и подключить css-файл.

Плюсы:

  • Небольшой код
  • Картинка в css в base64
  • Без javascript‘а
  • Любое количество рейтингов на странице

Минусы:

  • Требуются небольшие хаки для IE
  • Невозможно сделать частичный выбор рейтинга

Как мы заметим, плюсов в два раза больше, что не может радовать.

Получив такой отличный результат, ну и задание сделать закладки (табы), я загорелся идей отречения от javascript’а и использованием только CSS.

Сразу приведу пример полученного результата. Как Вы наверное уже заметили, я использовал точно такую же заготовку, как и в предыдущем примере, когда создавал рейтинг. Т.е. мы работаем точно с такими же элементами и по такому же принципу.

Смею заметить, что плюсы и минусы точно такие же, как и при использование рейтинга на чистом CSS.

Теги:
рубрика Сайтостроение