À quoi sert calc() en CSS ?
La fonction calc() permet de faire des calculs directement en CSS, en mélangeant des unités que le préprocesseur ne pourrait pas combiner : 100 % de la largeur moins une barre latérale de 280 px, la hauteur de l’écran moins un en-tête de 4 rem, une marge de 2 rem plus 1 vw. Le navigateur calcule la valeur au moment de l’affichage.
Ce générateur vous fait construire l’expression terme par terme : une valeur et une unité (px, rem, em, %, vw, vh, vmin, vmax, ch), puis un opérateur (+, −, *, /). Il vérifie les règles de syntaxe qui piègent souvent : des espaces autour de + et −, et un nombre sans unité d’un côté d’une multiplication ou d’une division.
Pour savoir ce que donne l’expression, vous définissez un contexte : largeur du parent, taille de l’écran, taille de police racine et de l’élément. Vous choisissez aussi la propriété CSS ciblée (width, height, margin, padding, font-size, top…), car un pourcentage ne se rapporte pas à la même chose selon la propriété. L’outil affiche alors le résultat en pixels.
Des presets couvrent les cas fréquents : pleine largeur moins une sidebar, colonne centrée, pleine hauteur moins un en-tête, padding fluide. Le générateur fonctionne dans votre navigateur et il est gratuit sans limite : pas d’essai à épuiser ni d’abonnement nécessaire.
Comment construire une expression calc() ?
- Partez d’un preset ou ajoutez votre premier terme (valeur + unité).
- Ajoutez des opérateurs et d’autres termes.
- Choisissez la propriété CSS et définissez le contexte (largeur du parent, viewport, tailles de police).
- Vérifiez la validation et le résultat calculé en px.
- Copiez la déclaration CSS.
Quand utiliser calc() ?
- Zone de contenu occupant toute la largeur moins une barre latérale fixe.
- Section en pleine hauteur sous un en-tête de hauteur fixe.
- Colonne centrée avec une largeur maximale et des marges minimales.
- Padding qui combine une base fixe et une part proportionnelle à l’écran.
- Positionnement absolu centré (top: calc(50% - 20px)).
- Grilles dont la largeur des colonnes tient compte des gouttières.
Les règles de calc() à connaître
- Espaces obligatoires autour de + et − : calc(100% - 20px) fonctionne, calc(100%-20px) est invalide.
- Multiplication : au moins un des deux côtés doit être un nombre sans unité (calc(2 * 1rem)).
- Division : le diviseur doit être un nombre sans unité et non nul (calc(100% / 3)).
- Un % dépend de la propriété : largeur du parent pour width et padding, hauteur du parent pour height, taille de police du parent pour font-size.
- calc() peut s’imbriquer dans clamp(), min() et max(), et accepte les variables CSS : calc(var(--gap) * 2).
Foire Aux Questions
Le générateur est-il gratuit ?
Oui, entièrement. Les générateurs CSS de ToolStudio sont gratuits et sans limite : vous ajustez les réglages, regardez l’aperçu en direct et copiez le CSS autant de fois que vous voulez, sans compte ni abonnement.
Pourquoi mon calc() ne fonctionne-t-il pas ?
La cause la plus fréquente est l’absence d’espaces autour de + ou −. L’autre est une multiplication ou une division entre deux valeurs avec unité, que CSS n’autorise pas.
Comment le résultat en px est-il calculé ?
À partir du contexte que vous indiquez : largeur du parent, taille de l’écran, tailles de police racine et de l’élément, et de la propriété choisie.
Peut-on mélanger rem, % et vw ?
Oui, c’est tout l’intérêt de calc() : le navigateur convertit chaque terme en pixels au moment du rendu.
calc() ou clamp() ?
calc() combine des valeurs ; clamp() borne une valeur entre un minimum et un maximum. Pour une taille fluide bornée, utilisez clamp(), qui contient souvent une expression de type calc.