Mise en place d’un CSS Switcher avec jQuery

Quand j’ai crée ce blog j’ai voulu mettre en place un sélecteur de feuille de style CSS en utilisant jQuery. Par contre, je voulais faire ça avec le moins de code possible car je n’avais pas envie de faire quelque chose de compliqué pour une petite feature comme ça. Plutôt que de partir de zéro j’ai regardé ce qui se faisait sur internet et je suis tombé sur ce tutoriel qui explique très bien comment faire.

Note : Vous pouvez tester cette fonctionnalité sur mon blog en cliquant sur la petite palette de couleurs en bas à gauche de la page

Le code HTML

Il faut d’abord créer les liens permettant aux utilisateurs de sélectionner les feuilles de styles. Ce sera ensuite à vous de créer vos feuilles CSS ou vous pouvez récupérer celle de mon blog si vous voulez.

L’attribut rel permet de savoir quel fichier CSS va être chargé par le lien. On aurait pu mettre le lien dans l’attribut href, mais si jamais l’utilisateur désactive javascript et clique sur le lien, il serait directement redirigé vers le fichier CSS !

Le code Javascript

Avec jQuery quelques lignes de codes suffisent à faire ce que nous voulons :

Une fois le document chargé, la fonction .click() va permettre d’effectuer plusieurs opérations lorsque le visiteur clique sur un des liens de la liste « cssSwitch ».

D’abord, elle va changer la valeur de l’attribut href de la balise link (ayant la classe switchable) par la valeur contenue dans l’attribut rel du lien sur lequel le visiteur a cliqué. Ensuite, grâce au plugin jquery cookie elle va stocker cette valeur dans un cookie pour se rappeler du choix du visiteur. L’avant dernière ligne est facultative, c’est juste un effet de mauvais goût que j’ai rajouté . Le « return false » à la fin permet simplement d’empêcher le navigateur d’essayer de suivre le lien quand on clique dessus.

Si vous testez le code en l’état vous vous rendrez compte que le style redevient celui par défaut quand on recharge la page. C’est parce qu’il vous manque ce petit bout de code :

La condition ci-dessus permet de tester l’existence d’un cookie appelé « css ». Si la condition est vérifiée, on change la valeur de l’attribut href de la balise link par la valeur contenue dans le cookie. Ce qui au final donne le code suivant :

Petite précision tout de même. Pour éviter que le style par défaut n’apparaisse furtivement pendant le chargement de la page, il faut placer la condition en dehors de la fonction document ready bien qu’il ne soit généralement pas recommandé de manipuler le DOM avant le chargement complet du document.

Les balises metas

Il y a fort à parier que certaines classes CSS seront communs aux différents thèmes. Il faut donc regrouper ces classes dans un fichier CSS qu’on appellera main.css, le reste étant spécifique à chaque feuille CSS.

Pour définir un thème par défaut il suffit d’ajouter en plus le fichier CSS du thème et lui mettre une classe que j’ai appelée « switchable ». Cette classe permet d’identifier précisément la balise link afin de pouvoir la sélectionner avec jQuery comme on a fait plus haut.

Le code CSS

En option, je vous passe un bout de code CSS pour ceux qui ne saurait pas trop comment s’y prendre pour afficher des boutons pour la sélection des feuilles CSS

Bon bien sûr c’est une solution 100% javascript donc si l’utilisateur le désactive sur son navigateur cela ne marchera plus. Ceux qui veulent une solution côté serveur devraient plutôt s’orienter vers ce tutoriel.