`If()` - Fonction CSS

if()

Résumé des caractéristiques de la fonction `if()`

Description rapide

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

Statut

Problèmes de compatibilité ⚠

Pourcentages

Ne s'appliquent pas.

Type d'animation

⁽¹⁾

Module W3C

Module CSS - Valeurs et unités

Références (W3C)

CSS Values and Units Module Level 5

Statut du document: WD (document de travail)

(1) L'animation de la fonction if() est très dépendante des propriétés auxquelles elle fait appel.

Schéma syntaxique de `if()`.

Schéma syntaxique de la fonction if().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

media-query est une requête média, telle qu'on l'écrirait dans une directive @media.
support-query est une requête testant la compatibilité du navigateur ave une syntaxe.
style-query est un requête sur une propriété personnalisée.
value est une valeur dans le type attendu par la propriété.
default est la valeur par défaut.

Description de la fonction `if()`.

⚠

Cette fonction est encore expérimentale. Peu de navigateurs la reconnaissent. Certains la reconnaissent partiellement.

La fonction if() permet de choisir une valeur dans une série. Chacune des valeurs est associée à une condition, c'est la première condition qui est vraie qui détermine quelle valeur est renvoyée. if() peut se terminer par un else qui est une condition toujours vraie. Autrement dit, la valeur associée à else est une valeur renvoyée lorsque toutes les autres conditions sont fausses.

if() peut être utilisée à la place de la valeur avec n'importe quelle propriété.

Les conditions de if() peuvent être introduites avec :

supports() : pour tester si une syntaxe CSS est reconnue par le navigateur.
media() : pour tester une caractéristique technique du navigateur ou du système.
style() : pour tester si une propriété a été appliquée à l'élément.
else : condition toujours vraie.

⚠ Attention ! Les exemples ne fonctionneront pas sur la plupart des navigateurs. Si vous ne voyez pas les couleurs dans les exemples ci-dessous, changez de navigateur.

Exemple avec `media()`.

La couleur d'arrière-plan de cet élément est un bleu ciel tant que la largeur de la fenêtre est supérieure à 1000 pixels. Vous pouvez réduire la largeur de la fenêtre du navigateur est constatez que le premier élément devient blanc. En fait la fonction if() ne renvoie plus rien ce qui se traduit par un absence de couleur.
Dans le deuxième exemple, une couleur par défaut à été introduite sur le else, du rouge.

Exemple avec `style()`.

style() permet de tester les propriétés personnalisées. Une propriété personnalisée --stock est associée à chacun des éléments ronds ci-dessous. Cette propriété peut valoir full, limit ou empty. La couleur de l'arrière-plan reflète cette information.

Il n'y pour l'instant pas de possibilité pour tester une propriété standard ou pour tester avec les signes > ou <.

Clavier pour manchots.

Souris pour excités.

Moniteur pour mal-voyants.

Exemple avec `supports()`.

supports() teste les capacités du navigateur. Dans notre exemple on teste si le navigateur reconnaît la syntaxe lch() pour désigner une couleur. Si c'est le cas cette syntaxe est utilisée pour définir la couleur d'arrière-plan.

La valeur `if()` peut être utilisée avec les propriétés suivantes :

La fonction if() peut être utilisée avec toutes les propriétés.

Animation avec la fonction `if()`.

La fonction if() peut être animée. Son comportement dépend des propriétés auxquelles elle fait appel. Si ces propriétés s'animent de façon discrète, la fonction sera également discrète ; si ces propriétés sont progressives, la fonction sera progressive.

Support de la fonction `if()`.

La fonction if() est encore très mal reconnue par les grands navigateurs (même Firefox et Opera ne la traitent pas encore) (2025).

Colonne 1

Traitement par les navigateurs de la fonction CSS if() qui permet de choisir une valeur parmi une liste.

Fonction
if()

Estimation de la prise en charge globale.

64%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Samsung Internet

Chrome

Firefox

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `if()`.

Module CSS - Valeurs et unités - Niveau 5

Introduction de la fonction if() qui permet de choisir une valeur parmi une série proposéen en fonction d'une condition.

03 Septembre 2024
Document de travail.

Voir aussi.

Le module des spécifications CSS éditées par le W3C CSS Values and Units Module introduit de nombreuses fonctions de calcul, et de fonctions pseudo-algorithmiques comme if().

Propriétés :

⚠

interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

⚠

calc-size()

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

log()

Calcule le logarithme d'un nombre.

max()

Détermine la valeur la plus grande parmi une série de valeurs.

min()

Détermine la valeur la plus petite parmi une série de valeurs.