Fonctions

bookmark_border Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

The CSS Podcast - 020: Functions

Jusqu'à présent, vous avez découvert plusieurs fonctions CSS. Dans le module sur la grille, vous avez découvert minmax() et fit-content(), qui vous aident à dimensionner les éléments. Dans le module color, vous avez découvert rgb() et hsl(), qui vous aident à définir des couleurs.

Comme de nombreux autres langages de programmation, le CSS comporte de nombreuses fonctions intégrées auxquelles vous pouvez accéder quand vous en avez besoin.

Chaque fonction CSS a un objectif spécifique. Dans cette leçon, vous obtiendrez une vue d'ensemble, qui vous permettra de mieux comprendre où et comment les utiliser.

Qu'est-ce qu'une fonction ?

Une fonction est un code nommé et autonome qui effectue une tâche spécifique. Une fonction est nommée afin que vous puissiez l'appeler dans votre code et lui transmettre des données. C'est ce que l'on appelle la transmission d'arguments.

De nombreuses fonctions CSS sont des fonctions pures, ce qui signifie que si vous leur transmettez les mêmes arguments, elles vous renverront toujours le même résultat, quel que soit ce qui se passe dans le reste de votre code. Ces fonctions sont souvent recalculées lorsque les valeurs changent dans votre CSS, comme les autres éléments du langage, tels que les valeurs en cascade calculées comme currentColor.

En CSS, vous ne pouvez utiliser que les fonctions fournies, au lieu d'écrire les vôtres. Toutefois, dans certains contextes, les fonctions peuvent être imbriquées les unes dans les autres, ce qui leur donne plus de flexibilité. Nous en parlerons plus en détail plus loin dans ce module.

Sélecteurs fonctionnels

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Vous avez découvert les sélecteurs fonctionnels dans le module sur les pseudo-classes, qui détaillent des fonctions telles que :is() et :not(). Les arguments transmis à ces fonctions sont des sélecteurs CSS, qui sont ensuite évalués. Si des éléments correspondent, le reste de la règle CSS leur sera appliqué.

Propriétés personnalisées et var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Une propriété personnalisée est une variable qui vous permet de coder des valeurs dans votre code CSS. Les propriétés personnalisées sont également affectées par la cascade, ce qui signifie qu'elles peuvent être manipulées ou redéfinies de manière contextuelle. Une propriété personnalisée doit être précédée de deux traits d'union (--) et est sensible à la casse.

La fonction var() accepte un argument obligatoire : la propriété personnalisée que vous essayez de renvoyer en tant que valeur.

Dans l'extrait de code précédent, la fonction var() a transmis --base-color en tant qu'argument. Si --base-color est défini, var() renvoie la valeur.

.my-element {
    background: var(--base-color, hotpink);
}

Vous pouvez également transmettre une valeur de déclaration de remplacement à la fonction var(). Cela signifie que si --base-color ne peut pas être trouvé, la déclaration transmise sera utilisée à la place, ce qui, dans cet exemple, correspond à la couleur hotpink.

Fonctions qui renvoient une valeur

La fonction var() n'est qu'une des fonctions CSS qui renvoient une valeur. Les fonctions telles que attr() et url() suivent une structure similaire à celle de var(). Vous transmettez un ou plusieurs arguments et les utilisez sur le côté droit de votre déclaration CSS.

a::after {
  content: attr(href);
}

Ici, la fonction attr() récupère le contenu de l'attribut href de l'élément <a> et le définit comme content du pseudo-élément ::after. Si la valeur de l'attribut href de l'élément <a> devait changer, cela se refléterait automatiquement dans cet attribut content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

La fonction url() utilise une URL de chaîne et permet de charger des images, des polices et du contenu. Si aucune URL valide n'est transmise ou si la ressource vers laquelle l'URL pointe ne peut pas être trouvée, rien n'est renvoyé par la fonction url().

Fonctions de couleur

