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

Update: CSS Star-Rating ohne zusätzliche Grafiken

4. Juni 2012
Stephan
CSS Star-Rating

Im letzten Artikel hatte ich bereits eine Möglichkeit aufgezeigt, wie ihr ein CSS-basiertes Star-Rating erstellen könnt. Leider funktionierte die vorgestellte Variante jedoch nicht in allen gängigen Browsern (nur Firefox und Chrome stellten das Star-Rating korrekt da), weshalb diese Variante eigentlich recht unbrauchbar ist.

Aus diesem Grund stelle ich in diesem Artikel eine angepasste Variante vor, die in allen gängigen Browsern korrekt angezeigt wird.

Beispiel für Cross-Browser kompatibles CSS Star-Rating:

Dieses Beispiel sollte in allen modernen Browser (Firefox, Chrome, Safari, Opera, IE8+) korrekt angezeigt werden:

HTML-Markup

An unserem HTML-Markup hat sich im Vergleich zu bereits vorgestellten Star-Rating-Variante nur das verwendete Unicode-Zeichen geändert.

Wir nutzen dieses Mal (&#9733) auch für die nicht selektierten Sterne:

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

CSS

Im Folgenden die benötigten bzw. verwendeten CSS-Anweisungen:

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating span {
    display: inline-block;
    width: 1.1em;
    font-size: 2.8em;
    color: #ccc;
    cursor: pointer;
    text-shadow: 0 0 1px #666;
}

.rating span:hover,
.rating span:hover ~ span {
    color: gold;
    text-shadow: 0 0 5px #e2e2e2;
}

.rating span:active,
.rating span:active ~ span {
    color: yellow;
}

Im Gegensatz zu der nicht Cross-Browser kompatiblen Star-Rating-Variante nutzen wir nun nicht mehr die CSS-Pseudoklasse before, um die unselektierten Sterne auszutauschen.

Weiterhin gab es noch die Anpassung, dass beim Klick auf einen Stern die Farbe aller selektierten (aktiven) Sterne geändert wird.

Fazit

Dieses angepasste CSS-basierte Star-Rating wird nun in allen modernen Browsern korrekt angezeigt und ist somit auch eine echte Alternative zu grafikbasierten Star-Ratings.

Ein optisch sehr gelungenes Beispiel, bei dem 3D-Sterne mittels CSS erstellt wurden, findet sich unter thinkabouthtml5.com.

Wie findet ihr das vorgestellte rein CSS-basierte Star-Rating?

Kommentare  
8 Kommentare vorhanden
1 Emanuel schrieb am 5. Juni 2012 um 18:24 Uhr

Supr Sache, danke =)

2 Uhren schrieb am 6. Juni 2012 um 05:30 Uhr

Das könnten wir gut im Shop gebrauchen.

3 Torsten schrieb am 17. Juli 2012 um 13:46 Uhr

Coole Idee, sehr smart umgesetzt. Diese Technik müsste sich doch
auch in abgewandelter Form nutzen lassen um ein vorhandenes
Rating anzuzeigen!?
In meinem Fall ist ein Rating als Dezimalwert in einer Datenbank abgelegt.

4 Stephan L. schrieb am 17. Juli 2012 um 14:28 Uhr

Hallo Torsten,

ja, sollte denke ich nicht allzu schwer sein. Relativ einfach ist es natürlich, wenn du nur ganze Zahlen nutzt bzw. deine in der Datenbank vorhandenen Dezimalwerte rundest: ein Rating-Wert von 3,2 würde z.B. 3 ergeben und bei deiner Sterne-Bewertung wären dann 3 Sterne bereits vorselektiert.

Nehmen wir mal an du, du nutzt ein 5-Sterne Rating und zu jeder deiner Blog-Artikel wird das dazugehörige Rating bzw. die Bewertung gespeichert.

Mal angenommen dein Artikel „A1“ hat aktuell eine Bewertung von 2,7. Dann würden wir dass einfach auf 3 runden und wüssten, dass wir 3 von 5 Sternen vorselektieren müssten. Das könnte dann in PHP z.B. so aussehen:

// angenommen, wir haben alle Daten aus der Datenbank geholt
// und unseren Dezimalwert bereits gerundet

$roundedRating = 3
$maxRating = 5

$output = '';

for($i = 0; $i < $maxRating; $i++)
{
    $class = $i < $roundedRating ? ' class="starSelect"' : '';
    $output = '<span' . $class . '>★</span>' . $output;
}

echo '<div class="rating">' . $output . '</div>';

Anschließend müsstest du dann nur noch zu dem bereits vorhandenen CSS (siehe Artikel) Folgendes hinzufügen:

.starSelect {
    color:yellow;
}

Das wäre halt so eine grobe Idee wie man es umsetzen könnte.

Grüße Stephan

5 Fabian schrieb am 16. April 2013 um 21:34 Uhr

Hm, sieht super aus! Ich frage mich nur, wie man ein Star-Rating dieser Art in ein Formular integrieren will? Bin mir der Umsetzung im Moment nicht bewusst.

Liebe Grüße

6 Stephan L. schrieb am 17. April 2013 um 07:27 Uhr

Hallo Fabian,

also es wird wohl auf den Einsatz von JavaScript hinauslaufen. Klickt ein Benutzer auf einen Stern, dann reagierst du mit JavaScript auf das entsprechende Klick-Event. Per AJAX könntest du dann die Daten zum Server hochladen, wo die Daten dann in einer Datenbank gespeichert werden.

Grüße

Stephan

7 Gökhan schrieb am 5. November 2013 um 16:10 Uhr

Hallo,
wie kann man das machen das die gewählten sterne auch bleiben?

p.s sehr gute arbeit ansonsten 🙂

8 Stephan L. schrieb am 5. November 2013 um 20:24 Uhr

Hallo Gökhan,

schau mal Kommentar Nr. 4, da habe ich das Prinzip schon mal kurz erklärt. Anstatt auf Serverseite mit PHP, kannst du natürlich die CSS-Klasse auch dynamisch mithilfe von JavaScript clientseitig setzen.

Gruß Stephan

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

Vielen Dank für dein Kommentar!