Was ist Calc () in CSS (und wie man es benutzt)

Einige CSS -Funktionen sind leistungsstark, aber selten verwendet, nicht weil sie schwierig sind, sondern weil einfachere Alternativen verfügbar sind. Calc () ist einer von ihnen. Es ist super nützlich, aber oft von Clamp () überschattet.

Calc () löst einige Layoutprobleme, die Clamp () nicht berühren kann. Es eignet sich hervorragend für feine Abschnittehöhen, die Anpassung an klebrige Header und das Mischen flexibler und fester Einheiten in einer Codezeile. Und hier sind die guten Nachrichten: Sie können Calc () verwenden, ohne eine einzige Codezeile zu schreiben.

In Divi 5 ist es direkt in die Schnittstelle eingebaut. Geben Sie also einfach Ihren Wert ein und Divi behandelt den Rest. Willst du sehen, wie? In diesem Beitrag erfahren Sie, wie Calc () funktioniert, wo es hilft und wie es in Divi 5 verwendet wird.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden , warten Sie jedoch ein wenig, bevor Sie vorhandene migrieren.

Was ist Calc () in CSS?

Calc () ist eine native CSS -Funktion, mit der Sie einfache Mathematik wie Hinzufügen, Subtrahieren, Multiplizieren und Teilen (mit einigen Einschränkungen abhängig vom Kontext) direkt innerhalb Ihrer Stilregeln durchführen können. Es eignet sich hervorragend für die Optimierung von Größen und Abstand, insbesondere beim Mischen fester und flexibler Werte, um glattere Layouts zu erhalten, ohne alles festzuhalten.

Lassen Sie uns dies mit einem Beispiel verstehen. Angenommen, Sie möchten, dass ein Element 80% des Bildschirms einnimmt, aber dennoch Platz für das Polsterung lassen. Sie können schreiben:

width: calc(80% - 40px);

Dies fordert den Browser an, die Breite dynamisch zu berechnen, indem 40 Pixel von 80 Prozent seines Behälters subtrahiert werden. In Kombination mit Zentrierungstechniken wie Automargen wird der verbleibende Raum aus der Subtraktion gleichmäßig verteilt. Der Wert passt sich automatisch anhand der Bildschirmgröße an.

Auf den ersten Blick scheint es nicht bahnbrechend zu sein. Calc () ist jedoch ideal, um alltägliche Layoutprobleme wie zerbrochenen Abstand auf kleinen Bildschirmen, Elemente über überlappende feste Header und Abschnitte außerhalb der Mitte zu lösen. Anstelle langer Medienabfragen reicht Calc () in einer Zeile oft aus. Hier sind einige häufige Einstiegswendungsfälle:

• Polsterung: Calc (5vw + 20px); bleibt die Polsterflüssigkeit. Selbst auf kleinen Bildschirmen fällt es nie unter 20 Pixel.
• Höhe: Calc (100VH - 80px); Hält Inhalte sichtbar, wenn Sie einen festen Kopfball haben. Es passt automatisch anhand der Bildschirmhöhe an.
• Breite: Calc (60% - 1REM); gibt Ihnen eine flexible Kontrolle über die Abschnittsbreite und hält gleichzeitig einen konsistenten Abstand. Sie können die umgebenden Ränder anhand von Werten wie Rand-Links einstellen: Calc (40% + 0,5REM). das Element in seinem Behälter visuell zentrieren oder ausrichten.

Kurz gesagt, Calc () beseitigt die Notwendigkeit, zusätzliche CSS für jeden Haltepunkt zu schreiben. Anstatt wiederholt Stile neu zu schreiben, können Sie Logik direkt in Ihre Werte aufbauen und das Layout automatisch reagieren lassen. Sie definieren nicht nur Größen, sondern entscheiden auch, wie sich Elemente verhalten sollten.

Verstehen, wie calc () funktioniert

Die grundlegende Syntax von Calc () sieht Folgendes aus:

 calc(value operator value) 

Hier können Sie eine beliebige gültige Länge oder eine gültige Einheit im Wert verwenden, und der Bediener kann +, -, *oder /sein.

Wenn Sie beispielsweise die Breite eines Elements um 40 Pixel reduzieren möchten, würden Sie Breite schreiben: Calc (100% - 40px);. Beachten Sie die Verwendung von %? Das macht die Breite flexibel.

Wenn wir Calc (100px - 40px) verwenden, wäre das Ergebnis immer 60 Pixel, dh statisch. Durch die Verwendung eines Prozentsatzes lassen wir den Browser die Größe basierend auf dem Bildschirm oder über das übergeordnete Element berechnen. Es wird automatisch angepasst, wenn sich das Layout ändert.

Schnelletipp (und auch eine gemeinsame Regel): Fügen Sie immer Räume zwischen Werten und Operatoren hinzu, um Calc () ordnungsgemäß zu funktionieren. Ohne Leerzeichen funktioniert das CSS nicht. Im Folgenden wird die Containerbreite festgestellt, dass die Funktion ohne Leerzeichen nicht mehr gültig ist:

Verwenden mehrerer Einheiten

Sie haben gerade gesehen, wie der wahre Nutzen von Calc () kommt, wenn Sie verschiedene relative Einheiten kombinieren. In Prozent mit Pixeln oder Ansichtsfensterbreiten mit REMS werden beispielsweise an diesem Layout anhand der Bildschirmgröße geändert.

Um das klarer zu machen, finden Sie hier ein paar nützliche Combos, um zu versuchen, zu sehen, wie sie in realen Layouts funktionieren.

Sie können auch mehrere Werte und Einheiten in einer Zeile kombinieren, wodurch die Reaktionslayouts der Größe genauer werden. In diesem folgenden Beispiel werden %, PX und REM verwendet, um Layoutskalierung, fester Abstand und Typografie zu mischen:

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

• 50% Skalen mit dem Behälter
• 40px subtrahiert den festen Raum wie eine Seitenleiste
• 1REM fügt den Abstand auf der Grundlage der Schriftgröße hinzu

Nisting Calc () Funktionen

Sie können auch einen Calc () in einem anderen nisten, um komplexere Layoutlogik zu erstellen. Es ist eine großartige Möglichkeit, mit klaren Beziehungen zwischen den Werten zu spiegeln, wie Sie über Design (Ebene für Schicht) denken. Zum Beispiel Breite: Calc (200px - Calc (100px + 2Rem));

Hier berechnet der Browser zuerst 100px + 2REM , was Polsterung, Ränder oder die Größe eines anderen Elements darstellen könnte. Anschließend subtrahiert diese insgesamt 200px, um die endgültige Breite zu erhalten. Die Breite bleibt aufgrund von REM relativ.

Diese Art von Nistung ist nützlich, wenn Ihr Layout von mehr als einem Faktor abhängt. Anstatt die Mathematik selbst oder feste feste Werte zu machen, können Sie die Beziehung direkt in das CSS schreiben. Es hält Ihr Design flexibel und leichter zu aktualisieren.

Sie brauchen keine verschachtelte Calc (), aber es kann beim Umgang mit Schichtabstand oder überlappenden Elementen helfen. Das heißt, Sie möchten vielleicht zuerst mit einfachen Berechnungen beginnen, da sie überwältigend werden können. Das Hinzufügen von Komplexität wird sich natürlich anfühlen, sobald Sie sich mit der Funktionsweise wohl fühlen.

Warum Calc () verwenden, wenn Sie Clamp () haben?

Wenn Sie öfter Clamp () verwenden, haben Sie diese Frage möglicherweise. Um eine klare Antwort zu erhalten, wäre es eine gute Idee, den Unterschied zwischen den beiden zu verstehen:

Clamp () ist modern, so dass es einfach ist, es zu nutzen, um Fluiddesigns zu bauen, ohne sich auf Medienanfragen zu verlassen. Obwohl Clamp () intelligenter anfühlt, gibt es viele Situationen, in denen Calc () relevanter ist, wie die folgenden:

• Subtrahieren Sie feste Werte von flexiblen Layouts: Verwenden der Höhe: Calc (100VH - 80px) stellt sicher, dass ein Abschnitt den Bildschirm abzüglich der Höhe eines festen Headers füllt, sodass Elemente nicht überlappen. Clamp () kann dies nicht tun, da es die Subtraktion nicht unterstützt.
• Offsetelemente mit Präzision: Ein Wert wie Margen-Links: Calc (50%-200px); Verschiebt ein Element relativ zu seinem Behälter, während es visuell ausgeglichen bleibt. clamp () kann diese Art von relationaler Positionierung nicht ausführen.
• Ausrichtung von Nebenabschnitten: Hilft Ihnen, reaktionsschnelle zweispaltige Layouts zu erstellen, bei denen eine Spalte mit Breite: Calc (60%-2REM); Nimmt 60% des Raums abzüglich einer konsistenten Lücke ein. clamp () ist ideal für die Skalierung eines einzelnen Wertes, während Calc () hervorgeht, wenn Beziehungen zwischen mehreren Werten erforderlich sind.

Alles in allem ist Clamp () großartig, wenn Sie festlegen, wie ein einzelner Wert über Bildschirmgrößen skaliert werden sollte. Aber Calc () ist das, was Sie brauchen, wenn Ihr Layout von mehr als einer Sache gleichzeitig abhängt, wie in den obigen Fällen.

Kombinieren calc () + clamp ()

Warum können Sie jedoch eine verwenden, wenn Sie beides kombinieren können? Sie können calc () in clamp () nisten, um Flüssigkeitsdesigns mit integrierter Logik zu bauen, wie die Kombination flexibler Skalierung mit präziser Kontrolle.

Beispielsweise Polster: Clamp (1REM, Calc (2VW + 10px), 3REM); Erzeugt Abstand, der zwischen 1REM und 3REM skaliert wird, aber der „bevorzugte“ Wert basiert auf einer Calc () -Formel, die die Ansichtsfensterbreite und einen festen Wert mischt.

Dies gibt Ihnen reaktionsschnelle, logische und präzise Kontrolle über Ihr Design. Sobald Sie erfahren haben, wann Sie Calc () und Clamp () einzeln und wann Sie kombinieren können, können Sie Ihr Layout vollständig steuern, ohne sich auf benutzerdefinierte Breakpoints zu verlassen

Verwenden von CSS -Variablen mit Calc ()

Sie können die Flexibilität von Calc () auch mit CSS -Variablen erweitern. Kombinieren Sie Variablen mit anderen Einheiten, mathematieren Sie sie und erstellen Sie Layout -Logik um wiederverwendbare Werte. Wenn Sie beispielsweise definieren: root {–gap: 40px;}, dann unter Verwendung der Polsterung: calc (var (–gap) + 1rem); Hilft Ihnen dabei, reaktionsschnelle Polster basierend auf Ihren Root -Werten festzulegen.

HINWEIS: Während der Verwendung von CSS -Variablen in Calc () wickeln Sie Ihre Variable um var (). Sehen Sie, wie ich oben gemacht habe.

Auf diese Weise können Sie eine vollständige Website über ein konsistentes Designsystem (Ihre CSS -Variablen) erstellen und gleichzeitig eine genaue Steuerung mit Calc () haben. Und wenn Sie (globale) Änderungen vornehmen möchten, z. B. das Anpassen des Abstands in Ihrem Layout, können Sie dies tun, indem Sie die Stammwerte ändern.

Es ist nicht so einfach mit Clamp (). Während clamp () CSS -Variablen unterstützt, muss jeder Wert auf eine vollständige, gültige Einheit auflösen. Was meine ich damit?

Eine Funktion wie Clamp (1REM, var (–fluid-Größe), 3REM) funktioniert nur, wenn –Fluid-Größe auf etwa 4 VW befragt wird. Und wenn Sie mit einer Variablen mathematisiert werden müssen, z. B. das Hinzufügen oder Subtrahieren davon, müssen Sie diesen Teil in Calc () einwickeln. Diese kleinen Dinge machen Calc () beim Erstellen dynamischer Werte mit Variablen wesentlich.

Calc () in Divi 5

Sowohl Calc () als auch Clamp () sind erweiterte CSS -Funktionen, die Ihnen eine leistungsstarke Kontrolle über Layouts, Abstand und Reaktionsfähigkeit bieten, jedoch nur, wenn Sie sich bequem schreiben. Dies schränkt ihre Verwendung für Entwickler oder Webfachleute ein. Aber was ist mit denen, die visuelle Workflows bevorzugen und trotzdem Calc () und Clamp () in ihren Designs verwenden möchten? Kannst du das tun?

Ja, du kannst. In Divi 5 sind sowohl Calc () als auch Clamp () als erweiterte Einheiten verfügbar, und Sie müssen keine einzige Codezeile schreiben, um mit ihnen zu arbeiten.

Abonnieren Sie unseren YouTube -Kanal

Alles, was Sie tun, ist Calc () direkt in jedes numerische Eingangsfeld einzugeben, und das war's.

Der Divi Builder handelt sofort. Sobald Sie Ihren Wert Calc () eingeben, erhalten Sie beim Entwerfen Live -Feedback. Es ist nicht erforderlich, zwischen Bauunternehmern, Devtools oder Voransichten zu wechseln und nicht zu erraten, wie er aussehen wird.

Divi 5 macht das Gebäude intelligenter und flexiblere Designs einfach, ohne den Code zu berühren. Sie können Calc () sogar mit den Entwurfsvariablen von Divi oder Ihren eigenen CSS -Variablen kombinieren, um wiederverwendbare dynamische Layouts zu erstellen. Ich werde Ihnen zeigen, wie man das im nächsten Abschnitt macht.

Wussten Sie übrigens, dass Divi 5 auch alle CSS -Funktionen in fortgeschrittenen Einheiten unterstützt? Vielleicht möchten Sie auch etwas über sie lernen

Erfahren Sie alles über die fortgeschrittenen Einheiten von Divi 5

Wie Divi 5 die Verwendung von Calc () mühelos macht

Sie haben gerade gesehen, dass Divi 5 in Ihren Designs mühelos mit Calc () verwendet wird und gleichzeitig sofortige Voransichten während der Arbeit gibt. Aber es gibt noch mehr. Divi gibt nicht nur eine Problemumgehung, sondern auch eine vollständig integrierte, kodierte Methode, um reaktionsschnelle, logikbasierte Layouts mit denselben Tools zu erstellen, auf die sich Entwickler verlassen, ohne eine Codezeile zu schreiben.

So hilft es Ihnen, Calc () heldenhaft zu verwenden, während Sie leise im Schatten arbeiten:

1. Wenden Sie Calc () auf ein beliebiges numerisches Feld an

Nur weil Sie nicht codieren, heißt das nicht, dass Sie begrenzt sind. In Divi 5 funktioniert Calc () überall, wo ein numerischer Wert akzeptiert wird (denken Sie an: Breite, Höhe, Polsterung, Marge, Lücke, Schriftgröße, überall). Wenn das Feld eine Zahl akzeptiert, unterstützt es Calc ().

Und das Anwenden von Calc () ist relativ einfach. Sie müssen lediglich Calc () aus den anderen fortgeschrittenen Einheiten auswählen und Ihre Formel eingeben.

Dies bedeutet, dass Sie Layout -Mathematik visuell bewältigen können, ohne den Bauunternehmer zu verlassen. Unabhängig davon, ob Sie die Höhe eines festen Headers subtrahieren, Schriftgrößen flexibler Abstand hinzufügen oder Einheiten für eine bessere Reaktionsfähigkeit mischen, können Sie alles direkt in den Designfeldern tun.

Geben Sie einfach Ihre Formel ein und die Ergebnisse aktualisieren sofort-keine Code-Panels, keine Registerkartenschaltung und keine zweite Beachtung. Es ist die volle Kontrolle, die direkt in Ihren Workflow eingebaut ist.

