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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
.
serrer()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 ?
{}
()
[]
::
:
Le CSS intègre-t-il des fonctions mathématiques ?
Une fonction calc()
peut être placée à l'intérieur d'un autre élément calc()
, comme font-size: calc(10px + calc(5px * 3));
.
Parmi les propositions suivantes, lesquelles sont des fonctions de forme CSS ?
rect()
square()
circle()
inset()
ellipse()
polygon()