CSS

Détecter le support des fonctionnalités avec @supports

Article par (Intégrateur du Dimanche, Strasbourg)
Créé le (17432 lectures)
Tags : navigateurs, support, css3, fonctionnalité, condition, détection

La règle @supports, également nommée “règle conditionnelle”, permet de détecter la reconnaissance de certaines propriétés CSS au sein du navigateur.

Introduite au sein des spécifications dans le module des CSS conditionnelles, au même titre que les Media Queries, la règle @supports se rapproche de ce que peut nous offrir un outil tel que Modernizr, à savoir détecter le support ou non d’une fonctionnalité CSS chez votre visiteur afin de prévoir une alternative au besoin.

Compatibilité

Au statut de “Candidate recommendation”, @supports est actuellement compatible sur les navigateurs suivants, selon Can I Use :

Navigateurs Versions Détails
Firefox Firefox 22+
Firefox Mobile 28+

Supporté depuis Firefox 17 en activant une preference du navigateur

Chrome Chrome 28+
Chrome Mobile 33+
 
Opera Opera 12.1+
Opera Mobile 16+
 
Android Browser Android Browser 4.4+  

Syntaxe générale

À l’instar des autres règles-at, @supports intègre une ou plusieurs règles au sein d’un bloc d’accolades.

La - ou les - condition(s) doivent être individuellement entourées de parenthèses.

Voici un exemple de règle conditionnelle valide :

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

Les règles conditionnelles suivantes sont invalides :

@supports  (hyphens) { /* valeur obligatoire */
  ...
}

@supports  (hyphens: auto and text-align-last:justify) { /* parenthèses individuelles obligatoire */
  ...
}

Opérateurs

La règle @supports accepte les opérateurs suivants :

  • not (négation),
  • and (et),
  • or (ou)

Exemples

Tester le support d’une propriété préfixée avec or

@supports  (-webkit-filter: sepia(1)) or (filter: sepia(1)) {
  .sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
    }
}

Tester la non-reconnaissance d’une propriété avec not

@supports not (height: 100vh) {
  html, body {height: 100%; margin: 0; padding: 0}
  .content {min-height: 100%; display: table}
}
@supports  (height: 100vh) {
  .content {height: 100vh;}
}

Tester à l’aide d’une combinaison d’opérateurs

Dans le code suivant, le test est vérifié si display: flex est supporté et si display: grid n’est pas supporté :

@supports  (display: flex) and ( not (display: grid) ) {
  body {
    display: flex;
    }
}

Gare aux faux-négatifs !

La règle @supports est parfois moins bien supportée que la propriété testée, et les résultats peuvent en être faussés.

Par exemple dans le test suivant, le module CSS3 Grid Layout est bien supporté par Internet Explorer 10, mais c’est @supports qui n’est pas reconnu sur ce navigateur !

@supports  (display: -ms-grid) or (display: grid) {
  div {
    display: -ms-grid;
    display: grid;
    }
}

Version JavaScript

Pour information, l’équivalent JavaScript de la règle @supports se présente sous la forme de la méthode CSS.supports().

Les spécifications proposent deux types de syntaxes pour cette méthode :

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

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

Ressources

Commentaires

jmlapam a dit le

Un jour de plus, une connaissance en plus. Merci. Donc pour IE on continuera avec Modernizr.

Nico3333fr a dit le

Pour IE, autant se baser sur les commentaires conditionnels via les classes conditionnelles : http://openweb.eu.org/articles/les-commentair... ;)

Victor BRITO a dit le

@Nico3333fr : Sauf qu'à partir d'IE 10, ça ne le fait plus.

Nico3333fr a dit le

@Victor BRITO : Oui, je sous-entendais "très vieux IE" :)

gwengoat a dit le

Bon bah au moins maintenant c'est plus clair ;) J'avais récupéré un template responsive pour un de mes sites sans trop savoir à quoi servaient les @ :/

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil