Cet article a été réactualisé il y a 3 ans jours. Il n'est pas nécessairement obsolète, mais gardez son ancienneté en tête lors de sa lecture.
Lorsqu’un visiteur parcourt un site web, il peut faire le choix de désactiver le javascript sur son navigateur. Qu’avez vous prévu de faire dans ce cas ? Votre site va t’il s’afficher correctement ?
La désactivation du JS dans le navigateur
L’utilisateur peut ne pas autoriser l’utilisation du JS dans son navigateur. Aussi bizarre que cela puisse paraître à l’heure actuelle, Javascript est encore une option. Du coup, sachant cela, il est important de faire en sorte de fournir au moins le contenu principal du site correctement sans javascript.
Aujourd’hui, beaucoup de choses sont gérées avec du javascript, c’est très utile par exemple pour améliorer l’accessibilité (permet d’ajouter des classes ou attributs particuliers dans le DOM en fonction d’évènements). Certains sites maintenant reposent aussi complètement sur du JS en étant développés sous des framework comme React, Angular ou Vue.js. Il devient donc difficile pour un visiteur de s’en passer pour surfer sur le web.
Quoiqu’il en soit en créant un site sous WordPress, on peut avoir en tête de faire un effort sur ce point tout de même, vu que de base on est sur du PHP pour délivrer le contenu. La désactivation du JS, même si elle enlève beaucoup de fonctionnalités que l’on aura pu intégrer, ne devrait pas casser la possibilité de consulter un site.
Voici deux façons de procéder pour gérer ce cas.
Détecter le JS sans librairie externe
Ajouter une classe no-js par défaut à la balise html du site
Par défaut le site aura une classe no-js qui sera changée pour une classe js via du javascript. Donc forcément si pas de javascript activé sur le navigateur, notre script ne pourra pas faire son boulot. Le site restera en no-js. Dans le template header.php au niveau de la section <head>,il suffit d’ajouter ceci au niveau de la balise <html>
<html <?php language_attributes(); ?> class="no-js">Profitez en pour vérifier que votre thème utilise bien dans la section <head> cette fonction :
<?php wp_head(); ?>
C’est une fonction qui fait appel au hook do_action('wp_head'), ce crochet dans le code permettant d’ajouter précisément à cet endroit dans le header : les styles ou scripts ou meta qu’on souhaite y faire figurer.
Ajouter le script qui doit changer la classe no-js
Le plus simple est d’ajouter le script dans le fichier functions.php de son thème.
/**
* Handles JavaScript detection
* ============================
*
* Script for no-js / js class
* Replaces 'no-js' by a `js` class in the root `<html>` element when JavaScript is detected.
* To use it add class="no-js" on html tag
*/
function flooor_javascript_detection () {
echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js');})(document.documentElement);</script>\n";
}
add_action( 'wp_head', 'flooor_javascript_detection', 0 );L’action hook se fait sur ‘wp_head’ et affichera la ligne dont on a besoin via un simple echo.
Mettre la priorité à 0 (par défaut la priorité est à 10) pour être sûr que le script se charge tôt et s’inscrive bien au début de la pile de ce que charge <?php wp_head(); ?> dans la section <head>
L’autre solution est d’ajouter ce script dans un plugin perso
Souvent dans des tutos vous verrez qu’on vous indique d’ajouter des scripts dans le functions.php du thème. C’est effectivement la méthode rapide et facile. Pour autant, outre le fait qu’avec le temps le fichiers functions.php risque de devenir obèse, l’autre désagrément c’est qu’en changeant de thème vous perdrez cette fonctionnalité, qu’il faudra récupérer et rajouter à nouveau à la main.
Du coup, la création d’un plugin perso pour ranger toutes vos astuces comme celle ci, qui ne sont pas liées au design de thème mais qui constituent des fonctionnalités dont vous pourriez avoir besoin tout le temps s’avère bien plus adpatée. Voir l’article : « Créer un plugin de démarrage de projet WP »
Détecter le JS (entre autre chose) avec Modernizr
La libraire Javascript Modernizr permet de détecter le support de fonctionnalités sur le navigateur pour des règles JS, et pour des règles CSS. Elle permet aussi en utilisant html5shiv (qu’on peut aussi placer soi même sans Modernizr) de rendre les balises html5 détectables par les vieilles versions d’IE. Son principe consiste, comme on l’a fait plus haut, d’ajouter des classes au niveau de la balise html. Donc en l’utilisant, on fait comme tout à l’heure : ajout de la classe no-js et pas besoin d’ajouter son propre script, c’est celui de Modernizr (qu’on ajoutera dans functions.php) qui la transformera en classe js . On peut donc préférer son utilisation par rapport à la méthode précédente qui est vraiment light, mais fait ce qu’on attend d’elle.
De plus, ce qui est intéressant avec cette librairie c’est qu’elle permet de créer son propre build, donc de l’adapter à ses besoins selon le projet. Inutile de charger quelque chose d »hyper complet alors qu’on n’aura besoin que d’une petite partie.
Et maintenant on en fait quoi de ces classes ?
Maintenant, c’est tout bête, la disponibilité des classes js ou no-js permet de faire un traitement spécial au niveau du css.
Par exemple au niveau de Pixi, j’utilise du JS pour mettre en place des boutons Switcher pour l’accessibilité (pour changer la typo, ou le contraste dans le site). Ils sont présents après le menu principal dans la partie header.
Le JS ici me permet d’ajouter ou d’éliminer certaines classes en manipulant le DOM, il me permet aussi d’utiliser Web Storage, pour stocker des données dans le navigateur le temps d’une session, en mettant en mémoire les choix du visiteur au travers des pages du site.
Donc sans JS, afficher ces boutons n’a plus aucun intérêt vu que ça ne fonctionnera pas.
Du coup en css j’ai ceci :
.no-js .a11y-buttons ul {
display: none;
}
.a11y-buttons ul {
display: block;
}