Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
29 mai 2009 5 29 /05 /mai /2009 21:55

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 :

  1. 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.
  2. 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é.
par Aïe mes doigts ! - dans La gadgetière
commenter cet article

commentaires

christina 30/05/2009 00:25

flou et compliqué ??
"comment permettre à ceux qui n'ont pas JS activé d'accéder quand-même au menu"
c'est plus clair ?
(vu la galère que c'est d'activer JS dans IE8 - faut trouver où, et puis les noms sont assez obscurs pour le commun des mortels - il y en a sûrement d'autres aussi nuls que moi et qui ont moins de motivations pour chercher comment l'activer...)

merci, je vais étudier le coup du noscript

AïmD ! (et mes paupières aussi, un peu) 30/05/2009 18:59


C'est surtout que l'objet de cet article n'est pas de traiter à fond la question de JS ou pas JS, quels substituts fournir, comment les choisir, et d'abord jusqu'où faut-il mettre du JS, et comment
fait-on pour l'activer ou le désactiver... surtout à minuit et demie :)


christina 29/05/2009 23:27

ouahh ! ça c'est de la télépathie !
Ce matin l'idée m'a traversée qu'il faudrait pouvoir afficher un truc de secours si JS n'est pas activé et je me suis dit que j'allais vous poser la question ce soir...
Là, j'allume l'ordi et que vois-je ? et ça va même plus loin - sauf que pas accessible en confiance...
donc si je comprends bien il faudrait que je refasse tout en css comme j'ai fait sur la page de liens ?

AïmD ! 29/05/2009 23:42


Vous et votre génie pour poser des questions simples et précises en termes flous et compliqués... :)
En confiance vous ne pouvez pas mettre des tonnes de JS, seulement des gestionnaires d'événements (onqqchose), ça ne peut pas aller très loin.
Si vous voulez justeafficher un panneau d'alerte de vos visiteurs le plus simple est d'ajouter un élément NOSCRIPT dans l'en-tête du blog, avec un message bref et explicite. L'éditeur OB ne vous
permettra pas de fourrer de balisage raffiné dans ce NOSCRIPT (dommage, je sais) mais vous devriez pouvoir lui donner une classe, puis styler cette classe en CSS....
De toute manière tous les blogs OB (confiance ou pas) exécutent des JS ajoutés par OB (ajout de commentaires et autres), tous les visiteurs devraient avoir Js activé.


Archives