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.