calc() pour les calculs dynamiques
Mélangez les unités et effectuez des opérations arithmétiques en CSS avec la fonction calc() pour obtenir des valeurs dynamiques.
calc() pour les calculs dynamiques est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que calc() ?
calc() permet d’effectuer des opérations arithmétiques directement dans les valeurs des propriétés CSS. Vous pouvez mélanger différentes unités (px, %, rem, vw) dans un même calcul.
Syntaxe de base de calc()
La fonction prend en charge l’addition (+), la soustraction (-), la multiplication (*) et la division (/). Les espaces autour des opérateurs + et - sont obligatoires.
<div class="sidebar">Sidebar (100% - 240px)</div>Mélange d’unités
L’atout majeur de calc() est de combiner des unités incompatibles qu’il serait autrement impossible de mélanger :
<div class="hero">Hero</div>
<div class="column">Column</div>calc() avec des variables CSS
Combinez calc() et les propriétés personnalisées CSS pour créer des jetons de conception dynamiques :
<div class="main">Main content</div>Imbrication de calc()
calc() peut être imbriqué, même si cela est rarement nécessaire, car chaque contexte évalue déjà les opérations mathématiques :
<div class="element">Element</div>Typographie fluide avec calc()
Utilisez calc() pour créer une interpolation linéaire entre deux tailles :
<h1>Fluid Heading</h1>Division dans calc()
La division exige que le diviseur soit un nombre sans unité :
<div class="thirds">Third width</div>calc() avec la grille et Flexbox
Utile dans les définitions de pistes et pour la propriété flex-basis :
<div class="grid"><div>A</div><div>B</div></div>calc() et autres fonctions
Quelle fonction utiliser :
calc(): effectuer des calculs arithmétiques arbitraires, notamment pour mélanger les unitésmin()/max(): choisir la plus petite ou la plus grande valeur parmi plusieurs possibilitésclamp(): limiter une valeur fluide entre un minimum et un maximum
Prise en charge par les navigateurs
calc() est pris en charge par tous les navigateurs modernes ainsi que par IE11. Il s’agit de l’une des fonctions CSS les plus largement prises en charge. Vous pouvez l’utiliser sans solution de repli dans tout projet moderne.
Modèles courants avec calc()
Voici des modèles pratiques que vous utiliserez régulièrement :
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>Vérification rapide
Quelle expression calc() produit le résultat correct pour « 30 % du parent moins 20 px » ?
Récapitulatif
calc() permet d’effectuer des calculs CSS avec des unités mélangées. Il est utile pour les mises en page dynamiques, comme « fenêtre d’affichage complète moins en-tête fixe », et pour l’interpolation d’une typographie fluide. Les espaces autour des opérateurs + et - sont obligatoires. Combinez-le avec des variables CSS pour effectuer des calculs puissants sur les jetons de conception. Utilisez-le avec min/max/clamp pour contrôler complètement le dimensionnement fluide.
Questions Fréquemment Posées
La leçon « calc() pour les calculs dynamiques » est-elle gratuite ?
Oui — le texte complet de « calc() pour les calculs dynamiques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « calc() pour les calculs dynamiques » ?
Mélangez les unités et effectuez des opérations arithmétiques en CSS avec la fonction calc() pour obtenir des valeurs dynamiques. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « calc() pour les calculs dynamiques » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- calc() pour les calculs dynamiques
- min(), max() et clamp() pour des valeurs fluides
- repeat() et minmax() dans Grid
- color-mix() et syntaxe des couleurs relatives