Верстка рейтингов

Уже наверное встречал в сети блоки с оценкой чего либо (фильма, мобильного телефона, статьи и т.п.), что-то вроде этого:

Рано или поздно каждый кодер сталкивается с такой задачей. И решить ее можно по разному.

Способ 1 — дедовский метод

Вырезаем две картинки: одна для пустого значения (в нашем случае это звездочка), другая для заполненного. Выводим на сайт пять картинок, сколько из них нужно пустых, а сколько заполненных определяет алгоритм программиста:

<div class="productRate">
	<img src="path-to/full-star.png" alt="" width="31" height="28" />
	<img src="path-to/full-star.png" alt="" width="31" height="28" />
	<img src="path-to/full-star.png" alt="" width="31" height="28" />
	<img src="path-to/empty-star.png" alt="" width="31" height="28" />
	<img src="path-to/empty-star.png" alt="" width="31" height="28" />
</div>

Какие же тут недостаки?

1. для небольшого блока потребовалась куча строк — не лучшим образом скажется на читаемости кода, поисковой и сео оптимизациях;
2. потребуется две отдельные картинки — снова же скорость загрузки страницы, нагрузка на сервер;
3. использование картинок (тег <img>) для оформления, соответственно написать что-то вразумительное в alt нет возможности, а google предупреждал, что лучше так не делать;
4. программисту, который имеет готовое число рейтинга, все равно придется дополнительно думать и писать код для корректного вывода этого самого рейтинга на сайте.

И на мой взгляд самый большой недостаток — практически нереальность вывода рейтинга со значением не кратным 1/N, где N — к-во возможных оценок в рейнтинге (в нашем примере 5). Например, попробуй при такой верстке вывести значение равное 64%. На сайте должно получится что-то вроде такого:

Способ 2 — достойный

Этот вариант решает все вышеперечисленные проблемы. Алгоритм для нашего примера:

1. делаем контейнер, задаем ему фон с одной пустой звездой, которая размножается по оси x (background-repeat: repeat-x);
2. в него вкладываем блок, с фоном полной звезды (и тут фон множиться по оси x). По умолчанию этот блок имеет длину (width) раную 0;
3. в HTML коде, с помощью атрибута style, устанавливаем длину вложенного блока равную значения рейтинга.

<div class="productRate">
    <div style="width: 64%"></div>
</div>

CSS:

.productRate {
background: url(path-to/empty-star.png);
width: 150px;
height: 32px;
}
.productRate div {
background: url(path-to/full-star.png);
width: 0;
height: 100%;
}

Разницу трудно не заметить. И поверь, программист тебе будет благодарен за такой код.

Заметка

Скептики могут сказать, что в таком блоке нерeально будет реализовать голосование (когда пользователь кликает на необходимую звезду, тем самым ставя свою оценку). Но javascript довольно легко решает и эту задачу с помощью определения координат внутри блока.

Для уменьшения числа отдельных картинок тут смело можно применять технику спрайтов.

Интересно

• Рейтинг со звездами на CSS