Sternbewertungen mit sehr wenig CSS

Sternbewertungen sind eines dieser klassischen UX-Muster, mit denen jeder schon einmal herumgespielt hat. Ich hatte die Idee, den UX-Teil mit sehr wenig Code und ohne JavaScript zu erledigen.

Die Markup-Datei verwendet die Unicode-Entität für einen Stern (☆) direkt darin. Wenn Sie eine UTF-8-Zeichensatz haben, sollte das kein Problem sein. Alternativ könnten Sie ☆ verwenden (Rechner für diese Art von Dingen). Sie könnten so viele Sterne verwenden, wie Sie möchten

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

Jetzt müssen wir den „hohlen“ Stern durch einen „soliden“ Stern beim Hovern ersetzen (Galerie zum Finden solcher Zeichen). Einfach, legen Sie ein Pseudo-Element eines soliden Sterns (★) darüber, wenn Sie mit der Maus darüber fahren (`:hover`)

.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

Allein durch die Tatsache, dass es absolut positioniert ist, sind top: 0; left: 0; impliziert (in modernen Browsern jedenfalls). Der solide Stern sitzt also direkt über dem hohlen Stern. Sie könnten sogar die Farbe oder Größe ändern, wenn Sie möchten.

Aber was wir bisher haben, funktioniert nur für einzelne Sterne. Das UX-Muster verlangt, dass alle Sterne gefüllt sind. Zum Beispiel, wenn wir über den 4. Stern fahren, wird der 4. Stern solide, aber auch der 1., 2. und 3.

Über CSS kann kein *vorheriges* Kindelement ausgewählt werden. Es gibt jedoch eine Möglichkeit, *nachfolgende* Kindelemente auszuwählen, über die benachbarten oder allgemeinen Geschwisterkombinatoren. Wenn wir die Reihenfolge der Zeichen buchstäblich umkehren, können wir den allgemeinen Geschwisterkombinator verwenden, um alle Sterne auszuwählen, die visuell *vor* dem Stern erscheinen, über den gehovert wird, aber im HTML *nach* dem Stern, über den gehovert wird.

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

Das ist alles! Das gesamte Sternbewertungs-UX-Muster mit sehr wenig Code. Hier ist der gesamte CSS-Code, um es zum Laufen zu bringen

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

Demo ansehen

Und hier ist ein Dabblet, wenn Sie damit herumspielen möchten.

Tatsächliche Verwendung

Wahrscheinlich wird bei Bewertungssternen sowieso JavaScript beteiligt sein. Wenn ein Benutzer auf einen Stern klickt, wird die Bewertung per Ajax zurückgemeldet und das Widget selbst erhält eine Klasse, um die ausgewählte Anzahl von Sternen dauerhaft anzuzeigen. Da bereits JavaScript beteiligt ist, wäre es dann in Ordnung, es zum Umschalten von Klassen auf den Sternen zu verwenden, um sie funktionsfähig zu machen? Wenn Ihre Anwendung absolut auf JavaScript angewiesen ist, dann ist das in Ordnung. Wenn Sie daran interessiert sind, eine Website zu erstellen, die auch ohne JavaScript funktioniert, dann benötigen diese Sternbewertungen mehr Arbeit. Sie sollten sich Leas Verous Beispiel ansehen, das Radio-Buttons verwendet, was Teil eines Formulars sein könnte, das eingereicht werden kann, um zu „bewerten“, was auch immer es ist, ohne JavaScript.

Andere

Nachdem dies auf Twitter geteilt wurde, haben sich ein paar andere Leute auf leicht unterschiedliche Weise daran versucht. @dmfilipenkos Dabblet. @mproganos Dabblet