19 août 2013

Outil JavaScript : détecter l'activation des styles pour améliorer l'accessibilité et optimiser les scripts

…
var detectionCSS = false;
function detecterCSS(){
 var b = document.getElementsByTagName("body")[0];
 var x1 = b.offsetWidth;
 b.style.width = x1 - 1 + "px";
 var x2 = b.offsetWidth;
 b.style.width = "";
 detectionCSS = x1 == x2 ? false : true;
}
</script>
</head>
<body>
<script>
detecterCSS();
</script>

Récemment écrit pour un site de Sanofi - mais en XHTML 1 :
=> présent dans l'en-tête via l'appel d'un fichier 'techno-abilities.js', qui contient aussi Modernizr et l'ajout d'une classe 'js' - afin, réciproquement, de détecter l'activation du JavaScript pour les CSS.

La variable 'detectionCSS' est ensuite sollicitée dans les scripts qui sont appelés à la fin de 'body'.
Exemple : définir une fonction vide pour un carousel avec styles désactivés.

Aucun commentaire: