Fonctions de valeur CSS

Syntaxe

sélecteur {
  propriété: fonction([argument]? [, argument]!);
}

La valeur syntaxique commence par le nom de la fonction, suivi d'une parenthèse ouvrante (. Ensuite, il y a les argument(s), et la fonction se termine par une parenthèse fermante ).

Les fonctions peuvent prendre plusieurs arguments, qui sont formatés de manière similaire aux valeurs de propriété CSS. Les espaces sont autorisés, mais ils sont facultatifs à l'intérieur des parenthèses. Dans certaines notations fonctionnelles, plusieurs arguments sont séparés par des virgules, tandis que d'autres utilisent des espaces.

Les fonctions de transformation

Le type de données CSS <transform-function> représente la transformation d'apparence. Il est utilisé comme valeur de la propriété transform.

Les fonctions de déplacement

translateX()

Déplace un élément horizontalement.

translateY()

Déplace un élément verticalement.

translateZ()

Déplace un élément le long de l'axe z.

translate()

Déplace un élément sur le plan 2D.

translate3d()

Déplace un élément dans l'espace 3D.

Les fonctions de rotation

rotateX()

Fait pivoter un élément autour de l'axe horizontal.

rotateY()

Fait pivoter un élément autour de l'axe vertical.

rotateZ()

Fait pivoter un élément autour de l'axe z.

rotate()

Fait pivoter un élément autour d'un point fixe sur le plan 2D.

rotate3d()

Fait pivoter un élément autour d'un axe fixe dans l'espace 3D.

Les fonctions de mise à l'échelle

scaleX()

Fait évoluer un élément horizontalement.

scaleY()

Fait évoluer un élément verticalement.

scaleZ()

Fait évoluer un élément le long de l'axe z.

scale()

Fait évoluer un élément sur le plan 2D.

scale3d()

Fait évoluer un élément dans l'espace 3D.

Les fonctions de déformation

skewX()

Fait pencher un élément dans la direction horizontale.

skewY()

Fait pencher un élément dans la direction verticale.

skew()

Fait pencher un élément sur le plan 2D.

Les fonctions de matrice

matrix()

Décrit une matrice de transformation 2D homogène.

matrix3d()

Décrit une transformation 3D sous la forme d'une matrice homogène 4×4.

Les fonctions de perspective

perspective()

Définit la distance entre l'utilisateur·ice et le plan z=0.

Les fonctions mathématiques

Les fonctions mathématiques permettent d'écrire des valeurs numériques CSS sous forme d'expressions mathématiques.

Chacune des pages ci-dessous contient des informations détaillées sur la syntaxe d'une fonction mathématique, des données de compatibilité avec les navigateurs, des exemples, etc. Pour une introduction complète aux fonctions mathématiques CSS, regardez Utiliser les fonctions mathématiques CSS.

Les opérations arithmétiques de base

calc()

Effectue des calculs arithmétiques de base sur des valeurs numériques.

calc-size()

Effectue des calculs sur des valeurs de taille intrinsèques telles que auto, fit-content et max-content, qui ne sont pas prises en charge par la fonction calc().

Les fonctions de comparaison

min()

Calcule la plus petite valeur d'une liste de valeurs.

max()

Calcule la plus grande valeur d'une liste de valeurs.

clamp()

Calcule la valeur centrale d'une valeur minimale, centrale et maximale.

Les fonctions de valeur par paliers

round()

Calcule un nombre arrondi en fonction d'une stratégie d'arrondi.

mod()

Calcule un module (avec le même signe que le diviseur) lors de la division d'un nombre par un autre.

rem()

Calcule un reste (avec le même signe que le dividende) lors de la division d'un nombre par un autre.

Les fonctions trigonométriques

sin()

Calcule le sinus trigonométrique d'un nombre.

cos()

Calcule le cosinus trigonométrique d'un nombre.

tan()

Calcule la tangente trigonométrique d'un nombre.

asin()

Calcule l'inverse trigonométrique du sinus d'un nombre.

acos()

Calcule l'inverse trigonométrique du cosinus d'un nombre.

atan()

Calcule l'inverse trigonométrique de la tangente d'un nombre.

atan2()

Calcule l'inverse trigonométrique de la tangente de deux nombres dans un plan.

Les fonctions exponentielles

pow()

Calcule la base élevée à la puissance d'un nombre.

sqrt()

Calcule la racine carrée d'un nombre.

hypot()

Calcule la racine carrée de la somme des carrés de ses arguments.

log()

Calcule le logarithme d'un nombre.

exp()

Calcule e élevé à la puissance d'un nombre.

Les fonctions liées au signe

abs()

Calcule la valeur absolue d'un nombre.

sign()

Calcule le signe (positif ou négatif) d'un nombre.

Les fonctions de filtre

Le type de données CSS <filter-function> représente un effet graphique qui peut modifier l'apparence d'une image d'entrée. Il est utilisé dans les propriétés filter et backdrop-filter.

blur()

Augmente le flou gaussien de l'image.

brightness()

Éclaircit ou assombrit une image.

contrast()

Augmente ou diminue le contraste de l'image.

drop-shadow()

Applique une ombre portée derrière une image.

grayscale()

Convertit une image en niveaux de gris.

hue-rotate()

Change la teinte globale d'une image.

invert()

Inverse les couleurs d'une image.

opacity()

Ajoute de la transparence à une image.

saturate()

Change la saturation globale d'une image.

sepia()

Augmente le sépia d'une image.

Les fonctions de couleur

Le type de données CSS <color> spécifie différentes représentations de couleurs.

rgb()

Définit une couleur donnée selon ses composants rouge, vert, bleu et alpha (transparence).

hsl()

Définit une couleur donnée selon ses composants teinte, saturation, luminosité et alpha (transparence).

hwb()

Définit une couleur donnée selon ses composants teinte, blancheur et noirceur.

lch()

Définit une couleur donnée selon ses composants luminosité, chroma et teinte.

oklch()

Définit une couleur donnée selon ses composants luminosité, chroma, teinte et alpha (transparence).

lab()

Définit une couleur donnée selon ses composants luminosité, distance a et distance b dans l'espace colorimétrique lab.

oklab()

Définit une couleur donnée selon ses composants luminosité, distance a, distance b dans l'espace colorimétrique lab et alpha (transparence).

color()

Spécifie un espace colorimétrique particulier plutôt que l'espace colorimétrique sRGB implicite.

color-mix()

Mélange deux valeurs de couleur dans un espace colorimétrique donné par une certaine quantité.

contrast-color()

Renvoie une couleur avec un contraste maximal par rapport à une couleur donnée.

device-cmyk()

Définit les couleurs CMJN de manière dépendante du périphérique.

light-dark()

Renvoie l'une des deux couleurs fournies en fonction du schéma de couleurs actuel.

Les fonctions d'image

Le type de données CSS <image> fournit une représentation graphique des images ou des dégradés.

Les fonctions de dégradé

linear-gradient()

Les dégradés linéaires font passer progressivement les couleurs le long d'une ligne imaginaire.

radial-gradient()

Les dégradés radiaux font passer progressivement les couleurs à partir d'un point central (origine).

conic-gradient()

Les dégradés coniques font passer progressivement les couleurs autour d'un cercle.

repeating-linear-gradient()

Semblable à linear-gradient() et prend les mêmes arguments, mais répète les arrêts de couleur indéfiniment dans toutes les directions pour couvrir l'ensemble de son conteneur.

repeating-radial-gradient()

Semblable à radial-gradient() et prend les mêmes arguments, mais répète les arrêts de couleur indéfiniment dans toutes les directions pour couvrir l'ensemble de son conteneur.

repeating-conic-gradient()

Semblable à conic-gradient() et prend les mêmes arguments, mais répète les arrêts de couleur indéfiniment dans toutes les directions pour couvrir l'ensemble de son conteneur.

Les fonctions d'image

image()

Définit un type <image> de manière similaire au type <url>, mais avec des fonctionnalités supplémentaires, y compris la spécification de la direction de l'image et des images de remplacement pour les cas où l'image préférée n'est pas prise en charge.

image-set()

Sélectionne l'image CSS la plus appropriée à partir d'un ensemble donné, principalement pour les écrans à haute densité de pixels.

cross-fade()

Mélange deux ou plusieurs images à une transparence définie.

element()

Définit une valeur <image> générée à partir d'un élément HTML arbitraire.

paint()

Définit une valeur <image> générée avec un PaintWorklet.

Les fonctions de compteur

Les fonctions de compteur CSS sont généralement utilisées avec la propriété content, bien qu'en théorie, elles puissent être utilisées partout où une <string> est prise en charge.

counter()

Renvoie une chaîne de caractères représentant la valeur actuelle du compteur nommé s'il y en a un.

counters()

Active les compteurs imbriqués, renvoyant une chaîne de caractères concaténée représentant les valeurs actuelles des compteurs nommés, s'il y en a.

symbols()

Définit les styles de compteur en ligne, directement en tant que valeur d'une propriété.

Les fonctions de forme

Les formes de base

Le type de données CSS <basic-shape> représente une forme graphique. Il est utilisé dans les propriétés clip-path, offset-path et shape-outside.

circle()

Définit une forme de cercle.

ellipse()

Définit une forme d'ellipse.

inset()

Définit une forme de rectangle en retrait.

rect()

Définit une forme de rectangle en utilisant les distances des bords supérieur et gauche de la boîte de référence.

xywh()

Définit une forme de rectangle en utilisant les distances spécifiées des bords supérieur et gauche de la boîte de référence ainsi que la largeur et la hauteur du rectangle.

polygon()

Définit une forme de polygone.

path()

Accepte une chaîne de caractères du chemin SVG pour permettre le dessin d'une forme.

shape()

Accepte une liste de commandes séparées par des virgules définissant la forme à dessiner.

Les autres fonctions de forme

ray()

Valide avec offset-path ; définit le segment de ligne qu'un élément animé peut suivre.

superellipse()

Définit la courbure d'une ellipse ; peut être utilisé pour spécifier une <corner-shape-value>, qui est utilisée avec corner-shape et ses propriétés constitutives et associées.

Les fonctions de référence

Les fonctions suivantes sont utilisées comme valeur des propriétés pour référencer une valeur définie ailleurs :

attr()

Utilise les attributs définis sur l'élément HTML.

env()

Utilise la variable d'environnement définie par l'agent utilisateur.

if()

Définit conditionnellement une valeur de propriété en fonction du résultat d'une requête de style, d'une requête média ou d'une requête de fonctionnalité.

url()

Utilise un fichier à partir de l'URL spécifiée.

var()

Utilise la valeur de propriété personnalisée au lieu de toute partie d'une valeur d'une autre propriété.

Les fonctions de grille

Les fonctions suivantes sont utilisées pour définir une grille CSS :

fit-content()

Limite une taille donnée à une taille disponible selon la formule min(maximum size, max(minimum size, argument)).

minmax()

Définit une plage de taille supérieure ou égale à min et inférieure ou égale à max.

repeat()

Représente un fragment répété de la liste des pistes, permettant un grand nombre de colonnes ou de lignes présentant un motif récurrent.

Les fonctions de police

Les fonctions de police CSS sont utilisées avec la propriété font-variant-alternates pour contrôler l'utilisation des glyphes alternatifs.

stylistic()

Active les alternatifs stylistiques pour les caractères individuels. Le paramètre est un nom spécifique à la police mappé à un numéro. Il correspond à la valeur OpenType salt, comme salt 2.

styleset()

Active les alternatifs stylistiques pour les ensembles de caractères. Le paramètre est un nom spécifique à la police mappé à un numéro. Il correspond à la valeur OpenType ssXY, comme ss02.

character-variant()

Active des alternatives stylistiques spécifiques pour les caractères. C'est similaire à styleset(), mais ne crée pas de glyphes cohérents pour un ensemble de caractères ; les caractères individuels auront des styles indépendants et pas nécessairement cohérents. Le paramètre est un nom spécifique à la police mappé à un numéro. Il correspond à la valeur OpenType cvXY, comme cv02.

swash()

Active les glyphes swash. Le paramètre est un nom spécifique à la police mappé à un numéro. Il correspond aux valeurs OpenType swsh et cswh, comme swsh 2 et cswh 2.

ornaments()

Active des ornements tels que les fleurons et d'autres glyphes dingbat. Le paramètre est un nom spécifique à la police mappé à un numéro. Il correspond à la valeur OpenType ornm, comme ornm 2.

annotation()

Active les annotations telles que les chiffres cerclés ou les caractères inversés. Le paramètre est un nom spécifique à la police mappé à un numéro. Il correspond à la valeur OpenType nalt, comme nalt 2.

Les fonctions d'accélération

Le type de données CSS <easing-function> représente une fonction mathématique. Il est utilisé dans les propriétés de transition et d'animation :

linear()

Fonction d'accélération qui interpole linéairement entre ses points.

cubic-bezier()

Fonction d'accélération qui définit une courbe de Bézier cubique.

steps()

Itération le long d'un nombre spécifié d'arrêts le long de la transition, affichant chaque arrêt pendant des durées égales.

Les fonctions d'animation

Les fonctions suivantes sont utilisées comme valeur de différentes propriétés animation-timeline :

scroll()

Définit le animation-timeline d'un élément sur une timeline de progression de défilement anonyme.

view()

Définit le animation-timeline d'un élément sur une timeline de progression de vue anonyme.

Les fonctions de positionnement des ancres

Les fonctions de positionnement des ancres sont utilisées lors du positionnement et du dimensionnement des éléments positionnés par rapport à la position et à la taille de leurs éléments d'ancrage associés.

anchor()

Renvoie une longueur relative à la position des bords de l'élément d'ancrage associé à un élément positionné par ancre.

anchor-size()

Renvoie une longueur relative à la taille de l'élément d'ancrage associé.

Les fonctions de comptage dans l'arbre

Les fonctions suivantes renvoient une valeur entière basée sur l'arbre DOM, plutôt que sur l'arbre plat comme la plupart des valeurs CSS le font :

sibling-index()

Renvoie un entier reflétant la position de l'élément sélectionné parmi ses frères.

sibling-count()

Renvoie un entier reflétant le nombre total de frères, y compris l'élément sélectionné.

Voir aussi

• Le module Valeurs et unités CSS
• Apprendre : Valeurs et unités