smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Star-Rating mit CSS ohne zusätzliche Grafiken

30. Mai 2012
Stephan
Star-Rating (Sternebewertung)

Seitdem in den Suchergebnissen von Google auch Sternebewertungen angezeigt werden können, ist ein richtiger Hype ums Star-Rating entstanden. Ich will hier aber nicht darauf eingehen, was genau ihr tun müsst, damit Google für eure Website eine Sternbewertung anzeigt, denn zu dem Thema gibt es bereits viele gute Artikel (z.B. bei bonek.de).

Vielmehr möchte ich euch in diesem Artikel zeigen, wie ihr mittels ein wenig CSS eine Sternebewertung (Star-Rating) umsetzen könnt. Dabei zeige ich euch, wie ihr auch ohne Einsatz von zusätzlichen Grafiken und damit einhergehenden HTTP-Requests ein ansehnliches Star-Rating erstellen könnt.

CSS-Star-Rating in Aktion

Bevor ich euch im Detail zeige, wie ihr euer eigenes CSS-basiertes Star-Rating umsetzen könnt, werde ich euch im Folgenden erst mal einige mögliche Beispiele aufzeigen.

5-Sterne-Bewertung in 3 verschiedenen Farben und Größen:

5-Sterne-Bewertung mit zusätzlichen Zahlen:

12345

3-Sterne-Bewertung mit 2 gefüllten Sternen:

Unicode-Zeichen anstatt Grafik

Anstatt für unser Star-Rating Grafiken zu verwenden, nutzen wir einfach Unicode-Zeichen als Stern-Vorlage. Als unselektierten Bewertungsstern nutzen wir hierfür das Unicode-Zeichen , welches auch mittels &#9734 dargestellt werden kann. Das Unicode Zeichen bzw. &#9733 werden wir als selektierten Bewertungsstern nutzen.

Der Vorteil beim Einsatz von Unicode-Zeichen ist, dass wir die zum Laden der Sterngrafiken zusätzlichen HTTP-Requests einsparen. (Natürlich könnte man auch CSS-Sprites nutzen, wodurch der Vorteil eigentlich wieder hinfällig wird). Einen weiteren Vorteil gegenüber dem Einsatz von Grafiken sehe ich darin, dass innerhalb eines Responsive Designs die Sterne z.B. für mobile (Touchscreen-)Endgeräte einfach mittels der CSS-Anweisung font-size vergrößert werden können.

Nichtsdestotrotz gibt es aber auch Nachteile, wie z.B. der Punkt, dass wir die Sterne grafisch eigentlich nicht großartig anpassen können. Leider gibt es derzeit aber auch noch ein K.O.-Kriterium und zwar, dass die vorgestellte Star-Rating-Variante schneinbar nur im Firefox und Chrome korrekt angezeigt wird.

HTML-Markup

Als erstes widmen wir uns dem HTML-Markup, welches relativ überschaubar ist:

<div class="rating">
    <span>☆</span>
    <span>☆</span>
    <span>☆</span>
    <span>☆</span>
    <span>☆</span>
</div>

In diesem Beispiel erstellen wir uns also eine 5-Sternebewertung.

CSS

Im Folgenden die benötigten CSS-Anweisungen:

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}
.rating span {
    display: inline-block;
    position: relative;
    width:1.1em;
    font-size:1.8em;
    cursor:pointer;
}
.rating span:hover:before,
.rating span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color:#ffff00;
    text-shadow:0 0 1px #666;
}
.rating .filled:before {
    content: "\2605";
    position: absolute;
    color:gold;
    text-shadow:0 0 1px #666;
}

Mit diesem bisschen Code, sollte unser Star-Rating nun auch schon funktionieren. Angemerkt sei, dass die Unicode-Zeichen in CSS als Hexzahl angegben werden. Um für ein Unicode-Zeichen die dazugehörige Hexzahl zu ermitteln, gibt es diverse Tools.

Die Klasse filled kann dazu genutzt werden, Sterne bereits vorzuselektieren.

Für nähere Informationen zu den Besonderheiten des CSS-Codes (z.B. Verwendung des „General Sibling Combinator“) verweise ich auf CSS-Tricks.com, da ich die Grundidee von dort habe.

Ergebnis

Unser Star-Rating würde nun so aussehen:

Fazit

Auch ohne Grafiken lässt sich mit mit CSS ein einfaches und doch recht ansehnliches Star-Rating erstellen. Der nächste Schritt wäre es nun die Bewertungen der Leser auch zum Server zu senden und dort zu speichern. Das wird dann wahrscheinlich Thema in einem der nächsten Artikel :).

Was haltet ihr von dieser rein CSS-basierten Star-Rating-Umsetzung?

Update: Da diese vorgestellte Variante nicht in allen gängigen Browsern korrekt dargestellt wurde, gibt es nun eine angepasste Cross-Browser kompatible CSS Star-Rating-Variante.

Kommentare  
6 Kommentare vorhanden
1 Benny schrieb am 3. Juni 2012 um 20:47 Uhr

Netter und gut geschriebener Artikel. 🙂
Denke CSS Star Ratings bietet eine Alternative zu den ganzen Ratingsystemen die JavaScript verwenden.

Gruß Benny

2 Stephan L. schrieb am 4. Juni 2012 um 10:50 Uhr

Hi Benny,

Danke dir 🙂

Da diese Version leider nicht allen modernen Browsern funktionierte, habe ich einfach noch mal einen Artikel zu diesem Thema mit einer überarbeiteten (Cross-Browser-)Version vorgestellt :).

Gruß Stephan

3 Benny schrieb am 4. Juni 2012 um 15:59 Uhr

Hi Stephan
Werde mir die überarbeitete Version auch mal durchlesen. 🙂
So nebenbei, wärst du interessiert an einem Linktausch (Partnerlink)?

Gruß Benny

4 Stephan L. schrieb am 5. Juni 2012 um 14:26 Uhr

Habe deine Website in meine Link-Empfehlungsliste mit aufgenommen 🙂 (Was exklusiveres gibts leider nicht :P)

Gruß Stephan

5 Benny schrieb am 5. Juni 2012 um 17:41 Uhr

Danke 🙂
Habe das selbe gemacht
Gruß Benny

6 Thomas schrieb am 18. Februar 2016 um 09:16 Uhr

Und wie wird das ganze für den jeweiligen Artikel gespeichert?

LG

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!