Vous avez découvert tout ce qu'il faut savoir sur les fonctions de couleur dans le module Couleur. Si vous ne l'avez pas encore lu, nous vous recommandons vivement de le faire.

Voici quelques fonctions de couleur disponibles en CSS : rgb(), hsl(), lab(), lch(), oklab(), oklch() et color(). Ils ont tous une forme similaire, dans laquelle des arguments de configuration sont transmis et une couleur est renvoyée.

Expressions mathématiques

Comme de nombreux autres langages de programmation, le CSS fournit des fonctions mathématiques utiles pour faciliter différents types de calculs.

Fonctions arithmétiques

calc()

La fonction calc() utilise une seule expression mathématique comme paramètre. Cette expression mathématique peut être un mélange de types, tels que la longueur, le nombre, l'angle et la fréquence. Vous pouvez également mélanger des unités.

.my-element {
    width: calc(100% - 2rem);
}

Dans cet exemple, la fonction calc() est utilisée pour définir la largeur d'un élément sur 100% de son élément parent contenant, puis pour supprimer 2rem de cette valeur calculée.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

La fonction calc() peut être imbriquée dans une autre fonction calc(). Vous pouvez également transmettre des propriétés personnalisées dans une fonction var() dans le cadre d'une expression.

min() et max()

La fonction min() renvoie la plus petite valeur calculée de l'un ou des arguments transmis. La fonction max() fait l'inverse: elle obtient la plus grande valeur de l'un ou des arguments transmis.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

Dans cet exemple, la largeur doit être la plus petite valeur entre 20vw (soit 20% de la largeur de la fenêtre d'affichage) et 30rem. La hauteur doit être la plus grande valeur entre 20vh (soit 20% de la hauteur de la fenêtre d'affichage) et 20rem.

clamp()

La fonction clamp() accepte trois arguments: la taille minimale, la taille idéale et la taille maximale.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

Dans cet exemple, font-size sera fluide en fonction de la largeur de la fenêtre d'affichage. L'unité vw est ajoutée à une unité rem pour faciliter le zoom de l'écran, car quelle que soit l'unité de zoom, une unité vw aura la même taille. La multiplication par une unité rem (basée sur la taille de police racine) fournit à la fonction clamp() un point de calcul relatif.

Pour en savoir plus sur les fonctions min(), max() et clamp(), consultez cet article.

Fonctions trigonométriques

Les fonctions trigonométriques vous permettent de trouver n'importe quel point sur un cercle en fonction d'un angle, de modéliser des phénomènes cycliques tels que les ondes sonores, de décrire des orbites, etc. En CSS, vous pouvez utiliser des fonctions trigonométriques pour définir des propriétés en fonction de la rotation, des animations temporelles, de la rotation d'éléments en fonction d'un point et d'autres utilisations.

Pour en savoir plus et obtenir des exemples, consultez notre article sur les fonctions trigonométriques.

sin(), cos() et tan()

Les fonctions sin(), cos() et tan() acceptent un argument d'angle et renvoient respectivement le sinus, le cosinus et la tangente. Les fonctions sin() et cos() renvoient un nombre compris entre -1 et 1. La fonction tan() renvoie un nombre compris entre -Infinity et +Infinity. L'argument d'angle peut être n'importe quelle unité d'angle compatible.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

Dans l'exemple précédent, --sine-degrees et --sine-radians ont la même valeur (0.7071 dans ce cas).

Dans l'exemple précédent, les fonctions sin() et cos() sont utilisées pour créer des animations oscillantes sur les axes x et y en multipliant le résultat par le rayon spécifié. L'utilisation des deux fonctions en même temps permet d'obtenir une animation en orbite. Nous utilisons une propriété personnalisée, --angle, pour animer de manière fluide l'angle de tous les appels de fonction.

asin(), acos() et atan()

