11548 sujets
Salut,
à mon avis, il ne faut pas chercher à détecter si le javascript est activé ou non. Je pencherais plutôt pour du javascript non intrusif qui ajoute au document les styles et/ou evenements souhaité.
C'est, à mon sens un peu différent de détecter l'activation du javascript ... En effet, ici on part du principe que le javascript n'est pas activé (et donc le document doit être lisible tel quel) tout en fournissant les outils pour modifier le document (via l'appel d'un fichier JS externe par exemple) si il s'avère qu'il l'est.
Si le javascript n'est pas supporté, aucune modification n'est faite sur le document initial. Ce qui a l'avantage d'éviter de "polluer" le document et de le rendre plus compréhensible et plus légé.
Par contre, s'il est supporté, le document initial se voit enrichit de fonctionnalités censé en faciliter la lecture.
En espérant que je ne me suis pas trop éloigné de ta question ...
à mon avis, il ne faut pas chercher à détecter si le javascript est activé ou non. Je pencherais plutôt pour du javascript non intrusif qui ajoute au document les styles et/ou evenements souhaité.
C'est, à mon sens un peu différent de détecter l'activation du javascript ... En effet, ici on part du principe que le javascript n'est pas activé (et donc le document doit être lisible tel quel) tout en fournissant les outils pour modifier le document (via l'appel d'un fichier JS externe par exemple) si il s'avère qu'il l'est.
Si le javascript n'est pas supporté, aucune modification n'est faite sur le document initial. Ce qui a l'avantage d'éviter de "polluer" le document et de le rendre plus compréhensible et plus légé.
Par contre, s'il est supporté, le document initial se voit enrichit de fonctionnalités censé en faciliter la lecture.
En espérant que je ne me suis pas trop éloigné de ta question ...
Salut,
J'ajouterais que pour des fonctionnalités susceptibles de poser des problèmes d'accessibilité (ex. : menus déroulants, etc...), il peut être intéressant de proposer un bouton de désactivation... Il ne s'agit pas de couper Javascript mais simplement le bout de script concerné. Ainsi, on laisse libre choix à l'utilisateur sans pour autant recourir à la désactivation totale de Javascript, ce qui permet de conserver les autres fonctions ajoutées par JS.
Quoiqu'il en soit, il faut effectivement prévoir les deux cas de figure (JS actif ou non).
Il faut aussi faire attention au support partiel parce que même en cas de JS non intrusif, cela peut générer des erreurs...
J'ajouterais que pour des fonctionnalités susceptibles de poser des problèmes d'accessibilité (ex. : menus déroulants, etc...), il peut être intéressant de proposer un bouton de désactivation... Il ne s'agit pas de couper Javascript mais simplement le bout de script concerné. Ainsi, on laisse libre choix à l'utilisateur sans pour autant recourir à la désactivation totale de Javascript, ce qui permet de conserver les autres fonctions ajoutées par JS.
Quoiqu'il en soit, il faut effectivement prévoir les deux cas de figure (JS actif ou non).
Il faut aussi faire attention au support partiel parce que même en cas de JS non intrusif, cela peut générer des erreurs...
Je vais être un peu plus clair ...
Il s'agit ici d'un menu ou plutôt de contenu présenté en onglets :
et quand Javascript est désactivé le contenu doit s'afficher avec le même style mais chaque contenu l'un en-dessous l'autre et de même pour l'impression.
Pour l'impression c'est simple, il suffit ( comme l'a dit koala64 dans le sujet en question ) d'appliquer le style onglet uniquement au media screen voire projection. Cependant quand il s'agit du Javascript, appliquer un style du type :
avec simplement le DOM c'est long et compliqué.
D'où ma question, comment appliquer un style complet uniquement quand Javascript est activé ?
La seule solution que j'ai trouvée c'est de rajouter une balise link au document via Javascript mais le temps d'interprétation du navigateur fait que l'on voit un document non stylé au chargement de la page.
Il doit bien y avoir une autre solution, non ?
N.B. : J'espère que j'ai été plus clair cette fois ...
Il s'agit ici d'un menu ou plutôt de contenu présenté en onglets :
et quand Javascript est désactivé le contenu doit s'afficher avec le même style mais chaque contenu l'un en-dessous l'autre et de même pour l'impression.
Pour l'impression c'est simple, il suffit ( comme l'a dit koala64 dans le sujet en question ) d'appliquer le style onglet uniquement au media screen voire projection. Cependant quand il s'agit du Javascript, appliquer un style du type :
#menu {height: 22px; border-bottom: 1px solid #70da00; float: left;}
#menu li {height: 22px; float: left; margin: 0 5px 0 0;}
#menu a {color: #000; background: #fff; border: 1px solid #70da00; width: 140px; padding: 2px 0; display: block; text-align: center; text-decoration: none;}
#menu ul {border: 1px solid #70da00; border-top: none; background-color: #fff; position: absolute; display: none; width: 728px; height: 175px;}
#menu ul li {float: none; padding: 2px; margin:0;}
#menu ul p {text-align: justify; white-space: normal; margin:0;}
#menu #end {margin:0;}avec simplement le DOM c'est long et compliqué.
D'où ma question, comment appliquer un style complet uniquement quand Javascript est activé ?
La seule solution que j'ai trouvée c'est de rajouter une balise link au document via Javascript mais le temps d'interprétation du navigateur fait que l'on voit un document non stylé au chargement de la page.
Il doit bien y avoir une autre solution, non ?
N.B. : J'espère que j'ai été plus clair cette fois ...
Supposons que tu es un élément repéré par une classe qui inclus d'autres éléments...
Le h1 et le p ont un style qui leur est propre... Dans ton css, ça donnerait :
Pour changer le style via JS, tu peux modifier la classe du conteneur. Cette classe ne serait dispo qu'en cas de JS activé...
Dans ton css, tu n'as alors qu'à créer :
<div class="riri">
<h1>titre</h1>
<p>mon paragraphe</p>
</div>Le h1 et le p ont un style qui leur est propre... Dans ton css, ça donnerait :
.riri h1 { ... }
.riri p { ... }Pour changer le style via JS, tu peux modifier la classe du conteneur. Cette classe ne serait dispo qu'en cas de JS activé...
var oDiv = document.getElementsByTagName('div'), iI = oDiv.length - 1;
for(; iI >= 0; iI--)
if(oDiv[iI].className === 'riri')
oDiv[iI].className = 'loulou';Dans ton css, tu n'as alors qu'à créer :
.loulou h1 { ... }
.loulou p { ... }
