Pour appliquer des styles différents lorsque JavaScript est activé, une bonne solution est d’ajouter une classe spécifique sur l’élément body.
Mais si les scripts ont été placés en fin de page pour des raisons de performances, il peut y avoir un temps d’attente (grossièrement, le temps de télécharger la page, puis le script, et enfin d’exécuter le script) qui laissera apparaître un « flash » avec les styles prévus pour la version sans JavaScript.
Le meilleur compromis que j’ai trouvé est de placer le script suivant juste après l’ouverture de l’élément body :
<body>
<script type="text/javascript">
document.body.className+=" js";
</script>
Et d’une manière raccourcie à l’extrême (attention, c’est-pas-valide) :
<body> <script>document.body.className+=" js"</script>
Connaissez-vous une meilleure solution ?
Tiens, je me demande s’il ne serait pas plus logique d’avoir cette fonctionnalité directement en CSS, à l’aide d’une nouvelle règle @script par exemple :
@script javascript {
/* Styles spécifiques pour JavaScript */
}
9 commentaires
Poster un commentaire
Flux RSS des commentaires de cet article
Perso, j’utilise la classe sur l’élément html (le premier élément créé) avec :
exemple
Le code pourrait être dans un fichier séparé.
Le 27 Jan. 2010 à 13h38 par Ombre
Je confirme le document.documentElement.
Il est toujours possible que le script soit exécuté alors que le noeud DOM d’une balise précédente n’est toujours pas présent dans l’arbre. Pourquoi pas avec la balise body.
Le documentElement représente la balise HTML, qui ne devrait pas avoir de classe, mais dans les faits ça fonctionne et on ne viole aucune spec (DOM nous autorise à faire ça, et on n’a pas cassé HTML vu que la classe n’a pas été mise en HTML)
Je vous propose par contre de ne pas utiliser += » js » parce que sur certains vieux navigateurs (dont je n’ai plus la version exacte) les attributs de classe commençant par un espace sont mal pris en compte.
Par contre @Ombre : surtout pas de ça dans un fichier séparé, ça tuerait une grosse partie de l’intérêt, et vu le poids de la ligne de script ça va très bien en inline dans le HTML
Le 27 Jan. 2010 à 19h50 par Eric
Je vois pas bien l’intéret d’un tel montage, pourquoi ne pas injecter les styles directement avec javascript en lazyloading.
Le 27 Jan. 2010 à 21h12 par truffo
@truffo : Parce que c’est plus lent :-)
C’est aussi plus complexe à gérer, puisque les styles d’un même composant se retrouvent dans deux fichiers séparés.
C’est pour cette même raison que je préfère utiliser les commentaires conditionnels pour ajouter un ID spécifique à IE plutôt qu’un fichier CSS séparé.
Le 27 Jan. 2010 à 21h21 par Pierre Bertet
@Eric Une classe appliquée sur HTML est parfaitement valide en HTML5 ;)
Le 27 Jan. 2010 à 22h41 par Benjamin D.C.
Je pensais que l’espace (séparateur) était nécessaire au cas où l’attribut html posséderait déjà des classes.
Merci pour l’info. ;-)
Le 29 Jan. 2010 à 12h13 par Ombre
L’élement html je voulais dire. :-)
Le 29 Jan. 2010 à 12h20 par Ombre
@Ombre : Effectivement l’espace est là pour cette raison, mais selon Éric, ça pourrait poser un problème sur d’anciens navigateurs si l’attribut est vide au départ.
@Éric : Tu as une idée du navigateur qui n’accepterait pas un espace comme premier caractère de l’attribut
class? Un Un vieil Opera peut-être ?Au pire, on peut toujours le mettre après la classe, mais c’est plus long :
Le 29 Jan. 2010 à 12h31 par Pierre Bertet
Hum intéressant ce document.documentElement, jusqu’à présent je faisais :
document.getElementsByTagName('html')[0].className = 'js';
Merci !
Le 05 Fév. 2010 à 09h44 par Cyril