{"id":3002,"date":"2012-10-19T17:13:55","date_gmt":"2012-10-19T15:13:55","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3002"},"modified":"2013-08-19T10:31:11","modified_gmt":"2013-08-19T08:31:11","slug":"systeme-notation-quelques-lignes-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/systeme-notation-quelques-lignes-css","title":{"rendered":"Un syst\u00e8me de notation en quelques lignes de CSS"},"content":{"rendered":"

Afficher 5 \u00e9toiles les unes \u00e0 c\u00f4t\u00e9 des autres, puis les faire se colorer en fonction de la note que vous souhaitez donner \u00e0 une cr\u00e9ation, une vid\u00e9o, un article,… C’est parfois prise de t\u00eate, sprites CSS et autres syst\u00e8mes de masque. Je vous propose plus simple !<\/p>\n

Nous allons faire \u00e7a en HTML et CSS, juste pour le fun, \u00e7a vous dit ?<\/p>\n

Voir la d\u00e9monstration<\/a><\/p>\n

Un bout de HTML<\/h2>\n

Nous allons simplement cr\u00e9er un groupe de lien dans une div<\/code>, mais le principe est assez semblable quelle que soit votre structure.<\/p>\n

<div class=\"rating\"><!--\r\n   --><a href=\"#5\" title=\"Donner 5 \u00e9toiles\">\u2606<\/a><!--\r\n   --><a href=\"#4\" title=\"Donner 4 \u00e9toiles\">\u2606<\/a><!--\r\n   --><a href=\"#3\" title=\"Donner 3 \u00e9toiles\">\u2606<\/a><!--\r\n   --><a href=\"#2\" title=\"Donner 2 \u00e9toiles\">\u2606<\/a><!--\r\n   --><a href=\"#1\" title=\"Donner 1 \u00e9toile\">\u2606<\/a>\r\n<\/div><\/code><\/pre>\n
Les commentaires sont l\u00e0 pour conserver l’indentation et \u00e9viter le white-space<\/code>. Je vous renvoie sur cette article \u00e0 propos de inline-block<\/a> pour plus d’informations.<\/p>\n
On commence par un petit probl\u00e8me : on doit inverser le sens des \u00e9toiles (liens), la premi\u00e8re permet de donner 5 \u00e9toiles (meilleure note), la derni\u00e8re 1 \u00e9toile (moins bonne note), mais vous allez comprendre ensuite pourquoi.<\/p>\n
Une portion de CSS<\/h2>\n
Donnons quelques styles de base \u00e0 notre syst\u00e8me d’\u00e9toiles.<\/p>\n
.rating a {\r\n   color: #aaa;\r\n   text-decoration: none;\r\n   font-size: 3em;\r\n   transition: color .4s;\r\n}\r\n.rating a:hover,\r\n.rating a:focus {\r\n   color: orange;\r\n   cursor: pointer;\r\n}<\/code><\/pre>\n
transition<\/code> c’est pour la petite touche d’animation en CSS3, mais c’est optionnel.
\nBien, pour le moment nous avons des liens dans le mauvais sens et les \u00e9toiles pr\u00e9c\u00e9dents celle survol\u00e9e ne sont pas orange.<\/p>\n
Changeons \u00e7a gr\u00e2ce au s\u00e9lecteur d’adjacence indirecte<\/a>.<\/p>\n
.rating a:hover ~ a,\r\n.rating a:focus ~ a {\r\n   color: orange;\r\n}<\/code><\/pre>\n
Voil\u00e0, \u00e7a c’est fait, pour la couleur… mais on est un peu \u00e0 l’envers encore.<\/p>\n
Qu’\u00e0 cela ne tienne, la propri\u00e9t\u00e9 float<\/code> \u00e0 sa valeur right<\/code> a un dr\u00f4le d’effet sur plusieurs \u00e9l\u00e9ments dispos\u00e9s ainsi : elle inverse l’ordre.<\/p>\n
.rating a {\r\n   float: right;\r\n}<\/code><\/pre>\n
Le code CSS final :<\/p>\n
.rating a {\r\n   float: right;\r\n   color: #aaa;\r\n   text-decoration: none;\r\n   font-size: 3em;\r\n   transition: color .4s;\r\n}\r\n.rating a:hover,\r\n.rating a:focus,\r\n.rating a:hover ~ a,\r\n.rating a:focus ~ a {\r\n   color: orange;\r\n   cursor: pointer;\r\n}<\/code><\/pre>\n
Bien entendu avec des flottants dans les parages, il vous faudra faire attention aux effets de bord, mais \u00e7a marche plut\u00f4t bien.<\/p>\n
Encore du CSS<\/h2>\n
Il est possible de faire autrement en changeant ponctuellement le sens de lecture. \u00c0 la place des flottants, nous allons utiliser la propri\u00e9t\u00e9 direction<\/code>.
\nJe vous donne le code final directement :<\/p>\n
.rating {\r\n   direction: rtl;\r\n}\r\n.rating a {\r\n   color: #aaa;\r\n   text-decoration: none;\r\n   font-size: 3em;\r\n   transition: color .4s;\r\n}\r\n.rating a:hover,\r\n.rating a:focus,\r\n.rating a:hover ~ a,\r\n.rating a:focus ~ a {\r\n   color: orange;\r\n   cursor: pointer;\r\n}<\/code><\/pre>\n
Limites<\/h2>\n
Je ne connais pas les r\u00e9percutions en terme d’accessibilit\u00e9 de l’inversement de l’ordre des liens dans le DOM par rapport \u00e0 ce qu’on voit r\u00e9ellement \u00e0 l’\u00e9cran. Apr\u00e8s tout si on vire la CSS, le seul probl\u00e8me serait de pr\u00e9senter comme premier lien la note la plus haute. Soit… je n’y vois pas de souci, si ce n’est que ce n’est pas tr\u00e8s habituel, mais tant que l’utilisateur le sait \u00e7a ne devrait pas poser de probl\u00e8me ergonomique…<\/p>\n
Autre petite note : j’ai utilis\u00e9 des liens pour la d\u00e9mo, mais il fonctionne aussi avec des boutons radios et ses labels<\/a>.<\/p>\n
Voir la d\u00e9monstration<\/a> Le code sur CodePen.io<\/a><\/p>\n
\n
Sources et liens utiles<\/h2>\n