@supports{} CSS règle

Définition de la CSS @supports{}.

La règle CSS @supports{} permet de tester la prise en charge par le navigateur d'une ou des propriétés Css et une de ses valeurs et d'assigner des déclarations Css si le résultat du test est vrai.

Exemple de syntaxe CSS @supports{} :

@supports ( display : flex ) { 
  identifiant{ /* propriétés Css */ }
  .identifiant2{ /* propriétés Css */ }
}
@supports ( width : 1vw ) and ( height : 1vh ) { 
  identifiant{ /* propriétés Css */ }
  .identifiant2{ /* propriétés Css */ }
}
@supports ( -ms-transform : scaleY(2) ) or ( transform : scaleY(2) ) { 
  identifiant{ /* propriétés Css */ }
  .identifiant2{ /* propriétés Css */ }
}
@supports not( transform : scaleY(2) ) { 
  identifiant{ /* propriétés Css */ }
  .identifiant2{ /* propriétés Css */ }
}

La règle de feuille de style @supports CSS accepte comme valeur de "test" :

propriete : nom de la propriété Css suivie de : puis de sa valeur, le tout entre parenthèse.
conditions : plusieurs propriétés avec un opérateur logique.

Exemple de code @supports{} CSS

Conditions d'application de la CSS @supports{}.

La règle @supports CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
La règle CSS @supports doit être déclarée dans une balise HTML ou XHTML STYLE.

Problème d'interprétation de @supports{} en Css.

La règle de feuille de style @supports CSS pose des problèmes car elle n'est pas à ce jour reconnue par tous les navigateurs (2012).

Règles de syntaxes CSS pour @supports{}.

Les opérateurs de @supports

Dans les définitions des opérateur, nous utiliserons le terme "testpropriété" qui est égal à ( nom propriété : valeur ).

L'opérateur logique "and":
L'opérateur logique "and" signifie et. Il permet de tester plusieurs "testpropriété" qui doivent être toutes vraies.

Exemple d'utilisation de "and" avec @supports :

@supports ( nom_propriete : valeur ) and (  nom_propriete2 : valeur ) { 
  /* divers règles Css */  
}
@supports ( nom_propriete : valeur ) and (  nom_propriete2 : valeur ) and (  nom_propriete3 : valeur ) { }

L'opérateur logique "or":
L'opérateur logique "and" signifie ou. Il permet de tester plusieurs "testpropriété" dont au moins une doit être vrai.

Exempple d'utilisation de "or" avec @supports :

@supports ( nom_propriete : valeur ) or (  nom_propriete2 : valeur ) { 
  /* divers règles Css */  
}
@supports ( nom_propriete : valeur ) or (  nom_propriete2 : valeur ) or (  nom_propriete3 : valeur ) { }

L'opérateur de négation "not":
L'opérateur "not" signifie ne doit pas être vari. Il permet une "testpropriété" ou un ensemble de condition.

Exempple d'utilisation de "not" avec @supports :

@supports not ( nom_propriete : valeur ) { 
  /* divers règles Css */  
}
@supports not ( ( nom_propriete : valeur ) or (  nom_propriete2 : valeur ) ) { }
@supports (( nom_propriete : valeur ) or (  nom_propriete2 : valeur )) and( not ( nom_propriete3 : valeur ) ) { }

Règles d'écritures des conditions

Chaque opérateur suivant doit être précédé d'un espace et suivi d'un espace.

Exempple d'écritures des conditions de @supports :

/* mauvaise écriture */
@supports not( nom_propriete : valeur ) { }
@supports ( nom_propriete : valeur )or(  nom_propriete2 : valeur ) { }
@supports ( nom_propriete : valeur )and(  nom_propriete2 : valeur ) { }
/* bonne écriture */
@supports not ( nom_propriete : valeur ) { }
@supports ( nom_propriete : valeur ) or (  nom_propriete2 : valeur ) { }
@supports ( nom_propriete : valeur ) and (  nom_propriete2 : valeur ) { }

Pour l'opérateur and ou or, chaque changement d'opérateur nécessite de mettre la condition précédente et suivante entre parenthèses.

Exempple d'écritures des conditions de @supports :

/* mauvaise écriture */
@supports ( nom_propriete : valeur ) or (  nom_propriete2 : valeur ) and (  nom_propriete3 : valeur ) { }
/* bonne écriture */
@supports (( nom_propriete : valeur ) or (  nom_propriete2 : valeur )) and (  nom_propriete3 : valeur ) { }
/* ou suivant la condition que vous voulez tester */
@supports ( nom_propriete : valeur ) or ((  nom_propriete2 : valeur ) and (  nom_propriete3 : valeur )) { }

Compatibilités navigateurs de la règle @supports{}

Détails des versions de la CSS @supports{}: Règle @supports{} est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS @supports{}: Règle CSS @supports{} est compatible à partir de Chrome 28; Règle CSS @supports{} est compatible à partir de Firefox 22; Règle CSS @supports{} est compatible à partir de Internet Explorer ou Edge 14; Règle CSS @supports{} est compatible à partir de Opera 12.1; Règle CSS @supports{} est compatible à partir de Safari 9; Règle CSS @supports{} est compatible à partir de iOS Safari 9.3

Votre avis sur la définition @supports{} en CSS

Votez pour la définition CSS `@supports{}`

Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.