asin(), acos() et atan() sont l'inverse des fonctions sin(), cos() et tan(). Elles prennent un nombre comme argument et renvoient une valeur d'angle comprise entre -90deg et 90deg. Les fonctions asin() et acos() acceptent un nombre compris entre -1 et 1, tandis que la fonction atan() accepte un nombre compris entre -Infinity et +Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

La fonction atan2() accepte deux arguments représentant un point par rapport à l'origine et renvoie l'angle représentant la direction vers ce point. Vous pouvez ainsi faire pivoter des éléments pour les orienter vers un point spécifique. Les arguments peuvent être des nombres, des unités de taille ou un pourcentage, mais les deux arguments doivent être du même type.

Dans l'exemple ci-dessus, la fonction atan2() est utilisée pour déterminer l'angle entre le centre du viewport et la position actuelle de la souris. Notez que la valeur y correspond au premier argument et la valeur x au second. L'angle est ensuite utilisé pour positionner les "pupilles" par rapport au centre des "yeux", afin qu'elles suivent la souris.

hypot()

La fonction hypot() accepte deux arguments de longueur représentant les côtés d'un triangle rectangle et renvoie la longueur de l'hypoténuse. Vous pouvez utiliser cette méthode comme raccourci pour effectuer ce calcul à l'aide de fonctions exponentielles. Les deux arguments doivent être du même type d'unité, et hypot() renverra le même type.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Fonctions exponentielles

pow() et exp()

La fonction pow() accepte deux arguments numériques, la base et l'exposant, et élève la base à la puissance de l'exposant. Les deux arguments doivent être des nombres sans unités. La fonction exp() accepte un seul argument et équivaut à appeler la fonction pow() avec une base de e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

La fonction sqrt() prend un argument numérique et renvoie sa racine carrée. L'argument ne peut pas inclure d'unités.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

La fonction log() renvoie le logarithme d'une valeur numérique. Si un argument est transmis, il renvoie le logarithme naturel. Si un deuxième argument est transmis, la fonction log() utilise le deuxième argument comme base du logarithme.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Fonctions liées au signe

abs()

La fonction abs() prend un argument numérique et renvoie la valeur absolue (positive) de la valeur de l'argument.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

Dans l'exemple précédent, une valeur alpha de -1 donnerait un texte transparent, mais la fonction abs() renvoie la valeur absolue de 1, ce qui donne un texte totalement opaque.

sign()

La fonction sign() utilise un argument numérique et renvoie son signe. Les valeurs positives renvoient 1 et les valeurs négatives renvoient -1. Les valeurs nulles renvoient 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

Dans les exemples précédents, si --value est positif, la valeur supérieure est 75vh. Si elle est négative, la valeur supérieure est 25vh. Si cette valeur est nulle, la valeur supérieure est 50vh.

Formes

Les propriétés CSS clip-path, offset-path et shape-outside utilisent des formes pour découper visuellement votre zone ou fournir une forme autour de laquelle le contenu peut s'écouler.

Il existe des fonctions de forme qui peuvent être utilisées avec ces deux propriétés. Les formes simples telles que circle(), ellipse() et inset() prennent des arguments de configuration pour les redimensionner. Les formes plus complexes, telles que polygon(), utilisent des paires de valeurs d'axe X et d'axe Y séparées par une virgule pour créer des formes personnalisées.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Comme polygon(), il existe également une fonction path() qui utilise une règle de remplissage SVG comme argument. Cela permet de créer des formes très complexes qui peuvent être dessinées dans un outil graphique tel qu'Illustrator ou Inkscape, puis copiées dans votre CSS.

Transformations

Enfin, dans cette présentation des fonctions CSS, vous trouverez les fonctions de transformation, qui déforment, redimensionnent et même modifient la profondeur d'un élément. Toutes les fonctions suivantes sont utilisées avec la propriété transform.

Rotation

