Titre

css rating

Auteurs

Rui Nibau

Date

27 janvier 2007

Version

1.1

Statut

abandonné (obsolète)

Présentation

CSS rating est un système de notation en CSS dont le principe est de remplacer une note au format texte, du type « 6/10 » par exemple, par une liste de 10 étoiles où 6 d'entre elles seront « noircies ». Attention cependant : cette technique ne fonctionne pas avec Internet Explorer puisqu'elle utilise les pseudo-éléments before et after ; vous trouverez facilement sur le web des astuces alternatives à celle-ci et supportées par le navigateur de Microsoft, le but du jeu ici étant aussi de ne pas avoir à rajouter artificiellement du code pour obtenir l'effet escompté.

Principes techniques

Le système utilise une image de 10x20 pixels représentant une étoile « vide » et une étoile « noircie » l'une au dessus de l'autre. L'une ou l'autre sera affichée en image de fond en fonction des besoins en appliquant une technique décrite par Dave Shea, les « sprites en CSS », qui permet d'utiliser une unique image pour illustrer et ainsi de réduire le nombre de requêtes au serveur web.

la notation pourra être portée soit par un élément de type bloc (un paragraphe) soit par un élement en ligne dans un élément bloc de la manière suivante :

<!-- Notation portée par un élément bloc -->
<p class="inline-rate">8/10 <span class="rate-8" title="8/10">8/10</span></p>
<!-- Notation portée par un élément en ligne -->    

Enfin, il y a deux manières d'obtenir le rendu que l'on souhaite : l'une faisant appel à des spécificités CSS de niveau 3, uniquement reconnues par Firefox actuellement, la seconde, un peu plus complexe, supportée aussi par Opera.

Version « hardcore » CSS 3

L'apparence du système est donc gérée par une série de classes nommées rate-x ou x est un chiffre de 0 à 10 ; chacune d'elle permet d'appliquer les styles de la note correspondante. Pour appliquer une première série de règles communes à l'ensemble des classes, on utilise le sélecteur ^, une fonctionnalité de la sélection d'attributs : [class^='rate'] signifie « toutes les classes dont le nom commence par rate ».

• On masque le texte en lui appliquant un espacement négatif entre les caractères (ce que Andy Clarke appelle « l'effet trou noir »).
• On place dans le pseudo-élément before l'échelle de notation en donnant à l'élément une longueur de 100px, soit 10 fois la largeur d'une étoile.
• On place dans le pseudo-élément after l'image de l'étoile noircie que l'on superpose à l'échelle de notation.

On appliquera ensuite des règles spécifiques à chaque classe, essentiellement une largeur de bloc proportionnelle à la note. Une class spéciale, inline-rate, permet d'utiliser le système de notation dans un élément en ligne.

.inline-rate {
    display: table-row;
}
.inline-rate *[class^='rate'] {
    padding-left: 5px;
}
*[class^='rate'] {
    display: table-cell;
    font-size: 0;
    text-indent: -999em;
    letter-spacing: -999em;
    height: 10px; /* ope (?) */
    line-height: 0;
}
*[class^='rate']:before,
*[class^='rate']:after {
    display: block;    
    height: 10px;
    line-height: 10px;
    content: "";
}
*[class^='rate']:before {
    background: url(star.png) repeat-x 0 0;
    width: 100px;
}
*[class^='rate']:after {
    background: url(star.png) repeat-x 0 100%;
    margin-top: -10px;
}
.rate-0:after  { width: 0;  }
.rate-1:after  { width: 10px;  }
.rate-2:after  { width: 20px;  }
.rate-3:after  { width: 30px;  }
.rate-4:after  { width: 40px;  }
.rate-5:after  { width: 50px;  }
.rate-6:after  { width: 60px;  }
.rate-7:after  { width: 70px;  }
.rate-8:after  { width: 80px;  }
.rate-9:after  { width: 90px;  }

Limitations et évolutions

Comme expliqué en début d'article, la technique ne fonctionne pas avec Internet Explorer puisque les étoiles sont affichées dans des pseudo-éléments before et after. Mais une autre limite plus génante vient du fait que l'on utilise le sélecteur d'attribut ^, implémentée dans la version 3 des CSS, qui n'est encore qu'au stade d'ébauche. Si Firefox 2 et Opera 9.10 le comprennent, il peut y avoir des problèmes avec les versions précédentes de ces navigateurs. La solution la plus pratique serait d'ajouter une classe particluière, rate, qui porterait les règles de présentation communes à toutes les notes. Nous aurions donc un nouveau code HTML :

<p class="rate rate-6">6/10</p>

Dés lors, il suffit de remplacer la règle *[class^='rate'] par un .rate plus classique dans le fichier CSS.

Autre limite, plus problématique celle-ci : si la gestion des CSS est désactivée dans le navigateur, le texte de la note (6/10) s'affiche bien ; par contre, si c'est l'affichage des images qui est désactivé, on ne voit plus rien.

Enfin, on peut améliorer la lisibilité de la notation graphique en ajoutant un attribut title qui reprend la valeur de la note et qui s'affichera donc lorsque l'on passe la souris au-dessus du graphisme.

Historique

2006-05-06

Première version.

2007-01-27

• Une seule image pour illustrer les deux états de la notation.
• Correction de bug sous Opera

Ressources et références

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C, 07 juin 2011. 12 Generated content, automatic numbering, and lists

CLARKE, Andy. MIR image replacement. And all that Malarkey, 27 mars 2005. Masquer un texte avec les propriétés letter-spacing ou text-indent.

JOHANSSON, Roger. CSS 3 selectors explained. 456 Berea Street, 10 janvier 2006. Présentation de l'utilisation des sélecteurs en CSS 3.

KING, Rogie. CSS Star Rating redux. Komodomedia, 20 janvier 2007

SHEA, Dave. CSS Sprites : Image Slicing's Kiss of Death. A List Apart, 05 mars 2004. Traduction française de l'article.