Fonctions

Podcast sur les CSS – 020: Functions

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

Comme beaucoup d'autres langages de programmation, CSS comporte de nombreuses fonctions intégrées auxquelles vous pouvez accéder chaque fois que vous en avez besoin.

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

Qu'est-ce qu'une fonction ?

Une fonction est un morceau 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 qu'on appelle la transmission d'arguments.

De nombreuses fonctions CSS sont des fonctions pures. Cela signifie que si vous leur transmettez les mêmes arguments, elles vous renverront toujours le même résultat, indépendamment de ce qui se passe dans le reste de votre code. Ces fonctions sont souvent recalculées à mesure que les valeurs changent dans votre code CSS, de la même manière que 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 plutôt que d'écrire les vôtres, mais les fonctions peuvent être imbriquées les unes dans les autres dans certains contextes, ce qui leur donne plus de flexibilité. Nous aborderons ce point plus en détail dans la suite de ce module.

Sélecteurs fonctionnels

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

Vous avez découvert les sélecteurs de fonctions dans le module de pseudo-classes, qui détaille des fonctions telles que :is() et :not(). Les arguments transmis dans ces fonctions sont des sélecteurs CSS, qui sont ensuite évalués. En cas de correspondance avec certains éléments, le reste de la règle CSS leur est 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 en fonction du contexte. Une propriété personnalisée doit être précédée de deux tirets (--) et est sensible à la casse.

La fonction var() utilise un argument obligatoire : la propriété personnalisée que vous essayez de renvoyer en tant que valeur. Dans l'extrait de code ci-dessus, 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 est introuvable, la déclaration transmise est utilisée à la place (dans cet exemple, la couleur hotpink).

Fonctions renvoyant 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 semblable à celle de var() : vous transmettez un ou plusieurs arguments et les utilisez du côté droit de votre déclaration CSS.

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

Ici, la fonction attr() prend le contenu de l'attribut href de l'élément <a> et le définit en tant que content du pseudo-élément ::after. Si la valeur de l'attribut href de l'élément <a> est modifiée, cela se reflète 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 pointe l'URL est introuvable, la fonction url() ne renvoie rien.

Fonctions de couleur

Vous avez tout appris sur les fonctions de couleur dans le module color. Si vous ne l'avez pas encore lu, nous vous recommandons vivement de le faire.

Certaines fonctions de couleur disponibles en CSS sont rgb(), rgba(), hsl(), hsla(), hwb(), lab() et lch(). Tous ces éléments ont une forme similaire, où les arguments de configuration sont transmis et une couleur est renvoyée.

Expressions mathématiques

Comme beaucoup d'autres langages de programmation, CSS fournit des fonctions mathématiques utiles pour faciliter divers types de calculs.

calc()

La fonction calc() utilise une seule expression mathématique comme paramètre. Cette expression mathématique peut être un mélange de types, comme la longueur, le nombre, l'angle et la fréquence. Les unités peuvent également être mélangées.

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

Dans cet exemple, la fonction calc() permet de dimensionner la largeur d'un élément à 100% de son élément parent, puis de supprimer 2rem de la 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() au sein d'une expression.

min() et max()

La fonction min() renvoie la plus petite valeur calculée parmi un ou plusieurs arguments transmis. La fonction max() effectue le contraire: elle obtient la plus grande valeur d'un ou de plusieurs arguments transmis.

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

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

clamp()

La fonction clamp() utilise 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 sur l'écran, car quel que soit le niveau de zoom, une unité vw aura la même taille. La multiplication par une unité rem (en fonction de 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.

Tracés

Les propriétés CSS clip-path, offset-path et shape-outside utilisent des formes pour délimiter visuellement votre zone ou donner une forme au contenu.

Des fonctions de forme peuvent être utilisées avec ces deux propriétés. Les formes simples telles que circle(), ellipse() et inset() utilisent des arguments de configuration pour les dimensionner. Les formes plus complexes, telles que polygon(), utilisent des paires de valeurs des axes X et 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 à l'aide d'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 inclinent, redimensionnent et modifient même 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 fait pivoter un élément sur son axe central. Vous pouvez également utiliser les fonctions rotateX(), rotateY() et rotateZ() pour faire pivoter un élément sur un axe spécifique à la place. Vous pouvez transmettre des unités de degrés, de rotation et de radians 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 est la rotation qui, comme les autres fonctions de rotation, accepte les degrés, l'angle et les virages.

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

Scaling

Vous pouvez modifier la mise à l'échelle d'un élément avec transform et la fonction scale(). La fonction accepte un ou deux nombres en tant que valeurs 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. La définition des deux est donc un raccourci pour X et Y. Tout comme rotate(), il existe des fonctions scaleX(), scaleY() et scaleZ() permettant de mettre à l'échelle un élément sur un axe spécifique.

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

De même que la fonction rotate, il existe une fonction scale3d(). Cette méthode est semblable à scale(), à la différence près qu'elle nécessite trois arguments: les facteurs d'échelle X, Y et Z.

Traduction

Les fonctions translate() déplacent un élément tout en conservant sa position dans le flux de document. Ils 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 traduit un élément 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 un axe spécifique à l'aide de translateX, translateY et translateZ. Vous pouvez également utiliser translate3d, qui vous permet de définir la traduction X, Y et Z dans une seule fonction.

Décalage

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

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

Vue utilisateur

Enfin, vous pouvez utiliser la propriété perspective, qui fait partie de la famille de propriétés des transformations, pour modifier la distance entre l'utilisateur et le plan Z. Cela donne le sentiment 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 réellement 3D.

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

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

Testez vos connaissances

Tester vos connaissances sur les fonctions