2. Holen Sie sich sofortige Live -Voransichten

Einer der besten Teile bei der Verwendung von Calc () in Divi 5 ist, dass Sie sehen können, was Sie in Echtzeit tun. Sie müssen nicht erraten, wie der Abstand oder die Ausrichtung aussehen wird. Wenn Sie Ihre Calc () -Formel eingeben, aktualisiert der Builder sofort.

Wie Sie sehen können, änderte sich die Polsterung sofort, als ich die Calc () -Werte eingab. Ich habe auch zwischen verschiedenen Haltepunkten gewechselt, um Ihnen zu zeigen, wie sich die Polsterung basierend auf der Bildschirmgröße anpasst.

Unabhängig von Änderungen sehen Sie das Ergebnis beim Eingeben. Dieses sofortige Feedback hilft Ihnen zu verstehen, wie sich die Berechnung auf Ihr Layout auswirkt, und ermöglicht es Ihnen, die Werte schnell zu optimieren, ohne die Registerkarten zu wechseln.

3.. Erstellen Sie erweiterte Workflows mit Calc ()

Die Verwendung von Calc () in Divi 5 ist nicht leistungsstark, da Sie jetzt Werte hinzufügen oder subtrahieren können. Die wirkliche Stärke besteht darin, intelligentere Workflows freizuschalten. Mit DIVI können Sie Calc () mit erweiterten Tools wie Clamp (), CSS -Variablen, Designvariablen und Optionsgruppenvoreinstellungen in einem visuellen Builder kombinieren.

Sie sind nicht auf einfache einmalige Anpassungen beschränkt. Mit Divi können Sie Layoutsysteme erstellen, die flüssig auf die Bildschirmgröße reagieren, konsistente Abstandsregeln befolgen und beim Ändern von Designturen automatisch aktualisieren. Mal sehen, wie:

1. Erweitern Sie Calc () mit CSS -Variablen

Divi 5 unterstützt CSS -Variablen direkt in den Designfeldern, was bedeutet, dass Sie wiederverwendbare Werte definieren und visuell von ihnen berechnen können. Nehmen wir an, ich möchte in allen meinen Seitenabschnitten eine feste Polsterung verwenden, also speichere ich sie als CSS -Variable:

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

Dazu gehe ich zu Seiteneinstellungen> Erweitert> benutzerdefinierte CSS und füge hier meine Root -Werte hinzu:

Anstatt überall in die vollständige Formel einzutreten, können Sie in jedem Polsterfeld innerhalb von Divi nur var (– -Sektionspadung) verwenden. Das Ergebnis aktualisiert live und wenn ich den Stammwert später ändere, spiegelt das gesamte Layout diese Änderung sofort wider.

Beachten Sie, dass die aktualisierte erweiterte Einheit Calc Var zeigt, was bedeutet, dass die CSS -Variable unter Verwendung der Funktion var () in einer Calc () -Formel eingefügt wurde.

Die Verwendung von CSS -Variablen in Divi ist überraschend einfach. Sie können sie einfach auf der Seite selbst definieren, ohne Ihr Stylesheet zu berühren. Dies hilft, ein konsistentes Design -Framework aufrechtzuerhalten, neue Werte zu testen und reaktionsschnelle Layoutregeln zu erstellen.

2. Verwenden Sie Calc () in Ihrem Design -Framework

Mit DIVI 5 können Sie Calc () -Werte als Designvariablen speichern, sodass es einfach ist, eine Layout -Logik auf Ihrer gesamten Website wiederzuverwenden. Nehmen wir an, Sie möchten, dass Ihre Serviceabschnitte immer den Bildschirm abzüglich der Höhe eines festen Headers füllen. Anschließend können Sie eine Zahlenvariable erstellen und die Höhe der IT -Abschnittshöhe mit Wert berechnen (120 VH - 30px).

Hier ist 30px die Höhe des festen Headers.

