Détecter si Javascript est activé avant l’affichage de la page
Publié le

javascript

Il est fréquent d'associer Javascript à une technologie non accessible, mais l'inaccessibilité d'un site n'est pas dû à Javascript mais à l'utilisation que l'on en fait.

Je ne vais pas m'étendre sur le sujet mais je vous recommande fortement de comprendre comment procéder, un excellent article traitant ce sujet existe déjà : Graceful degradation and progressive enhancement (Mode dégradé et mode réhaussé).

Fervent défenseur du progressive enhancement, je me suis vite retrouvé face à une difficulté : si on décide de laisser une sous-navigation affichée via CSS et qu'on la masque via Javascript, cette sous-navigation sera affichée pendant quelques millisecondes avant de se masquer, provoquant un flash visuel disgracieux, c'est également le cas pour tous nos modules que nous essaierons de rendre accessible via cette méthode.
Le problème vient du fait que la fonction onload() de Javascript (ou la fonction ready() de jQuery) ne s'exécute qu'après le chargement du DOM, donc le contenu s'affiche avant que Javascript n'ait le temps de le masquer.

Il existe cependant un solution à ce problème : détecter si Javascript est activé avant l'affichage de la page.

Exemple d'utilisation accessible du Javascript mais qui provoque un flash visuel.

L'objectif est d'arriver à charger des styles par défaut puis des styles spécifiques lorsque Javascript est actif. La première méthode consiste à créer une balise <style> qui chargera une feuille de style dédiée à la mise en forme des éléments en ayant besoin. La méthode fonctionne bien, cependant elle s'avère pas très pratique à l'utilisation : non seulement au niveau de la maintenance il faudra jongler avec deux CSS lorsque l'on voudra modifier un module, et même si cela reste infime, charger une nouvelle CSS diminuera les performances de chargement et d'affichage des pages.

Exemple d'utilisation de la méthode qui charge une CSS dédiée si Javascript est actif.

La seconde méthode consiste à ajouter un attribut "id" à une balise précédent l'ensemble du contenu de la page, cependant il faut que la balise existe "physiquement" pour pouvoir y ajouter cet atribut. Le choix semble assez restreint, les deux seules balises utiles sont <html> et <body>. Au niveau des spécifications, la balise <html> ne peut posséder ni attribut "id" ni attribut "class", je vous conseille donc d'utiliser le script directement après l'ouverture de la balise <body> :

1
<script type="text/javascript">document.getElementsByTagName('body')[0].id = 'js';</script>
1
2
3
4
5
6
7
8
9
#js .exemple ul {
    display: none;
}

.exemple ul {
    list-style-type: none;
    width: 300px;
    padding: 0;
}

Cela permet d'ajouter l'attribut id="js" à votre balise <body>, il vous restera plus qu'à cibler en CSS les éléments spécifiques utilisant Javascript. Dans certains cas (certains CMS par exemple ou pour l'ajouter sur un site déjà existant), il vous sera peut-être compliqué de mettre en place cette méthode, vous pourrez alors ajouter à la place l'attribut "id" à la balise <html> en mettant le script dans la partie <head> de votre document et en ciblant le TagName "html".

Exemple d'utilisation de la méthode qui ajoute un id="js" à la balise <body> si Javascript est actif.

« Retour à la liste des articles

Vos commentaires

jpvincent
le

pas mal, moi j'utilise une variante de cette technique :
- j'utilise l'event onDOMReady (implémenté par la plupart des librairies JS, en l'occurrence YUI)
- je rajoute une classe au body (js-present) plutôt qu'un id
- cet ajout via l'event se fait dans le fichier JS principal

le désavantage, c'est que l'ajout de la classe et donc les styles spécifiques à l'absence de JS se font plus tard, le temps que le body soit chargé.

l'avantage c'est que :
- je n'ai pas de JS qui "traine" dans mon HTML
- les classes sont + souples que l'id et me permettent d'ajouter d'autres infos comme le langage : j'ajoute aussi language-fr par exemple

ces 2 variantes sont à connaître et à adapter selon le site :)

Eric Giovannetti
le

Oui tout à fait, ta méthode fonctionne bien et est techniquement parlant plus propre. Mais elle ne détecte pas si Javascript est activé avant le chargement de la page.

De manière concrète, mon astuce vise surtout les personnes ayant une vieille machine ou utilisant un vieux navigateur, et qui malheureusement voient les éléments avant que ceux-ci n'aient le temps d'être cachés par Javascript, provoquant un rafraichissement disgracieux de la page (le Javascript masquant les éléments après leur affichage).

Pour bien comprendre le problème, il suffit de tester mes exemples sous Internet Explorer 6 en prenant le soin de vider le cache pour chaque test.

Poster un commentaire