Détecter en CSS la présence de JavaScript

29.05.2009

On peut avoir besoin de donner à un élément un style différent selon que le visiteur du blog navigue avec ou sans JavaScript : masquer ou afficher l'élément, le mettre en évidence (gras, couleur...) ou non, etc. .

Voici une solution simple pour ne pas avoir à multiplier les cas particuliers dans les programmes JS. Inutilisable (et sans intérêt) au niveau Confiance des blogs OverBlog, elle peut en revanche rendre service sur n'importe quel site Web.

Débutants en CSS s'abstenir, ignares en JavaScript bienvenus.

Le principe

Tout simple : mettre au début de la page Web (= dans l'en-tête du blog) une certaine instruction JavaScript. Si le visiteur navigue avec JavaScript elle s'exécutera, s'il navigue sans elle ne s'exécutera pas.

Et que fait la certaine instruction ? Elle donne au body de la page une certaine (encore !) classe. Donc si le visiteur navigue avec JavaScript le body aura cette classe, sinon il ne l'aura pas.

Dès lors, il ne s'agit plus que de CSS, voyez les exemples.

Installation

Copiez le code suivant au tout début de l'en-tête du blog :

 <div><script> (function () { var r=document.getElementsByTagName('body')[0]; r.className+=r.className ? ' JS_on' : 'JS_on'; })(); </script></div>

C'est fini.

Utilisation

Des plus simples. Soit une barre de menus, pleine de JavaScript, dont le CSS donne la présentation :

 #menuNav {width:500px; height:40px}

Si le navigateur navigue sans JS ce menu est inutilisable : autant le masquer. Il suffit de deux lignes de CSS en plus :

 #menuNav {display:none} .JS_on #menuNav {display:block}

La première règle (qu'on pourrait d'ailleurs fusionner avec la règle déjà écrite) dit #menuNav est en display:none , donc caché.

La deuxième règle dit : #menuNav contenu dans un 'quelque chose' de classe JS_on est en display:block , donc visible. Comme cette règle comporte un sélecteur de plus que la première, elle l'emportera sur elle si et seulement si le menu se trouve bien dans un 'quelque chose' de classe JS_on.

Or tout élément de la page est dans le body de cette page. Donc :

si le visiteur navigue avec JS, le petit bout de JS s'exécute, le body est doté de la classe JS_on et le menu est visible.
si le visiteur navigue sans JS, le petit bout de JS ne fait rien, le body ne porte pas la classe JS_on, la deuxième règle CSS ne peut pas s'appliquer et le menu reste caché.

CQFD.

Exemple complémentaire

Continuons avec notre barre de menu. Si le visiteur navigue sans JS on peut (on doit !) vouloir lui proposer une solution de secours : moins jolie mais rendant les mêmes services. Supposons que ce menu de secours porte l'identifiant menuRepli, le CSS nécessaire sera :

 .JS_on #menuRepli {display:none}

Synthèse de tout ça :

les règles "normales" décrivent
1. ce qui est indifférent à la présence ou absence de JS (comme d'hab', autrement dit)
2. ce qui n'est vrai qu'en l'absence de JS
les règles préfixées par .JS_on décrivent
1. ce qui est vrai seulement en présence de JS.

Remarque spéciale OB

On pourrait aussi penser utiliser des éléments noscript. Malheureusement l'éditeur OB traite durement les noscript, c'est d'ailleurs une des raisons qui m'ont poussé à mettre au point la solution que je vous propose.

Démontage

Le présent article vous fournit la solution et son mode d'emploi. Son article jumeau démonte entièrement le code si vous voulez comprendre pourquoi j'ai fait comme ça et pas autrement. Sa lecture est totalement facultative pour employer l'objet, elle intéressera peut-être les esprits curieux.

Mises à jour

Mai 2009 : 1ère publication
Mai 2012 : simplification et "blindage"du code JS, révision de l'article, réécriture de la dissection du programme et report dans un article séparé.