Qu'est-ce que Calc () dans CSS (et comment l'utiliser)

Certaines fonctions CSS sont puissantes mais rarement utilisées, non pas parce qu'elles sont difficiles, mais parce que des alternatives plus faciles sont disponibles. Calc () est l'un d'eux. C'est super utile mais souvent éclipsé par CLAMP ().

Calc () résout certains problèmes de mise en page que CLAMP () ne peut pas toucher. Il est idéal pour les hauteurs de section affinées, l'ajustement des en-têtes collants et le mélange des unités flexibles et fixes en une seule ligne de code. Et voici la bonne nouvelle: vous pouvez utiliser Calc () sans écrire une seule ligne de code.

Dans Divi 5, il est construit directement dans l'interface, alors tapez simplement votre valeur et Divi gère le reste. Vous voulez voir comment? Dans cet article, vous apprendrez comment fonctionne Calc (), où il aide et comment l'utiliser à l'intérieur de Divi 5.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web , mais attendez un peu avant de migrer les existants.

Qu'est-ce que Calc () dans CSS?

Calc () est une fonction CSS native qui vous permet d'effectuer des mathématiques simples comme l'ajout, la soustraction, la multiplication et la division (avec certaines limitations en fonction du contexte) directement dans vos règles de style. Il est idéal pour peaufiner les tailles et l'espacement, surtout lors du mélange de valeurs fixes et flexibles pour obtenir des dispositions plus lisses sans tout.

Comprenons cela avec un exemple. Supposons que vous vouliez qu'un élément prenne 80% de l'écran mais laisse toujours de la place pour le rembourrage. Vous pouvez écrire:

width: calc(80% - 40px);

Cela indique au navigateur de calculer la largeur dynamiquement en soustrayant 40 pixels de 80% de son conteneur. Lorsqu'il est combiné avec des techniques de centrage comme les marges automatiques, l'espace restant de la soustraction est réparti uniformément. La valeur s'ajuste automatiquement en fonction de la taille de l'écran.

À première vue, cela pourrait ne pas sembler révolutionnaire. Mais Calc () est idéal pour résoudre les problèmes de disposition quotidiens, comme l'espacement cassé sur de petits écrans, les éléments chevauchant des en-têtes fixes et des sections hors centre. Au lieu de longues requêtes multimédias, calc () en une seule ligne suffit souvent. Voici quelques cas d'utilisation en ligne courants:

• rembourrage: calc (5vw + 20px); Garde le rembourrage du rembourrage. Même sur les petits écrans, il ne tombe jamais en dessous de 20 pixels.
• hauteur: calc (100vh - 80px); Gardez le contenu visible lorsque vous avez un en-tête fixe. Il s'ajuste automatiquement en fonction de la hauteur de l'écran.
• Largeur: calc (60% - 1REM); Vous donne un contrôle flexible sur la largeur de la section tout en maintenant un espacement cohérent. Vous pouvez ajuster les marges environnantes en utilisant des valeurs comme la marge-gauche: CALC (40% + 0,5REM); pour centrer visuellement ou aligner l'élément dans son conteneur.

En bref, Calc () supprime la nécessité d'écrire des CS supplémentaires pour chaque point d'arrêt. Au lieu de réécrire des styles à plusieurs reprises, vous pouvez créer une logique directement dans vos valeurs et laisser la mise en page répondre automatiquement. Vous définissez non seulement les tailles, mais vous décidez également comment les éléments doivent se comporter.

Comprendre comment fonctionne calc ()

La syntaxe de base de calc () ressemble à ceci:

 calc(value operator value) 

Ici, vous pouvez utiliser n'importe quelle longueur ou unité valide en valeur, et l'opérateur peut être +, -,, *, ou / /.

Par exemple, si vous souhaitez réduire la largeur d'un élément de 40 pixels, vous écrivez la largeur: calc (100% - 40px);. Remarquez l'utilisation de%? C'est ce qui rend la largeur flexible.

Si nous utilisons CALC (100px - 40px), le résultat serait toujours de 60 pixels, c'est-à-dire statique. Mais en utilisant un pourcentage, nous avons laissé le navigateur calculer la taille en fonction de l'écran ou de l'élément parent. Il s'ajuste automatiquement à mesure que la disposition change.

