Vor kurzem war ich nochmal im OS X AppStore unterwegs und da sprang mir die Funktion der Sterne-Bewertung ins Auge. Sie ist im Grunde nichts besonders. Man hovert über einen Stern, dieser und alle voranstehenden Sterne färben sich ein und rechts erscheint eine kleine Beschreibung des gehoverten Sternchens.
Dennoch stellte ich mir die Frage ob und wie aufwändig setzt man das pur in HTML und CSS um?“. Allzu aufwändig war es nicht. Zum Glück. Nachfolgend zeige ich euch und wie ich es gemacht habe.

HTML Markup

Zu allererst brauchen wir (natürlich) HTML Markup (klicke auf „view compiled“ um das kompilierte HTML zu sehen):

See the Pen Apple AppStore styled star rating in pure HTML/CSS by Adrian Lambertz (@adrianlambertz) on CodePen.

Für jeden Stern brauchen wir ein span Element, welches mit einem data-Attribut ausgestattet ist. Dieses wird die Beschreibung, die später beim Hovern über den jeweiligen Stern angezeigt wird.

Um die Sterne habe ich zwei Wrapper gesetzt, die das Konstrukt zusammenhalten.

Der Wrapper „.review-holder“ ist wichtig für die Positionierung der Beschreibungs-Pseudoelemente. Es zieht per position:relative die Positionieren der position:absolute gestylten :after Elemente auf sich und cleart in einem auch das Floating der Sterne. (Welches wiederum wichtig ist, damit der Hoverstate des „.review“ Wrappers nicht auch zwischen den Sternen greift). Der „.review“ Wrapper kümmert sich um das Hovern.

CSS

See the Pen Apple AppStore styled star rating in pure HTML/CSS by Adrian Lambertz (@adrianlambertz) on CodePen.

Das CSS arbeitet hauptsächlich mit Pseudoelementen. Wenn ihr euch das CSS genauer anseht, werdet ihr sehr schnell bemerken wieso. Über die Pseudoelemente setze ich die Stern-Icons (übrigens mit dem herausragenden Tool IcoMoon erstellt) und lese beim Hovern die Beschreibungen aus den data-Attributen aus und setze sie in :after Pseudoelementen.

Eine „größere“ Heruasforderung war die Hover-Funktion. Es soll ja nicht nur der gerade gehoverte Stern animiert werden, sondern auch alle davorstehenden. Leider gibt es keine „select-before“ CSS Selektoren. Allerdings gibt es den „Sibling-Selector“ ( span ~ span ) welcher alle nachkommenden Elemente anspricht.

Somit musste der Spieß umgedreht werden. Beim Hovern auf den Wrapper „.review“ werden alle Sterne (spans) rot eingefärbt. Die nach dem gehoverten span werden allerdings wieder auf den Ursprungsstyle gesetzt. So konnte der selbe Effekt hergestellt werden.

Resultat

See the Pen Apple AppStore styled star rating in pure HTML/CSS by Adrian Lambertz (@adrianlambertz) on CodePen.

Hättest Du es anders gemacht? Berichte es mir in einem Kommentar!

Hinweis

Wie du vielleicht schon bemerkt hast bezieht es sich hier wirklich nur auf Grundaufbau und Styling. Es wurde noch keinerlei Funktion für die Speicherung einer Bewertung o.Ä. vorgesehen! (Wird es bei diesem Beispiel auch nicht.)