Fonctions

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 extrait de 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 tokeniser 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 tirets (--) 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 ci-dessus, --base-color est transmis en tant qu'argument à la fonction var(). 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 une URL valide n'est pas 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(), rgba(), hsl(), hsla(), hwb(), lab() et lch(). 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.

calc()

Browser Support

• 26
• 12
• 16
• 7

Source

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()

Browser Support

• 79
• 79
• 75
• 11.1

Source

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.

Remarque : Nous abordons les unités telles que vw et vh dans le module sur les unités de dimensionnement.

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

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.

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() acceptent 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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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.

Browser Support

• 12
• 12
• 10
• 4

Source

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);
}

Échelle

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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(). Cette fonction est semblable à scale(), mais elle accepte trois arguments: le facteur de scaling X, Y et Z.

Traduire

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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.

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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 semblable à translate(). Si vous ne définissez qu'un seul argument, il ne s'applique qu'à l'axe X. Si vous définissez les deux, il s'applique aux axes X et Y. Vous pouvez également utiliser skewX et skewY pour affecter chaque axe indépendamment.

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

Perspective

Browser Support

• 36
• 12
• 16
• 9

Source

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 à animate 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

Par quels caractères les fonctions CSS peuvent-elles être identifiées ?

[]

Ces caractères sont utilisés pour les tableaux en JavaScript.

{}

Ces caractères encapsulent les règles en CSS.

()

Les fonctions utilisent ces caractères pour encapsuler les arguments.

::

Ces caractères sont destinés aux pseudo-éléments en CSS.

:

Ces caractères sont utilisés pour les pseudo-classes en CSS.

Le CSS dispose-t-il de fonctions mathématiques intégrées ?

Vrai

Il en existe beaucoup, et d'autres sont ajoutés aux spécifications et aux navigateurs.

Faux

Essayez encore.

Une fonction calc() peut être placée dans une autre calc(), comme font-size: calc(10px + calc(5px * 3));.

Vrai

🎉

Faux

Essayez encore.

Parmi les propositions suivantes, lesquelles sont des fonctions de forme CSS ?

ellipse()

🎉

square()

Essayez encore.

circle()

🎉

rect()

Essayez encore.

inset()

🎉

polygon()

🎉