Quelle est la meilleure façon de détecter, avec JS, si l'utilisateur a désactivé vos feuilles de style? Y a-t-il une manière fiable même?
6 Réponses :
Quelque chose de facile serait de vérifier la couleur de fond du corps par exemple.
Cependant, quelle est la probabilité que quelqu'un désactive CSS et non javascript? (Dunno ce que vous utilisez pour évidemment)
Je ne sais pas à quel point non plus. Le site que je travaille a des exigences d'accessibilité très élevées cependant, et pour certains éléments (par exemple carrousel) ayant JS sans CSS finit par une interface déroutante qui ne semble rien faire (car le carrousel utilise beaucoup de styles CSS)
EventHough Il existe des normes claires pour l'accessibilité, il est un peu difficile de déterminer quelles choses à utiliser sur un budget. J'ai généralement une approche qui va avec l'utilisation de titres de liaison, une structure appropriée sur le site afin qu'il puisse être facilement tabouillée, bon contraste, des boutons clairs, le contenu de la division et le style, etc. Test du clavier navigant vous-même. Un site vraiment bien fait sera accessible à ce qu'il soit propre si l'auteur fait suite au contenu. Seulement 2-3% Désactiver JS, moins de désactiver le CSS et les nouveaux lecteurs d'écran, espérons-ils que ce n'était aussi mauvais que possible.
Pourquoi ne pas leur demander?
Pierre peste ici à la fois. Les gens votants sans commentaire pourquoi.
Ce n'était certainement pas moi qui a été évité. Semble être une solution valide. Cependant, 99% du temps qu'un utilisateur aurait CSS désactivé et que JS activé est pour un lecteur d'écran ou une autre sorte d'outil d'accessibilité. Utiliser peut-être une version contestée CSS n'est pas le meilleur choix ou les mots.
J'aurais une petite division vide siège à l'écran. Lorsque la page se charge, utilisez JS pour vérifier la propriété 'Affichage' de cette DIV. Si c'est «Aucun», votre CSS a été chargé avec succès. Sinon, il peut être nécessaire de désactiver / modifier vos styles.
Si vous contrôlez la feuille de style, vous pouvez avoir un style "calibration". Avoir un nom de classe qui applique une propriété CSS à un élément. Une bonne propriété sécurisée de navigateur croisée peut être une couleur de fond.
Lorsque vous chargez votre JS, essayez de créer un élément de manière dinamiquement et appliquez-y le nom de classe. Vérifiez si les propriétés correspondent (celle de l'élément avec celui que vous attendez).
Le commentaire de BoltClock s'approche de près. Vous pouvez utiliser Voir la documentation pour GeComputeDstyles
N'hésitez pas à supprimer le nœud "Calibrage" après l'avoir vérifié. window.getComp députée (CalibrationElement, null) mais qui échouera dans les versions de navigateur plus anciennes.
Au moins dans Safari, une partie de la difficulté est que, avec CSS désactivé, les éléments signalent toujours les attributs CSS. Mais si vous testez sur le rendu réel d'une propriété, vous pouvez le dire. La largeur est probablement la propriété la plus simple (et la plus courante) que vous pouvez tester.
ci-dessous est un exemple de script (il utilise jQuery, mais pourrait facilement être un non-jqueryfied) qui va tester pour CSS. Nous avons simplement chargé une DIV vide sur la page, donnons-lui une largeur de 3px à l'aide de CSS, puis testez la largeur de cette div. Si la largeur n'est pas 3, CSS est désactivé. Évidemment, vous devez vous assurer que cela ne colle pas avec aucun autre style que vous pourriez avoir pouvant causer la largeur autre que 3. Mais cela donne l'idée générale. P>
<html>
<head>
<title>Test</title>
<style type="text/css">
#testCSS {width: 3px;}
</style>
</head>
<body>
<div id="testCSS"></div>
<div id="message"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery("#testCSS").width() != 3) jQuery("#message").html("CSS Disabled");
});
</script>
</body>
</html>
En supposant que votre feuille de style externe ou en ligne principale soit chargée avant le script, vous pouvez utiliser ceci: https://developer.mozilla.org/en-us/docs/dom/domefeets C'est ie5 + Compatible aussi selon: http://www.jr.pl/www .Quirksmode.org / dom / w3c_css.html La mise en garde est que, si les styles sont désactivés après la charge de la fenêtre (qui ne fait que repeindre un navigateur), l'objet Document.StylesSheets ne changera pas à la volée. De plus, comme indiqué dans les commentaires ci-dessous, cela ne fonctionnera pas pour Firefox lors de l'utilisation de la fonction Vue -> Style -> Aucune fonctionnalité de style, pour quels styles sont toujours chargés, tout simplement pas appliqué à la vue. Pour détecter l'état initial sur des navigateurs ou modifications sur Windowsize , il peut être fait avec un Réinitialisation de style sur le corps, avec le code suivant placé après Ceci fonctionne si vous utilisez Lorsque des styles sont désactivés ou désactivés, le Si votre conception de site utilise une marge spécifique autre que 8PX pour le corps, voici une option alternative: Corps {marge: 0; } dans vos feuilles de style (sans largeur personnalisée particulière), car il rend le corps élément de la même largeur que documentelement (alias the corpulent.clientwidth reviendra à la largeur du corps par défaut du navigateur, qui a toujours un Marge ( 8px Par défaut par défaut dans CSS 2.1 Navigateurs majeurs ) et donc différent de documentelement.clientwidth
J'ai éteint les styles de Firefox 28.0 via View-> Page de page-> Pas de style et essayé les deux approches que vous avez fournies, elles ne fonctionnent pas. document.stylesheets.length est toujours supérieur à 0, et documenter.body.clitwidth! == Document.Width revient toujours vrai.
@ Stack0verflow Merci pour le rapport. Il semble que l'option Firefox «sans style» n'implique pas les styles de styles est en fait désactivé (en cela, il est différent de l'option «Désactiver les styles» de WebKit). Les styles sont simplement retirés de la vue mais ils sont toujours chargés. Je vais examiner la solution pour une solution révisée.
Merci et cela semble être le cas.
Vous pouvez vérifier le style calculé pour certains éléments et voir s'ils ne correspondent pas à ce que vous déclarez dans votre feuille de style.
Vérifiez si le si les styles que vous avez définis dans votre fichier s'appliquent?