Um die gespeicherte Variable anzuwenden, gehen Sie nun in die Entwurfseinstellungen des Abschnitts und bewegen Sie sich über die Höhe, um das dynamische Feldsymbol zu finden. Klicken Sie darauf und Ihre gespeicherte Variable wird angezeigt. Klicken Sie auf die Höhe der Abschnitt , um es anzuwenden.

Dieser Ansatz gibt Ihnen die vollständige Layout -Kontrolle und hält Ihr Design konsistent. Sie sind nicht in Voreinstellungen oder statische Werte gesperrt. Stattdessen erstellen Sie eine Logik, die sich über Seiten, Vorlagen und Bildschirmgrößen alle visuell anpasst.

Entwurfsvariablen schalten große Möglichkeiten frei. Sie können beispielsweise Ihr Design -Framework visuell erstellen und auf allen Website -Seiten verwenden, um die Designregeln überall zu halten. Wir empfehlen Ihnen außerdem, Ihre Typografie- und Abstands- und Größensysteme zu erstellen, bevor Sie eine Seite entwerfen.

3. Erstellen und speichern Option Gruppenvoreinstellungen

Sobald Ihr Layout konsequent Calc () -Werte verwendet, macht Divi 5 das Speichern dieser Logik für die Wiederverwendung einfach. Sie können Ihr gesamtes Styling -Setup (oder einzelne Einstellungen wie Polsterung, Lücken, Ränder und Breiten) als Optionsprozessvoreinstellungen speichern. Dies bedeutet, dass Sie anstatt Calc () Formeln wiederholt anzuwenden, nur eine Voreinstellung auswählen, und die Layout -Mathematik wird sofort angewendet.

Wenn Sie beispielsweise Polster verwendet haben: Calc (4REM + 2VW) über mehrere Abschnitte hinweg, müssen Sie es nicht überall weitergeben. Speichern Sie es einfach als Voreinstellung:

Wenden Sie nun Ihr gespeichertes Preset überall hin. Alles aktualisiert visuell, sodass Sie den Effekt sofort live sehen können.

Noch besser, wenn Sie Designvariablen in diesen Voreinstellungen verwendet haben, können Sie die Werte später weltweit aktualisieren. Ändern Sie die Variable einmal und jedes Voreinstellung wird das Update widerspiegeln. Dies macht große Änderungen schnell und konsistent.

Beachten Sie, wie durch Ändern der gespeicherten Werte in Designvariablen auch im Padding -Bereich aktualisiert werden und uns gleichzeitig eine Live -Vorschau erhalten? Das liegt daran, dass ich die Abschnittshöhenvariable innerhalb des Abschnittsabschnitts voreingestellt habe.

Das ist die Macht Divi 5 bringt. Es hilft Ihnen, Ihr Designsystem zu skalieren und gleichzeitig die fortschrittliche Layoutlogik auf der Website konsistent zu halten. Sobald Sie sich daran gewöhnt haben, erweiterte Einheiten wie Calc () zu kombinieren (siehe hier mehr Calc () Anwendungsfälle mit Tipps, um sie effektiv zu beherrschen) mit dem modularen Entwurfssystem von Divi entsperren Sie eine effiziente und unterhaltsame Möglichkeit, Websites zu erstellen.

Divi macht die Mathematik einfach

Sie müssen kein Entwickler sein, um CSS -Funktionen wie Calc () und Clamp () zu verwenden. Divi 5 bringt diese erweiterten Tools in eine visuelle Schnittstelle, die einfach zu erforschen, zu testen und anzuwenden ist. Sie können alles von einfachen Layout -Optimierungen bis hin zu komplexen Designsystemen tun, ohne eine Codezeile zu schreiben.

Egal, ob Sie den Abstand anpassen, Variablen verwenden oder wiederverwendbare Voreinstellungen erstellen, Divi macht Responsive Design Math für alle zugänglich. Möchten Sie testen, wie reibungslos calc () in Divi funktioniert? Laden Sie noch heute das Divi Public Alpha herunter und erleben Sie es selbst.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden, warten Sie jedoch ein wenig, bevor Sie vorhandene migrieren.