Astuce rapide (et aussi une règle commune): Ajoutez toujours des espaces entre les valeurs et les opérateurs pour que CALC () fonctionne correctement. Sans espaces, le CSS ne fonctionnera pas. Ci-dessous, vous verrez la largeur du conteneur être restauré par défaut car la fonction calc () sans espaces n'est plus valide:

En utilisant plusieurs unités

Vous venez de voir comment le véritable avantage de Calc () vient lorsque vous commencez à combiner différentes unités relatives. Par exemple, les pourcentages avec des pixels ou des largeurs de fenêtre avec REM, car c'est à ce moment que votre disposition commence à répondre en fonction des changements de taille de l'écran.

Pour rendre cela plus clair, voici quelques combos utiles pour essayer de voir comment ils fonctionnent dans de véritables dispositions.

Vous pouvez également combiner plusieurs valeurs et unités en une seule ligne, ce qui rend les dispositions réactives de dimensionnement plus précises. Cet exemple ci-dessous utilise%, PX et REM pour mélanger la mise à l'échelle de la disposition, l'espacement fixe et la typographie:

 width: calc(50% - 40px + 1rem); 

• 50% échelles avec le conteneur
• 40px soustrait l'espace fixe comme une barre latérale
• 1rem ajoute l'espacement en fonction de la taille de la police

Fonctions Calc () de nidification

Vous pouvez également nicher un calc () à l'intérieur d'un autre pour créer une logique de mise en page plus complexe. C'est un excellent moyen de refléter la façon dont vous pensez au design (couche par couche) avec des relations claires entre les valeurs. Par exemple, largeur: calc (200px - calc (100px + 2rem));

Ici, le navigateur calcule d'abord 100px + 2rem , qui pourrait représenter le rembourrage, les marges ou la taille d'un autre élément. Il soustrait ensuite ce total de 200px pour obtenir la largeur finale. La largeur reste relative à cause de Rem.

Ce type de nidification est utile lorsque votre disposition dépend de plus d'un facteur. Au lieu de faire le calcul vous-même ou de codages en dur, vous pouvez écrire la relation directement dans le CSS. Il maintient votre conception flexible et plus facile à mettre à jour plus tard.

Vous n'aurez pas besoin souvent de calcl (), mais cela peut aider lorsque vous traitez des éléments d'espacement en couches ou de chevauchement. Cela dit, vous voudrez peut-être commencer par des calculs simples en premier, car ils peuvent devenir écrasants. L'ajout de complexité sera naturel une fois à l'aise avec son fonctionnement.

Pourquoi utiliser calc () lorsque vous avez clamp ()?

Si vous utilisez CLAMP () plus souvent, vous pourriez avoir cette question. Pour obtenir une réponse claire, ce serait une bonne idée de comprendre la différence entre les deux:

CLAMP () est moderne, donc être enthousiasmé par l'utiliser pour construire des conceptions de liquide sans compter sur les requêtes multimédias est facile. Mais même si CLAMP () se sent plus intelligent, il existe de nombreuses situations où Calc () est plus pertinent, comme les suivants:

• La soustraction des valeurs fixes des dispositions flexibles: Utilisation de la hauteur: calc (100VH - 80px) assurez-vous qu'une section remplit l'écran moins la hauteur d'un en-tête fixe, de sorte que les éléments ne se chevauchent pas. Clamp () ne peut pas le faire car il ne prend pas en charge la soustraction.
• Éléments de décalage avec précision: une valeur comme la marge-gauche: calc (50% - 200px); déplace un élément par rapport à son conteneur tout en le gardant visuellement équilibré. Clamp () ne peut pas effectuer ce type de positionnement relationnel.
• Alignez les sections côte à côte: vous aide à créer des dispositions réactives à deux colonnes où une colonne avec la largeur: calc (60% - 2Rem); Prend 60% de l'espace moins un écart constant. CLAMP () est idéal pour l'échelle d'une seule valeur, tandis que calc () excelle lorsque des relations entre plusieurs valeurs sont nécessaires.

Dans l'ensemble, CLAMP () est excellent lors de la définition de la façon dont une seule valeur doit évoluer à travers les tailles d'écran. Mais calc () est ce dont vous avez besoin lorsque votre disposition dépend de plus d'une chose à la fois, comme dans les cas ci-dessus.

Combinaison calc () + clamp ()

