@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.

@supports (hyphens: auto){
    p{
       hyphens: auto
     }
}

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 :

if ( CSS.supports('property', 'value') )  { }
 
if ( CSS.supports( '(property: value) and (property: value') ) { }

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