10 fonctions CSS que tout développeur front-end devrait connaître

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire l'apparence et le formatage des documents écrits en HTML. Il s’agit d’une partie importante du développement Web car elle permet aux développeurs de contrôler l’apparence de leurs sites Web et applications.

Dans cet article, nous aborderons certaines des fonctions CSS les plus utiles que tout développeur front-end devrait connaître. Ces fonctions peuvent être utilisées pour ajouter du style et du formatage à votre site Web ou à votre application et peuvent grandement améliorer l'expérience utilisateur.

Comme d'autres langages de programmation, les fonctions CSS simplifient les tâches en fournissant des solutions sur une seule ligne. Mais contrairement à d’autres langages de programmation, le résultat d’une fonction en CSS n’affecte en réalité aucune logique du site web, il est uniquement utilisé pour affecter les éléments visuels présents dans le site web.

Vous trouverez ci-dessous les nombreux types de fonctions disponibles en CSS :

• La fonction des attributs personnalisés

• Fonction couleur

• Fonction de sélection de pseudo-classe

• Fonction d'animation

• Fonction filtre

• Fonctions de dimension et de mise à l'échelle

• Fonction de comparaison

• Fonction logique

Il existe de nombreux autres types de fonctions disponibles en CSS. Mais cet article n’en aborde que 10 pour notre usage.

Fonction var()

La seule fonction de propriété personnalisée disponible en CSS est la fonction var. Chaque fois que nous devons utiliser une propriété personnalisée en CSS, nous utilisons la fonction var pour la référencer

Exemple

Vous trouverez ci-dessous un exemple d'utilisation de la fonction var pour référencer une propriété personnalisée -

html {
   --background-color: teal;
}
div {
   background-color: var(--background-color);
}

Fonction calc()

La fonction la plus couramment utilisée pour les calculs mathématiques/arithmétiques en CSS est la fonction calc. Elle est largement utilisée avec la fonction var dont nous avons parlé ci-dessus pour calculer dynamiquement les valeurs des propriétés.

Exemple

p {
   height: calc(100px – 80px);
}

Nous pouvons également utiliser calc avec d'autres unités formelles, telles que em, rem, etc.

Fonction url()

Les ressources que vous devez ajouter à votre site Web se trouvent souvent à plusieurs endroits différents. Donc, à l’heure actuelle, nous avons besoin d’une fonction qui puisse être utilisée pour charger ces ressources dans des fichiers CSS. C'est exactement ce que fait la fonction url, elle lie et charge une ressource d'un emplacement source vers un emplacement cible, qui est un fichier CSS. Vous pouvez lier tous les types de ressources telles que des images, svgs, polices, feuilles de style et plus encore

Exemple

body{
   background-image: url(/fonts/myFont);
}

Fonction rgb()

Lors de la conception d'un site Web, nous devons souvent utiliser la couleur. CSS propose de nombreuses façons d'utiliser les couleurs, telles que les codes hexadécimaux, les noms de couleurs, etc. Une façon de représenter les couleurs consiste à utiliser leurs valeurs RVB, et la fonction rgb() nous permet de convertir ces codes hexadécimaux en RVB et de les utiliser dans des feuilles de style.

Exemple

html{
   color: rgb(255, 255, 255);
}

Nous pouvons utiliser une autre fonction rgba, qui peut être utilisée pour contrôler l'opacité de la couleur définie.

Fonction hsl()

Une autre fonction qui peut être utilisée pour représenter les couleurs est la fonction hsl. Il définit la couleur comme des valeurs de teinte, saturation et luminosité. Certains développeurs préfèrent l'utiliser à la place du RVB.

Exemple

html{
   color: hsl(100, 50%, 80%);
}

Tout comme RVB, HSL a également une version modifiée hsla qui contrôle également l'opacité de la couleur définie.

Fonction flou()

Pour différencier les éléments, nous utilisons une fonction de flou.

Exemple

.someClass{
   filter: blur(67%);
}

Fonction Opacité()

L'opacité d'un élément est la visibilité de l'élément correspondant. Il spécifie la part de l'arrière-plan qui est visible à travers cet arrière-plan.

Exemple

.someClass{
   filter: opacity(0.75);
}

La fonction nth-child()

nth-child() function

Lorsque nous devons sélectionner un élément enfant spécifique d'un élément parent, nous pouvons utiliser la fonction nth-child. Il s'agit d'une fonction de sélection de pseudo-classe avec quelques modifications en fonction de vos besoins pour cibler différents éléments.

Exemple

.someClass:nth-child(3){
   Color: black;
}

Certaines de ses variantes sont ntième-dernier-enfant, nième-de-type, nième-dernier-de-type, etc.

fonction scale()

Cette fonction vous permet de contrôler la taille d'un élément et de ses enfants. On peut également définir l'axe sur lequel on souhaite que ce changement se produise.

Exemple

.someClass{
   transform: scale(100%);
}

fonction traduire()

Cette fonction vous permet de changer la position d'un élément. Nous pouvons même spécifier l'axe vers lequel l'élément doit changer.

Exemple

.someClass{
   transform: translate(30%);
}

Conclusion

Dans cet article, nous avons discuté des fonctions, de leur objectif en CSS, en quoi elles diffèrent des fonctions et autres langages de programmation. Nous avons également découvert les différents types de fonctions disponibles en CSS. Enfin, nous avons examiné les 10 fonctions CSS les plus couramment utilisées que tout développeur front-end doit connaître. Ce ne sont là que quelques-unes des fonctionnalités les plus populaires, mais il y a toujours plus à apprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!