web-dev-qa-db-fra.com

Existe-t-il de bonnes raisons d'éviter d'utiliser la balise noscript dans un en-tête HTML5?

J'ai besoin d'un moyen efficace et esthétique de dégrader gracieusement l'apparence du site pour les utilisateurs dont le Javascript est désactivé et, bien que je ne sois pas au courant du problème lié à l'ajout d'un lien vers une autre feuille de style entourée de balises noscript dans l'en-tête du document - w/HTML5 , je pensais que demander avant d’aller dans cette voie ne pouvait pas faire de mal.

Mise à jour: Exemple de document illustrant un comportement indésirable lors de l'utilisation de JS pour masquer des éléments

Ce document affiche de manière fiable un clignotement rouge pendant que le navigateur repeint le contenu de la fenêtre lorsque je teste avec une actualisation matérielle dans Internet Explorer 8.0 (notez que je devais ajouter une image assez grande pour que IE présente ce comportement - Je pense que cela apparaîtra dans IE lorsque les ressources sont faibles).

<html>
<head>
<title>See the blink?</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#blinky').css('display','none');
});
</script>
<style type="text/css">
body {
    background-color:#000000;
}
div#blinky {
    background-color:#FF0000;
    position:absolute;
    height:100%;
    width:100%;
}
</style>
</head>
<body>
<img src="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" height="1" width="1" />
<div id="blinky">
<h1>Did you see it?</h1>
</div>
</body>
</html>

Je refuse la mise à niveau jusqu'à ce que je sois absolument obligé de le faire. Je pense donc que mon ordinateur de bureau, légèrement sous-alimenté, est représentatif du plus petit dénominateur commun de l'expérience utilisateur. Je ne peux pas garantir que vous serez en mesure de dupliquer sur une machine haut de gamme avec de nombreuses ressources disponibles, mais vous pouvez essayer de voir ce que je veux dire.

htmlheadersnoscript
2
danlefree

En général, il est préférable d'utiliser amélioration progressive plutôt que dégradation progressive. Cela signifie essentiellement en commençant par le contenu comme si l'utilisateur n'avait pas de script, puis en utilisant Javascript pour améliorer la page.

Par exemple, vous pouvez commencer avec un lien/bouton qui va quelque part ou soumet un formulaire. Ensuite, vous ajoutez du Javascript qui empêche la naivigation/soumission et fait autre chose à la place.

Dans votre cas particulier, je ne vois pas pourquoi il serait judicieux d’ajouter une feuille de style dans les balises noscript. Pourquoi ne pas ajouter les styles à votre feuille de style principale? En cas de conflit de styles, je commencerais par ceux de noscript, puis utiliserons Javascript pour ajouter une classe/ID unique sur un élément parent qui modifie les styles.

10
DisgruntledGoat