Alors que calc () et clamp () sont puissants seuls, pourquoi en utiliser un alors que vous pouvez combiner les deux? Vous pouvez nist Calc () à l'intérieur de clamp () pour construire des conceptions de liquide avec une logique intégrée, comme combiner une mise à l'échelle flexible avec un contrôle précis.

Par exemple, rembourrage: clamp (1Rem, calc (2vw + 10px), 3Rem); Crée un espacement qui évolue entre 1REM et 3REM, mais la valeur «préférée» est basée sur une formule calc () qui mélange la largeur de la fenêtre et une valeur fixe.

Cela vous donne un contrôle réactif, logique et précis sur votre conception. Une fois que vous avez appris quand utiliser calc () et clamp () individuellement et quand les combiner, vous pouvez contrôler pleinement votre disposition sans compter sur des points d'arrêt personnalisés

En utilisant les variables CSS avec calc ()

Vous pouvez également étendre la flexibilité de Calc () avec les variables CSS. Combinez des variables avec d'autres unités, faites des mathématiques sur eux et créez une logique de mise en page autour des valeurs réutilisables. Par exemple, si vous définissez: root {–gap: 40px;}, alors en utilisant le rembourrage: calc (var (–gap) + 1Rem); vous aide à définir un rembourrage réactif en fonction de vos valeurs racines.

Remarque: En utilisant les variables CSS à l'intérieur de CALC (), enveloppez votre variable autour de var (). Voyez comment j'ai fait ci-dessus.

Cela vous permet de créer un site Web complet à l'aide d'un système de conception cohérent (vos variables CSS) tout en ayant un contrôle précis avec calc (). Et si vous souhaitez apporter des modifications (globales), telles que l'ajustement de l'espacement à travers votre disposition, vous pouvez le faire en modifiant les valeurs des racines.

Ce n'est pas aussi simple avec CLAMP (). Alors que Clamp () prend en charge les variables CSS, chaque valeur doit se résoudre à une unité complète et valide. Qu'est-ce que je veux dire par là?

Une fonction comme CLAMP (1REM, VAR (–Li-Size), 3REM) ne fonctionne que si –Sidid-Size se résout en quelque chose comme 4VW. Et si vous devez faire des mathématiques avec une variable, comme en ajouter ou en soustrayant, vous devez envelopper cette partie dans calc (). Ces choses mineures rendent le calc () essentiel lors de la construction de valeurs dynamiques avec des variables.

Calc () dans divi 5

Calc () et clamp () sont des fonctions CSS avancées qui vous donnent un contrôle puissant sur les dispositions, l'espacement et la réactivité, mais seulement si vous êtes à l'aise d'écrire du code. Cela limite leur utilisation aux développeurs ou aux professionnels du Web. Mais qu'en est-il de ceux qui préfèrent les flux de travail visuels et veulent toujours utiliser calc () et clamp () dans leurs conceptions? Pouvez-vous faire cela?

Oui, vous pouvez. À l'intérieur de Divi 5, Calc () et CLAMP () sont disponibles sous forme d'unités avancées, et vous n'avez pas à écrire une seule ligne de code pour travailler avec eux.

Abonnez-vous à notre chaîne YouTube

Tout ce que vous faites est de saisir Calc () directement dans n'importe quel champ de saisie numérique, et c'est tout.

Le Divi Builder agit instantanément. Une fois que vous avez saisi votre valeur calc (), vous obtenez des commentaires en direct lors de la conception. Il n'est pas nécessaire de basculer entre le constructeur, les devtools ou les aperçus, et sans deviner à quoi il ressemblera.

Divi 5 rend la construction plus intelligente et les conceptions plus flexibles faciles sans toucher de code. Vous pouvez même combiner calc () avec les variables de conception de Divi ou vos propres variables CSS pour créer des dispositions dynamiques réutilisables. Je vais vous montrer comment faire cela dans la section suivante.

Soit dit en passant, saviez-vous que Divi 5 prend également en charge toutes les fonctions CSS dans les unités avancées? Vous voudrez peut-être aussi les apprendre à leur sujet

Apprenez tout sur les unités avancées de Divi 5

Comment divi 5 rend l'utilisation de calc () sans effort