Vous pouvez faire pivoter un élément à l'aide de la fonction rotate(), qui le fait pivoter autour de son axe central. Vous pouvez également utiliser les fonctions rotateX(), rotateY() et rotateZ() pour faire pivoter un élément autour d'un axe spécifique. Vous pouvez transmettre des unités de degré, de tour et de radian pour déterminer le niveau de rotation.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

La fonction rotate3d() utilise quatre arguments.

Les trois premiers arguments sont des nombres qui définissent les coordonnées X, Y et Z. Le quatrième argument correspond à la rotation qui, comme les autres fonctions de rotation, accepte les degrés, l'angle et les tours.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Vous pouvez utiliser la propriété individuelle rotate pour faire pivoter un élément. Lorsqu'il est utilisé en dehors de la propriété transform, vous pouvez le faire passer indépendamment des autres transformations. Il accepte des valeurs similaires à celles des fonctions de rotation.

Échelle

Vous pouvez modifier la mise à l'échelle d'un élément avec transform et la fonction scale(). La fonction accepte un ou deux nombres comme valeur, qui déterminent une mise à l'échelle positive ou négative. Si vous ne définissez qu'un seul argument numérique, les axes X et Y seront mis à l'échelle de la même manière. Définir les deux est un raccourci pour X et Y. Tout comme rotate(), il existe des fonctions scaleX(), scaleY() et scaleZ() pour mettre à l'échelle un élément sur un axe spécifique.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Comme pour la fonction rotate, il existe une fonction scale3d(). Elle est semblable à scale(), mais elle accepte trois arguments: le facteur de scaling X, Y et Z.

Vous pouvez utiliser la propriété individuelle scale pour mettre à l'échelle un élément. Lorsqu'il est utilisé en dehors de la propriété transform, vous pouvez le faire passer séparément des autres transformations.

Traduire

Les fonctions translate() déplacent un élément tout en conservant sa position dans le flux de documents. Elles acceptent des valeurs de longueur et de pourcentage comme arguments. La fonction translate() traduit un élément le long de l'axe X si un argument est défini, et le long des axes X et Y si les deux arguments sont définis.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Comme pour les autres fonctions de transformation, vous pouvez utiliser des fonctions spécifiques pour une axe spécifique à l'aide de translateX, translateY et translateZ. Vous pouvez également utiliser translate3d, qui vous permet de définir la translation X, Y et Z dans une seule fonction.

Comme scale et rotate, vous pouvez également utiliser la propriété translate en dehors de la propriété transform pour déplacer un élément.

.my-element{
  translate: 20px 30px;
}

Décalage

Vous pouvez déformer un élément à l'aide des fonctions skew(), qui acceptent des angles comme arguments. La fonction skew() fonctionne de manière très similaire à translate(). Si vous ne définissez qu'un seul argument, il ne s'appliquera qu'à l'axe X. Si vous définissez les deux, il s'appliquera aux axes X et Y. Vous pouvez également utiliser skewX et skewY pour affecter chaque axe indépendamment.

.my-element {
  transform: skew(10deg);
}

Perspective

Enfin, vous pouvez utiliser la propriété perspective, qui fait partie de la famille de propriétés de transformation, pour modifier la distance entre l'utilisateur et le plan Z. Cela donne une impression de distance et peut être utilisé pour créer une profondeur de champ dans vos conceptions.

Cet exemple de David Desandro, tiré de son article très utile, montre comment l'utiliser, ainsi que les propriétés perspective-origin-x et perspective-origin-y, pour créer des expériences véritablement 3D.

Fonctions d'animation, dégradés et filtres

Le CSS fournit également des fonctions qui vous aident à animer des éléments, à leur appliquer des dégradés et à utiliser des filtres graphiques pour en modifier l'apparence. Pour que ce module soit aussi concis que possible, ils sont abordés dans les modules associés. Ils suivent tous une structure similaire à celle des fonctions présentées dans ce module.

Vérifier vos connaissances

Tester vos connaissances sur les fonctions