Не так давно мне было поручено создать на одном из сайтов звездный рейтинг. Вся беда была в том, что все найденные мной решения в интернете предпологали наличие javascript-библиотеки (jQuery, Mootools и т. д.), что, естественно, тянуло за собой несколько ненужных Кб. Конечно, скажите Вы, можно обойтись и без этих библиотек и написать на звездный рейтинг на чистом javascript, но меня это тоже не устраивало. Зачем писать лишний код, когда есть такая замечательная вещь, как CSS3 ссо своими псевдо-элементами, которые значительно упростят задачу?
Дабы не разводить долгую дискусию, сразу приведу пример создания звездного рейтинга на чистом CSS.
Как можно заметить, CSS-код совсем небольшой, а результат отличный. Для создания такого рейтинга, я использовал радио-кнопки, которые скрыл от глаз пользователя, label-элементы, в которых расоложенны div-ы самих звездочек. Для большей оптимизации я предварительно закодировал png-файл в base64. Теперь для расположения такого рейтинга в любой части сайта достаточно добавить небольшой html-код и подключить css-файл.
Плюсы:
- Небольшой код
- Картинка в css в base64
- Без javascript’а
- Любое количество рейтингов на странице
Минусы:
- Требуются небольшие хаки для IE
- Невозможно сделать частичный выбор рейтинга
Как мы заметим, плюсов в два раза больше, что не может радовать.
Получив такой отличный результат, ну и задание сделать закладки (табы), я загорелся идей отречения от javascript’а и использованием только CSS.
Сразу приведу пример полученного результата. Как Вы наверное уже заметили, я использовал точно такую же заготовку, как и в предыдущем примере, когда создавал рейтинг. Т. е. мы работаем точно с такими же элементами и по такому же принципу.
Смею заметить, что плюсы и минусы точно такие же, как и при использование рейтинга на чистом CSS.
Думаю нет смысла писать про сами css-файлы и правила. Буду рад, если мои решения будут использованны любым из хабралюдей 😉