Vous venez de voir que Divi 5 rend l'utilisation de calc () dans vos conceptions sans effort tout en vous offrant des aperçus instantanés pendant que vous travaillez. Mais il y a plus. Divi donne non seulement une solution de contournement mais un moyen sans intégration et sans code de créer des dispositions réactives basées sur la logique utilisant les mêmes outils que les développeurs s'appuient, sans écrire une ligne de code.

Voici comment cela vous aide à utiliser le calc () héroïquement tout en travaillant tranquillement dans l'ombre:

1. Appliquer Calc () à tout champ numérique

Ce n'est pas parce que vous ne composez pas que vous êtes limité. Dans Divi 5, Calc () fonctionne partout où une valeur numérique est acceptée (pensez: largeur, hauteur, rembourrage, marge, écart, taille de police, n'importe où). Si le champ accepte un nombre, il prend en charge CALC ().

Et l'application de calc () est relativement simple. Tout ce que vous avez à faire est de choisir Calc () dans les autres unités avancées et saisir votre formule.

Cela signifie que vous pouvez gérer visuellement les mathématiques de mise en page sans quitter le constructeur. Que la soustraction de la hauteur d'un en-tête fixe, de l'ajout d'espacement flexible aux tailles de police ou de mélange des unités pour une meilleure réactivité, Divi vous permet de tout faire directement à l'intérieur des champs de conception.

Tapez simplement votre formule, et le résultat met à jour instantanément - pas de panneaux de code, pas de commutation d'onglet et pas de deuxième devise. C'est un contrôle complet, construit directement dans votre flux de travail.

2. Obtenez des aperçus en direct instantanés

L'une des meilleures parties de l'utilisation de calc () dans Divi 5 est que vous pouvez voir ce que vous faites en temps réel. Vous n'avez pas à deviner à quoi ressemblera l'espacement ou l'alignement. Lorsque vous entrez votre formule Calc (), le constructeur se met à jour instantanément.

Comme vous pouvez le voir, le rembourrage a changé immédiatement lorsque j'ai entré les valeurs calc (). J'ai également basculé entre différents points d'arrêt pour vous montrer comment le rembourrage s'ajuste en fonction de la taille de l'écran.

Quelles que soient les modifications que vous apportez, vous verrez le résultat en tapant. Cette rétroaction immédiate vous aide à comprendre comment le calcul affecte votre disposition et vous permet de modifier rapidement les valeurs sans changer d'onglet.

3. Construire des flux de travail avancés avec calc ()

L'utilisation de calc () dans Divi 5 n'est pas puissante car vous pouvez maintenant ajouter ou soustraire des valeurs. La véritable force consiste à débloquer des workflows plus intelligents. Divi vous permet de combiner calc () avec des outils avancés comme CLAMP (), les variables CSS, les variables de conception et les préréglages de groupe d'options, le tout à l'intérieur d'un constructeur visuel.

Vous n'êtes pas limité à de simples ajustements ponctuels. À l'aide de Divi, vous pouvez créer des systèmes de mise en page qui répondent de manière fluide à la taille de l'écran, de suivre les règles d'espacement cohérentes et de mettre à jour automatiquement lorsque les jetons de conception changent. Voyons comment:

1. Étendre Calc () avec les variables CSS

Divi 5 prend en charge les variables CSS directement à l'intérieur des champs de conception, ce qui signifie que vous pouvez définir des valeurs réutilisables et en calculer visuellement. Disons que je veux utiliser un rembourrage fixe sur toutes mes sections de page, donc je vais l'enregistrer en tant que variable CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Pour ce faire, je vais aller aux paramètres de page> Advanced> CSS personnalisé et ajouter mes valeurs de racines ici:

Maintenant, au lieu de saisir la formule complète partout, vous pouvez simplement utiliser var (–section-padding) dans n'importe quel champ de rembourrage à l'intérieur de Divi. Les mises à jour des résultats en direct, et si je change la valeur racine plus tard, la mise en page entière reflète instantanément ce changement.

Remarquez que l'unité avancée mise à jour montre le CALC VAR, ce qui signifie que la variable CSS a été insérée à l'aide de la fonction var () à l'intérieur d'une formule calc ().

L'utilisation de variables CSS dans Divi est étonnamment simple. Vous pouvez simplement les définir sur la page elle-même sans toucher votre feuille de style. Cela permet de maintenir un cadre de conception cohérent, de tester de nouvelles valeurs et de créer des règles de mise en page réactives.

