Fonctions

Podcast CSS – 020: Functions

Jusqu'à présent, dans ce cours, vous avez découvert plusieurs fonctions CSS. Dans le module grid, nous vous avons présenté minmax() et fit-content(), qui vous aident à dimensionner les é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, Le CSS intègre beaucoup de 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 de haut niveau, ce qui vous permettra de bien mieux comprendre où et comment les utiliser.

Qu'est-ce qu'une fonction ?

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

Beaucoup de fonctions CSS sont des fonctions pures, ce qui signifie que si vous leur transmettez les mêmes arguments, ils vous donneront toujours le même résultat, peu importe ce qui se passe dans le reste de votre code. Ces fonctions sont souvent recalculées à mesure que les valeurs changent dans votre CSS, similaires à d'autres éléments du langage, telles que les valeurs calculées en cascade telles que currentColor.

En CSS, vous ne pouvez utiliser que les fonctions fournies, plutôt que d'écrire la vôtre, mais les fonctions peuvent être imbriquées les unes dans les autres dans certains contextes, en leur donnant 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 en savez plus sur les sélecteurs fonctionnels dans le module module de pseudo-classes quelles fonctions détaillées comme :is() et :not(). Les arguments transmis dans ces fonctions sont des sélecteurs CSS, qui sont ensuite évaluées. En cas de correspondance avec des éléments, 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 en fonction du contexte. Les propriétés personnalisées doivent être précédées de deux tirets (--) et être sensibles à la casse.

var() utilise un argument requis: 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 est introuvable, La déclaration transmise est utilisée à la place. Dans le cas de cet exemple, il s'agit de la couleur hotpink.

Fonctions qui renvoient une valeur

La fonction var() n'est qu'une des fonctions CSS qui renvoient une valeur. Des fonctions telles que attr() et Les url() suivent une structure semblable à celle de var(), vous transmettez un ou plusieurs arguments et les utilisez à droite de votre déclaration CSS.

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

Ici, la fonction attr() utilise le contenu de l'attribut href de l'élément <a> et la définir comme content du pseudo-élément ::after. Si la valeur de l'attribut href de l'élément <a> devait changer, cette action est automatiquement répercutée dans cet attribut content.

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

La fonction url() utilise une URL de chaîne pour 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 fait, nous vous conseillons vivement de le faire.

Certaines fonctions de couleur disponibles dans CSS sont rgb(), rgba(), hsl(), hsla(), hwb(), lab() et lch(). Tous ces éléments se présentent sous une forme similaire : 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 vous aider avec différents types de calculs.

calc()

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 26
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 16 ans
• <ph type="x-smartling-placeholder"></ph> 7.

Source

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 mixtes.

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

Dans cet exemple, la fonction calc() est utilisée pour dimensionner la largeur d'un élément que 100% de son élément parent conteneur, puis en supprimant 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() dans le cadre d'une expression.

min() et max()

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 75
• <ph type="x-smartling-placeholder"></ph> 11,1

Source

min() renvoie la plus petite valeur calculée parmi un ou plusieurs arguments transmis. max() fait l'inverse: 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 (qui représente 20% de la largeur de la fenêtre d'affichage) et 30rem. La hauteur doit être la valeur la plus élevée comprise 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 Dimensionnement.

serrer()

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 75
• <ph type="x-smartling-placeholder"></ph> 13,1

Source

clamp() prend trois arguments: la taille minimale, la taille idéale et le maximum.

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

Dans cet exemple, la 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 a la même taille. Multipliant par une unité rem, en fonction de la taille de la 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

La clip-path, offset-path et shape-outside Les propriétés CSS utilisent des formes pour rogner visuellement votre zone ou pour permettre au contenu de circuler.

Vous pouvez utiliser des fonctions de forme avec ces deux propriétés. Les formes simples telles que circle(), ellipse() et inset() prennent des arguments de configuration pour les dimensionner. Les formes plus complexes, telles que polygon() prendre 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 accepte 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 comme Illustrator ou Inkscape, puis la copier dans votre CSS.

Transformations

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

Rotation

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 1 fois
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 3,5
• <ph type="x-smartling-placeholder"></ph> 3,1

Source

Vous pouvez faire pivoter un élément à l'aide de la rotate() qui fait pivoter un élément sur son axe central. Vous pouvez également utiliser 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é, de tour et de radian pour déterminer le niveau de rotation.

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

rotate3d() utilise quatre arguments.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 10.
• <ph type="x-smartling-placeholder"></ph> 4.

Source

Les trois premiers arguments sont des nombres, qui définissent les coordonnées X, Y et Z. Le quatrième argument est la rotation, comme les autres fonctions de rotation, accepte les degrés, les angles et les virages.

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

Échelle

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 1 fois
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 3,5
• <ph type="x-smartling-placeholder"></ph> 3,1

Source

Vous pouvez modifier la mise à l'échelle d'un élément avec transform et la propriété fonction scale(). La fonction accepte un ou deux nombres en tant que valeur, ce qui détermine une mise à l'échelle positive ou négative. Si vous ne définissez qu'un argument numérique, les axes X et Y sont mis à l'échelle de la même manière et définir les deux est un raccourci pour X et Y. Tout comme rotate(), il y a scaleX(), scaleY() et scaleZ() pour mettre à l'échelle un élément sur un axe spécifique à la place.

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

Comme pour la fonction rotate, fonction scale3d(). Cette méthode est semblable à scale(), mais elle nécessite trois arguments: le facteur d'échelle X, Y et Z.

Traduire

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 1 fois
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 3,5
• <ph type="x-smartling-placeholder"></ph> 3,1

Source

translate() les fonctions déplacent un élément tout en conservant sa position dans le flux de documents. Ils acceptent des valeurs de longueur et de pourcentage en tant qu'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 d'autres fonctions de transformation, vous pouvez utiliser des fonctions spécifiques pour un axe spécifique, avec 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.

Asymétrie

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 1 fois
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 3,5
• <ph type="x-smartling-placeholder"></ph> 3,1

Source

Vous pouvez incliner un élément à l'aide de la commande 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'affecte 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 de manière indépendante.

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

Perspective

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 12 ans
• <ph type="x-smartling-placeholder"></ph> 16 ans
• <ph type="x-smartling-placeholder"></ph> 9

Source

Enfin, vous pouvez utiliser 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 sensation 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 il peut être utilisé, ainsi que les propriétés perspective-origin-x et perspective-origin-y pour créer de véritables expériences 3D.

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

CSS fournit également des fonctions qui vous aident à animer des éléments, Vous pouvez leur appliquer des gradients et utiliser des filtres graphiques pour modifier leur apparence. Pour que ce module soit aussi concis que possible, vous les découvrirez 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

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

[]

Ces caractères sont destinés aux tableaux en JavaScript.

{}

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

()

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

::

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

:

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

Le CSS intègre-t-il des fonctions mathématiques ?

Vrai

Il y en a beaucoup, et d'autres vont être ajoutés aux spécifications et aux navigateurs !

Faux

Essayez encore.

Une fonction calc() peut être placée à l'intérieur d'un autre élément 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()

🎉