Les fonctions CSS

Qu’est-ce qu’une fonction ?

Une fonction est un bloc de code cohérent dont le but est d’effectuer une tâche précise et qui renvoie un résultat.

Dans la plupart des langages informatiques utilisant les fonctions, on peut distinguer deux grands types de fonctions :

• Les fonctions prêtes à l’emploi, c’est-à-dire des fonctions dont la tâche et le code sont déjà définis. Nous n’avons qu’à appeler ces fonctions pour utiliser leurs fonctionnalités ;
• Les fonctions personnalisées ou conçues par l’utilisateur, c’est-à-dire nous, afin d’effectuer les tâches qui nous intéressent.

Nous avons déjà utilisé des fonctions dans ce cours sans vraiment le savoir, comme les fonctions rgb() ou linear-gradient() par exemple.

En CSS, nous allons nous contenter d’utiliser des fonctions prédéfinies par le langage. Nous passerons le résultat de ces fonctions en valeur de nos propriétés. Par exemple, lorsqu’on écrit color : rgb(255,255,255), vous devez bien comprendre que derrière rgb() se cache tout un code complexe qui va s’exécuter afin de calculer et de renvoyer une couleur exploitable par la propriété color.

Dans ce cas précis, pour que la fonction rgb() fonctionne correctement, nous allons devoir lui fournir trois données qu’on appelle également des arguments. Ici, ces données sont des chiffres compris entre 0 et 255 et qui servent à indiquer les niveaux d’intensité de rouge, de vert et de bleu qui doivent être mélangées par rgb() afin que la fonction détermine la couleur finale.

Vous devez imaginer l’intérieur d’une fonction comme une série cohérente d’instructions qui vont être exécutées dès qu’on va appeler la fonction. Pour appeler ou exécuter une fonction, il suffit de mentionner son nom suivi d’un couple de parenthèses et éventuellement d’une ou plusieurs arguments dans ces parenthèses selon la fonction.

 

Quel est l’intérêt d’utiliser des fonctions ?

Le grand intérêt des fonctions est d’éviter la réécriture du code et d’avoir à inventer la roue : lorsqu’on utilise un langage, on effectue souvent les mêmes opérations. Certains créateurs de langages s’en sont rendus compte et ont donc commencé à intégrer à leur langage des fonctions dont le but était précisément d’effectuer telle ou telle opération. Plutôt que d’avoir à créer le script pour effectuer telle opération, les utilisateurs n’ont alors plus qu’à utiliser la fonction correspondante pour parvenir au même résultat.

Dans certains autres cas, nous allons avoir des besoins plus spécifiques en tant que développeurs mais allons nous rendre compte que nous effectuons plusieurs fois le même type d’opérations pour un projet. Dans ce cas, si aucune fonction prédéfinie répondant à notre besoin n’existe, il va être intéressant de créer nos propres fonctions (si le langage utilisé nous le permet) pour ne pas avoir à réécrire l’ensemble du code lié à la fonction à chaque fois et ainsi gagner du temps et créer un code plus facilement maintenable.

 

Liste des fonctions CSS disponibles

Durant ce cours, nous avons déjà eu l’opportunité de rencontrer une bonne partie des fonctions CSS. Complétons la liste !

Les fonctions liées à la couleur

Nous avons déjà rencontré les fonctions rgb(), rgba(), hsl(), hsla() qui permettent de créer des couleurs.

En plus de celles-ci, la fonction hwb() peut également être utilisée pour fournir une valeur de couleur. Pour cela, on devra spécifier les composants de teinte, de blancheur et de noirceur de la couleur, ainsi qu’une valeur alpha.

Les fonctions liées aux images