2. Utilisez calc () dans votre cadre de conception

Divi 5 vous permet d'enregistrer les valeurs calc () en tant que variables de conception, ce qui facilite la réutilisation d'une logique de mise en page sur l'ensemble de votre site Web. Disons que vous souhaitez que vos sections de service remplissent toujours l'écran moins la hauteur d'un en-tête fixe. Ensuite, vous pouvez créer une variable numérique et nommer la hauteur de la section avec VALLE CALC (120VH - 30PX).

Ici, 30px est la hauteur de l'en-tête fixe.

Maintenant, pour appliquer la variable enregistrée, accédez aux paramètres de conception de la section et survolez la hauteur pour localiser l'icône de champ dynamique. Cliquez dessus et votre variable enregistrée apparaîtra. Cliquez sur la hauteur de la section pour l'appliquer.

Cette approche vous donne un contrôle de disposition complet tout en gardant votre conception cohérente. Vous n'êtes pas enfermé dans les préréglages ou les valeurs statiques. Au lieu de cela, vous construisez une logique qui s'adapte sur les pages, les modèles et les tailles d'écran visuellement.

Les variables de conception débloquent de grandes possibilités. Par exemple, vous pouvez créer visuellement votre cadre de conception et l'utiliser sur toutes les pages de votre site Web pour maintenir les règles de conception cohérentes tout au long. Nous vous recommandons également de construire votre typographie et de l'espacement et les systèmes de dimensionnement avant de concevoir une page.

3. Créer et enregistrer les préréglages du groupe d'options

Une fois que votre mise en page utilise les valeurs calc () de manière cohérente, Divi 5 facilite la sauvegarde de cette logique pour réutiliser. Vous pouvez stocker l'intégralité de votre configuration de style (ou paramètres individuels tels que le rembourrage, les lacunes, les marges et les largeurs) en tant que préréglages de groupe d'options. Cela signifie qu'au lieu d'appliquer des formules calc () à plusieurs reprises, vous sélectionnez simplement un préréglage et les mathématiques de mise en page sont appliquées instantanément.

Par exemple, si vous avez utilisé le rembourrage: calc (4REM + 2VW) sur plusieurs sections, vous n'avez pas besoin de le retaper partout. Enregistrez-le simplement en préréglage:

Maintenant, appliquez votre préréglage enregistré partout où cela est nécessaire. Tout se met à jour visuellement, vous pouvez donc voir l'effet en direct immédiatement.

Encore mieux, si vous avez utilisé des variables de conception dans ces préréglages, vous pouvez mettre à jour les valeurs à l'échelle mondiale plus tard. Modifiez la variable une fois, et chaque préréglage à l'aide reflétera la mise à jour. Cela rend les modifications à grande échelle rapidement et cohérentes.

Remarquez comment en modifiant les valeurs enregistrées dans les variables de conception, elles sont également mises à jour dans la section de rembourrage tout en nous donnant un aperçu en direct? En effet, j'ai utilisé la variable de hauteur de section à l'intérieur du préréglage de la section d'espacement .

C'est le pouvoir Divi 5 apporte. Il vous aide à évoluer votre système de conception tout en gardant une logique de mise en page avancée cohérente sur le site. Une fois que vous vous êtes habitué à combiner des unités avancées comme calc () (voir ici plus de cas de calc () avec des conseils pour les maîtriser efficacement) avec le système de conception modulaire de Divi, vous débloquerez une façon efficace et amusante de créer des sites Web.

Divi rend les mathématiques faciles

Vous n'avez pas besoin d'être un développeur pour utiliser des fonctions CSS comme calc () et clamp (). Divi 5 apporte ces outils avancés dans une interface visuelle facile à explorer, à tester et à appliquer. Vous pouvez tout faire, des ajustements de mise en page simples aux systèmes de conception complexes sans écrire une ligne de code.

Que vous ajustez l'espacement, que vous utilisez des variables ou que vous construisiez des préréglages réutilisables, Divi rend les mathématiques réactives accessibles à tout le monde. Vous voulez tester à quel point Calc () fonctionne en douceur à l'intérieur de Divi? Téléchargez le Divi Public Alpha aujourd'hui et expérimentez-le par vous-même.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais attendez un peu avant de migrer les existants.