2 Associés est une agence web de Montréal spécialisée en développement web et mobile, stratégie de contenu SEO, SEM et les technologies langagières.

Vous voulez discuter?

Détecter si JavaScript est activé

2 Associés développement web et mobile à Montréal

La méthode simple pour détecter si JavaScript est activé est de lui demander d’exécuter une action.

Avec tous les nouveaux dispositifs mobiles disponibles, et leurs forfaits de données, la possibilité d’un dispositif ayant JavaScript désactivé est plus grande. En général, nous pouvons nous en tirer avec l’élément NOSCRIPT prévu à cet effet. Cependant, si cet élément nous permet de présenter un markup différent, parfois il sera simplement plus juste de présenter un affichage différent via CSS.

Problème :

Cette note technique fournit une méthode simple pour détecter si JavaScript est activé ainsi que les étapes pour mettre en place, dans le cas contraire, un identifiant dans le code source (Document Object Model) de manière à pouvoir modifier par CSS l’affichage des contenus du DOM autrement cachés par JavaScript.

Solution :

En considérant les codes HTML, CSS et JavaScript suivants, nous avons une page Web comportant une classe no-js sur l’élément BODY que nous enlevons par JavaScript au moment où le document est prêt. Les deux paragraphes sont suivis d’un bouton qui, une fois cliqué, dévoile un contenu supplémentaire. Si nous désactivons le JavaScript sur cette page, elle demeure la même à l’exception que le bouton ne fonctionne plus, faute de JavaScript.

En sachant qu’une classe est disponible sur l’élément BODY lorsque le JavaScript est désactivé, nous pouvons ajouter des styles supplémentaires pour ce cas précis.

Ceci nous permet donc de modifier l’affichage à notre guise, un peu à la manière des Media queries avec CSS.

Commentez cet article

Votre adresse de courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles reliés