Tilbage til Testimonials-komponenten

Kontekstdrevet UI

Star rating med gradient og mask

Omsæt et tal til en visuel rating med én gradient og én genbrugelig ikonmaske.

Se undervisningsslides

Relevante links

TL;DR

  1. En rating kan omsættes fra 0–5 til 0–100 % med typed attr() og calc().
  2. Gradienten beskriver fyldet; masken bestemmer, at fyldet kun ses gennem stjerneformerne.
  3. Den visuelle rating skal suppleres med et tilgængeligt tekstalternativ.

Et tal som gradient-stop

Start med at normalisere værdien til en procent:

<span class="rating" data-rating="4.5" aria-hidden="true"></span>
.rating {
  --rating: attr(data-rating type(<number>), 0);
  --fill: calc(var(--rating) / 5 * 100%);


  background:
    linear-gradient(90deg, #f5a623 var(--fill), #d7d7d7 0);
}

Det andet color stop bruger 0 som position, så det lægger sig ved det foregående stop. Resultatet er en skarp overgang ved ratingens procent.

Masken former gradienten

En mask bruger ikonets alpha-kanal som form. Baggrunden er stadig én samlet gradient, men kun de fem stjerner bliver synlige:

.rating {
  inline-size: calc(1.25rem * 5);
  block-size: 1.25rem;
  mask: var(--star) 0 / contain;
}

Det er enklere end at oprette fem separate elementer og beregne hele, halve og tomme stjerner. Samtidig kan en værdi som 4.3 vises præcist.

Accessibility er ikke pseudo-indhold

En tom dekorativ <span> med baggrund og mask giver ikke i sig selv et tilgængeligt navn. CSS-genereret indhold bør heller ikke være den eneste kilde til vigtig information.

Brug derfor enten synlig tekst eller en tekst, der kun er visuelt skjult. Værdien skal komme fra samme datakilde som data-rating, så den visuelle og den tilgængelige repræsentation ikke kan glide fra hinanden.

Se mere