HTML+CSS индикатор за оценка със звезди

След като за оценки със звезди (например за хотели) в продължение на години ползвах прост подход с елемента <img>, много ми се искаше за един нов проект да мина с по-добро решение. Наложи ми се да си поиграя с няколко решения в интернет, докато създам решение, което да може да се вгражда и насред текст, без да нарушава потока на реда. Първо опитах с решенията на José Airosa “Easy CSS Star Rating Layout” (1) и на Markus Weichselbaum “How to use CSS to display rating stars” (2).

Основната идея и в двете е да има <div>, който да приема ширина според стойността на оценката (примерно 4 звезди) и втори <div>, който да допълва за контраст до максимално възможната оценка (примерно 5 звезди). Елементите <div> могат да имат за фон повторено изображение (background-image) на празна/запълнена звезда (за оценка със звезди) или фонов цвят (background-color).

Понеже в случая роля играят две стойности, би трябвало задачата да се реши просто с два <div>а. Наистина (2) се справя само с два <div>а. Макар че (1) ползват три <div>а, третият <div> може да предлага друго предимство.

Да отбележим също, че моята цел беше просто изобразяване на оценката. Не ми беше необходима възможност потребителите да гласуват за дадена оценка.
Освен това исках индикаторът да може да показва и дробни оценки (като 3.7 звезди).

Проблемът ми с (1) и (2) беше, че тъй като<div>овете са блокови елементи, оценката винаги се показваше а нов ред. Опитах множество вариации със задаване <div>овете да са вградени (inline) или вграденоблокови (inline-block) и/или да ползвам <span>ове вместо <div>ове. Постигнах някакъв успех, но бях разочарован, че Internet Explorer 8 все така показваше оценката на нов ред.

Най-сетне попаднах в интернет на по-обстоен текст (за съжаление загубих линка), в който се споменаваше, че Internet Explorer 8 всъщност умее да поддържа inline-block, но само когато се прилага за елементи, които не са блокови поначало, т.е. не може да ги прилага за <div>ове. Това ме доведе до работещо съчетание от <span>ове и inline-block.

Така стигнах до следния HTML код за оценката:

<span class="rating_bar" title="Оценка 3,70 звезди"><span style="width:74%"></span></span>

(Заглавието title в <span> не е необходимо, то просто позволява на повечето браузъри да дават визуална или звукова подсказка за незрящи, когато мишката застане върху оценката.)

Ето и съответните CSS правила:

/*
Ползвайте така:
<span class="rating_bar"><span style="width:27%"></span></span>
*/
/* Default */
.rating_bar {
	display:inline-block;
	/* 70 = 14*5; 14 е ширината на фоновата картинка */
	width: 70px;
	/* По-долу залагаме подравняване вляво, */
	/* иначе изобразяването може да се провали */
	/* ако външен елемент е заложил друго подравняване */
	text-align:left;
	/* Тук е картинката с празна звезда */
	background: url(/img/stars/star_empty_14x12.png) 0 0 repeat-x;
}

.rating_bar span {
	display:inherit;
	/* 12 е височината на фоновата картинка */
	height: 12px;
	/* Тук е картинката със запълнена звезда */
	background: url(/img/stars/star_full_14x12.png) 0 0 repeat-x;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s