Go to Hackademy website

Tester une propriété CSS via javascript

Martin Catty

Posté par Martin Catty dans les catégories front

L’approche classique

Dans une logique d’amélioration progressive, il est important de savoir ce que l’on peut faire ou ne pas faire en CSS avec le navigateur de l’internaute.

Par exemple si l’on souhaite vérifier que le navigateur supporte l’opacité:

if('opacity' in document.body.style) {
  // C'est parti…
}

L’approche media queries

Les media queries permettent d’adapter ses feuilles de style selon le media ciblé et ses capacités.

Cette approche est utilisée dans la partie réalisations du site de Synbioz. Si nous sommes en présence d’un navigateur supportant -webkit-transform-3d, on peut mettre en place l’effet cube.

Ici impossible d’utiliser l’approche classique car javascript connait webkitTransform mais pas webkitTransform3D.

Afin de savoir dans mon code javascript si cette propriété est supportée nous avons donc utilisé la puissance des media queries, avec un morceau de code très léger:

#cube {
  height: 100px;
}

@media (-webkit-transform-3d) {
  height: 200px;
}

Au niveau du javascript il reste à tester la hauteur de l’élément en question. Généralement on utilisera un seul élément caché dans le DOM pour tester toutes les propriétés dont on a besoin.

var cube = document.getElementById("cube");
if(200 == cube.offsetHeight) {
  // propriété supportée
}

Cet article évoque brièvement les media queries dans un usage un peu détourné mais cette nouveauté de CSS3 mériterait un article à elle seule, tant elle peut se révéler pratique.

L’équipe Synbioz.

Libres d’être ensemble.

Articles connexes

Houdini, CSS by JS

21/03/2019

Bonjour à tous, bienvenue dans le monde magique de l’illusion et des faux-semblants, où un background peut souvent en cacher un autre. Que le rideau se lève le temps d’apercevoir ce qui se cache...

Architecture en trois tiers d'une application Vue.js

21/02/2019

Ça commence à faire un petit moment que je vous bassine avec Vue.js, et que je vous fais construire des single-page applications en s’appuyant dessus. Néanmoins, nous n’avons jamais réellement parlé...

Une bibliothèque pour gérer l'authentification avec Vue.js, partie 2 — en route vers HTTP

08/02/2019

À l’heure où j’écris ces lignes, il m’est difficile de prévoir le temps qu’il fera quand vous les lirez. Laissons donc cette fois-ci les considérations météorologiques de côté et replongeons-nous...

Dark mode et CSS

24/01/2019

Bonjour à tous, aujourd’hui un sujet (presque) d’actualité puisque nous allons parler du mode sombre de MacOS, mais surtout d’une nouvelle manière — assez radicale — de penser nos interfaces. Le...