5.1 Fonction calc()
Les fonctions CSS fournissent des outils efficaces pour effectuer diverses opérations directement dans les fichiers de style.
Les fonctions calc(), min(), max() et clamp() sont particulièrement utiles pour créer des designs adaptatifs et flexibles, car elles permettent
d'effectuer des opérations mathématiques et de calculer des valeurs conditionnelles.
La fonction calc() est utilisée pour effectuer des opérations mathématiques en CSS. Elle permet de combiner différentes
unités de mesure telles que pixels (px), pourcentages (%), em, rem et d'autres dans une seule expression.
Syntaxe :
sélecteur {
propriété: calc(expression);
}
Exemple d'utilisation
Dans cet exemple, la largeur du bloc est calculée comme 50% de la largeur de l'élément parent moins 20 pixels :
/* Largeur du bloc - moitié de l'élément parent moins 20px */
.block {
width: calc(50% - 20px);
}
5.2 Fonctions min(), max() et clamp()
Les fonctions min(), max() et clamp() en CSS
Fonction min()
La fonction min() prend plusieurs valeurs et renvoie la plus petite. Utile pour créer
des tailles flexibles qui changent en fonction du contexte.
Syntaxe :
sélecteur {
propriété: min(valeur1, valeur2);
}
Exemple
Dans cet exemple, la largeur du conteneur sera de 50% ou 300 pixels, selon ce qui est le plus petit :
.container {
width: min(50%, 300px);
}
Fonction max()
La fonction max() prend plusieurs valeurs et renvoie la plus grande. Utile pour définir
des tailles minimales et assurer l'adaptabilité.
Fonction clamp()
La fonction clamp() prend trois valeurs : minimale, préférée et maximale. Elle limite
la valeur entre le minimum et le maximum, en tendant vers la valeur préférée.
5.3 Avantages d'utilisation des fonctions CSS
Avantages d'utilisation des fonctions CSS :
- Flexibilité. Les fonctions CSS permettent de créer des styles plus flexibles et adaptatifs, car elles permettent de calculer dynamiquement les valeurs.
- Simplification du design adaptatif. Les fonctions
min(),max()etclamp()simplifient considérablement la création de designs adaptatifs en permettant de limiter les valeurs à des bornes définies. - Réduction des besoins en requêtes média. L'utilisation de ces fonctions peut réduire le nombre de requêtes média nécessaires pour adapter les styles à différentes tailles d'écran.
5.4 Exemple de mise en œuvre complète
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'utilisation des fonctions CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Bloc avec largeur calc(50% - 20px)</div>
<div class="block">Bloc avec largeur min(300px, 100%)</div>
<div class="block">Bloc avec largeur max(200px, 50%)</div>
<p class="text">Texte avec taille de police clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION