Support des fonctionnalités

@supports

Appelé aussi règle conditionnelle, le @supports permet de détecter si une propriété css est compatible avec le navigateur utilisé par l’internaute, et ainsi prévoir une alternative si besoin.

Cette propriété et supporté par à peu près tout les navigateurs modernes sauf l’irréductible IE. Can i use

Tout comme les médias queries, @supports peut intégrer plusieurs règles au sein d’un bloc d’accolade. Et les conditions doivent êtres individuelles et entourées par des parenthèses.

Si le navigateur supporte la propriété hyphens il va l’appliquer sinon il va s’adapter avec les conditions par défaut.

Il est possible d’ajouter des conditions and et or comme avec les medias queries, ainsi que tester la non reconnaissance d’une propriété avec l’opérateur not.

Toutefois certaines règles que l’on testes sont mieux supportées que le @supports lui même, notamment sur IE. Donc le résultat peut être trompeur.

@supports et javascript

Il est possible d’utiliser @supports avec le javascript. Il y a deux syntaxes possible :

Conclusion

C’est une propriété assez intéressante dans la théorie, mais malheureusement du fait de sont manque de compatibilité sous IE, la pratique n’est pas forcément utile.

En effet celle ci ne sera utile que si la propriété testée n’est pas compatible avec plusieurs navigateurs, tels que hyphens, et que celle-ci ne demande pas non plus un travail trop important en solution alternative.

Source: alsacreation, MDN

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.