• La fonction CSS image() permet d’inclure une image dans une page. Cette fonction est similaire à la fonction url() mais fournit des options supplémentaires comme la possibilité de spécifier des images de secours (au cas où le navigateur ne pourrait pas afficher l’image préférée) ou encore de découper une partie d’une image ;
• La fonction blur() est utilisée pour flouter une image. On l’utilisera généralement avec la propriété filter ;
• La fonction CSS brightness() est utilisée avec la propriété filter pour ajuster la luminosité d’une image ;
• La fonction CSS saturate() est utilisée avec la propriété filter pour ajuster le niveau de saturation d’une image ;
• La fonction CSS hue-rotate() est utilisée avec la propriété filter pour appliquer un changement ou une “rotation” de teinte à une image. On précisera la rotation en deg. ;
• La fonction CSS sepia() est utilisée avec la propriété filter pour convertir une image en sépia ;
• La fonction grayscale() permet de transformer une image en noir et blanc. On va lui passer un nombre entre 0 et 1 en valeur qui va représenter la proportion des couleurs qui devront être transformées en noir et blanc ;
• La fonction invert() est utilisée avec la propriété filter pour inverser les couleurs d’une image ;
• La fonction opacity() est utilisée avec la propriété filter pour appliquer une transparence aux échantillons d’une image. A ne pas confondre avec la propriété opacity ;
• La fonction contrast() est utilisée avec la propriété filter pour ajuster le contraste d’une image ;
• La fonction drop-shadow() est utilisée avec la propriété filter pour ajouter un effet d’ombre portée à une image.

Les fonctions liées aux dégradés

Nous avons déjà étudié les fonctions de création de dégradés qui sont les suivantes :

• La fonction linear-gradient() ;
• La fonction radial-gradient() ;
• La fonction repeating-linear-gradient() ;
• La fonction repeating-radial-gradient().

Les fonctions liées aux listes

Le CSS nous fournit trois fonctions pour modifier le comportement des listes ou d’autres éléments HTML pour qu’ils ressemblent à des listes.

• La fonction symbols() est utilisée pour définir un style de puce. On peut utiliser son résultat en valeur de la propriété list-style-type par exemple ;
• La fonction counter() permet d’afficher le compteur généré par un élément ;
• La fonction counters() permet d’afficher des compteurs imbriqués générés par un élément et ses parents.

Les fonctions liées aux transformations

Nous avons déjà travaillé avec des fonctions CSS permettant de créer des rotations, des mises à l‘échelle etc.

Le CSS met à notre disposition les fonctions suivantes pour créer des transformations :

• Les fonctions permettant de créer des translations translate(), translateX(), translateY(), translate3d(), translateZ() ;
• Les fonctions permettant de créer des rotations rotate(), rotateX(), rotateY(), rotate3d(), rotateZ() ;
• Les fonctions permettant de créer des mises à l’échelle scale(), scaleX(), scaleY(), scale3d(), scaleZ() ;
• Les fonctions permettant de créer des torsions skew(), skewX(), skewY() ;
• Les fonctions matrix() et matrix3d() ;
• La fonction cubic-bezier() ;
• La fonction CSS perspective() définit la profondeur afin de donner une perspective à l’élément positionné en 3D.

Les fonctions liées aux figures géométriques

Le CSS dispose d’un module de spécification appelé “shape” qui décrit la façon dont on peut créer des formes géométriques en CSS.

Les fonctions circle(), ellipse(), polygon() et inset() retournent des valeurs de formes dites “basiques”. On va pouvoir utiliser ces fonctions avec des propriétés comme shape-outside pour contrôler l’aspect extérieur (la forme) du contenu autour de l’élément ou avec clip-path pour découper le contenu de l’élément selon la forme définie par la valeur de la fonction.

Attention : ces fonctionnalités sont très récentes et le support par les navigateurs n’est pas encore complet.

Autres fonctions CSS

• La fonction attr() retourne la valeur d’une attribut d’un élément HTML. On utilisera généralement le résultat de fonction comme valeur pour la propriété content ;
• La fonction calc() permet d’utiliser le résultat de calculs dans les valeurs de propriétés CSS. Elle peut être utilisée à la place d’autres types d’unités lors de la définition de la largeur ou de la hauteur d’un élément ou encore pour des angles, des fréquences, etc. ;
• La fonction url() permet de spécifier la localisation d’un fichier. On peut l’utiliser pour indiquer l’emplacement d’une image ou d’une police ;
• La fonction var() permet de passer le contenu d’une propriété personnalisée (variable) à une propriété CSS. Nous allons reparler de cette fonction dans la prochaine leçon.