Star rating in CSS3 puro senza Javascript

Amazon ci ha abituati male! Non mi riferisco alla consegna in un giorno e nemmeno delle feature offerte dall’abboamento a Prime… No! Sto pensando alle esigenze che poi i clienti hanno quando ti dicono: “vorrei un e-commerce di poche pretese […] però lo vorrei come Amazon“.

Già quando senti arrivare queste parole, pronunciate con la stessa leggerezza di una piuma ma pesanti come un macigno (che vorresti scagliare verso il potenziale non più futuro cliente) da un punto di vista tecnico/funzionale/organizzativo, ti senti avvilito, non sai più se scappare a gambe levate, prima che il potenziale cliente tiri via il macigno dalla sua testa, o offrire un sorriso ebete in attesa della successiva perla.

Tuttavia, per fortuna, non tutti i clienti hanno queste esigenze. Qualcuno si limita più semplicemente a chiederti di visualizzare il metro di valutazione di un prodotto (o di un servizio): il classico “Star Rating“.

Ci sono tante soluzioni in giro per farlo, ma in questo articolo ti mostrerò come farlo utilizzando puramente CSS (o SASS) e HTML5.

Parte 1 – Le librerie

Per rendere più gradevole il risultato finale, ho utilizzato la libreria FontAwesome. Ovviamente potrai utilizzare la libreria che più preferisci.

Nota: Se utilizzerai un’altra libreria, puoi saltare i passaggi a seguire.

Per utilizzare FontAwesome hai due alternative: la prima consiste nell’utilizzare una versione ospitata sulla CDN di FontAwesome, la seconda opzione è di utilizzare la libreria ospitandola direttamente tu sul server.

La scelta tra l’una e l’altra ipotesi variano in dipendenza delle esigenze di progetto. Per esempio, se si ragiona di un sito web, allora forse la scelta ottimale è di optare per la CDN, il caricamento della libreria sarà più veloce, si risparmia traffico dati verso il proprio host riducendo il carico di lavoro (seppur minimo) del Web Server ed eventuale banda, che alcuni servizi forniscono con limiti giornalieri/mensili, possiamo facilmente aggiornare la libreria in caso di necessità sostituendo l’url ed è fatta. Considera che questa opzione è valida fin tanto che si dà per scontato che ci sia una connessione ad internet attiva.

Se invece la necessità è di sviluppare un’applicazione mobile ibrida, per esempio con Apache Cordova o con Capacitor, si presuppone che l’utente installerà l’applicazione in locale e ne farà utilizzo probabilmente anche quando sarà offline, quindi si cade nella seconda alternativa, ovvero ospitare direttamente nel proprio progetto la libreria.

A seguire ti descriverò come gestire le due alternative.

Creare un Progetto su CDN FontAwesome

Accedendo al sito di FontAwesome, basterà selezionare la voce di menu “Start” quindi, sarà possibile cominciare inserendo la propria mail nella casella di input che, in via esemplificativa, è riportata nell’immagine a seguire:

Ovviamente se sei già in possesso di un account, non sarà necessario registrarsi ma autenticarsi ed accedere al proprio pannello di controllo.

Selezionando la voce “Manage Kit” nella sezione “Products & Services“, così come evidenziato nell’immagine precedente, arriverete al pannello di gestione dei progetti nel quale saranno riportati tutti i progetti da te creati in passato. Nessuno se è la prima volta che usi il servizio.

In fondo alla lista è presente il pulsante “Create a New Kit“. Segui le istruzioni, quindi avrai il codice da includere nella tua pagina.

Utilizzare la versione self-hosted di FontAwesome

Niente di più semplice! Dopo aver selezionato la voce di menu “Start” sul sito FontAwesome, fai click su “Download” e verrà scaricata l’ultima versione della libreria sul tuo computer.

Decomprimila e copiala in una directory del tuo progetto.

Eviterò di spiegarti come includerla nel tuo progetto web o nella tua applicazione mobile, perchè questa operazione può variare a seconda della configurazione ed in base alla piattaforma, cms o ambiente utilizzato.

Parte 2 – Il markup HTML

Come ho evidenziato sin da subito, questa soluzione non prevede l’utilizzo di JavaScript, quindi sarà necessario che il markup sia costruito soddisfacendo tutte le possibili combinazioni, da 1 a 5 stelle, considerando anche un punteggio di mezza stella.

<div class="star-component" data-rating="4.5">
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star fa-fw"></i>
   <i class="fas fa-star-half fa-fw"></i>
   <i class="far fa-star-half fa-fw fa-flip-horizontal text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
   <i class="far fa-star fa-fw text-muted"></i>
</div>

In dettaglio:

Parte 3 – Lo stile (SASS)

La prima cosa da fare è unire le due mezze stelle, quindi forniremo un margine negativo alla mezza stella vuota rovesciata (questo è il risultato):

/* Star rating */
.star-component {
   .fa-star-half.fa-flip-horizontal {
      margin-left: -1.5rem;
      position:    relative;
   }
}

Successivamente renderemo di default invisibili tutte le stelle (l’esemipo non è riportato intenzionalmente perché si tratta evidentemente una pagina apparentemente vuota):

/* Star rating */
.star-component {
   .fa-star,
   .fa-star-half {
      display: none;
   }

   .fa-star-half.fa-flip-horizontal {
      margin-left: -1.5rem;
      position:    relative;
   }
}

Infine andremo a gestire la visibilità delle stelle in base al data-attribute data-rating.

/* Star rating */
.star-component {
   .fa-star,
   .fa-star-half {
      display: none;
   }

   .fa-star-half.fa-flip-horizontal {
      margin-left: -1.22428rem;
      position:    relative;
   }

   @for $rate from 0 to 5 {

      &[data-rating^="#{$rate}"] .fas.fa-star:nth-child(-1n+#{$rate}),
      &[data-rating="#{$rate}"] .far.fa-star:nth-child(-1n+#{12-$rate} ),
      &[data-rating^="#{$rate}."] .far.fa-star:nth-child(-1n+#{11-$rate}) {
         display: inline-block;
      }

   }
}

Il ciclo @for si preoccupa di creare una serie di regole CSS che adottano questo principio:

1. Mostra le stelle piene per il valore intero del rating (per esempio se imposto come valore 3 saranno 3 stelle piene)
2. Mostra il restante delle stelle vuote tranne una se nell’attributo data-rating il valore contiene un punto.
3. Mostra il restante delle stelle piene se nell’attributo data-rating il valore è esattamente quello dell’indice del ciclo.

Senza dilungarmi troppo, la soluzione è nello specificare un’ulteriore regola che prevede la visualizzazione delle due mezze stelle (piena e vuota) quando l’attributo data-rating conterrà un “.” nel valore.

/* Star rating */
.star-component {
   .fa-star,
   .fa-star-half {
      display: none;
   }

   .fa-star-half.fa-flip-horizontal {
      margin-left: -1.5rem;
      position:    relative;
   }

   &[data-rating*="."]
   .fa-star-half {
      display: inline-block;
   }

   @for $rate from 0 to 5 {

      &[data-rating^="#{$rate}"] .fas.fa-star:nth-child(-1n+#{$rate}),
      &[data-rating="#{$rate}"] .far.fa-star:nth-child(-1n+#{12-$rate} ),
      &[data-rating^="#{$rate}."] .far.fa-star:nth-child(-1n+#{11-$rate}) {
         display: inline-block;
      }

   }
}

Se hai idea di come migliorare questa idea, lascia un commento e, se ti è piaciuto questo articolo, e vorresti leggerne altri simili, ti prego di condividerlo.