Get best of the week

CSS: vollständige calc () - Funktionsanleitung

CSS verfügt über eine spezielle Funktion calc()zur Durchführung einfacher Berechnungen. Hier ist ein Beispiel für seine Verwendung:

.main-content {
  /*  80px  100vh */
  height: calc(100vh - 80px);
}

Hier könnencalc() Sie mit dem CSS-Code experimentieren , in dem er verwendet wird . Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte über alles sprechen, was es wert ist, über diese sehr nützliche Funktion informiert zu werden.





Calc () - Funktion und CSS-Eigenschaftswerte


Sie können die Funktion calc()nur mit CSS-Eigenschaftswerten verwenden. Schauen Sie sich die folgenden Beispiele an, in denen wir mit dieser Funktion die Werte verschiedener Eigenschaften festlegen.

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

Die Funktion calc()kann auch verwendet werden, um einen separaten Teil der Eigenschaft festzulegen:

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

Diese Funktion kann sogar Teil einer anderen Funktion sein, die für die Bildung eines Teils einer bestimmten Eigenschaft verantwortlich ist! Hier wird beispielsweise calc()die Position der Farbverlaufsänderung angepasst:

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

Die Funktion calc () ist ein Werkzeug zum Arbeiten mit numerischen Eigenschaften.


Bitte beachten Sie, dass wir in allen obigen Beispielen die Funktion verwenden, calc()wenn wir mit numerischen Eigenschaften arbeiten. Wir werden auch über einige Merkmale der Arbeit mit numerischen Eigenschaften sprechen (sie sind mit der Tatsache verbunden, dass manchmal die Verwendung von Maßeinheiten nicht erforderlich ist). Nun stellen wir fest, dass diese Funktion Operationen mit Zahlen ausführen soll und nicht mit Zeichenfolgen oder mit etwas anderem.

.el {
  /* ! */
  counter-reset: calc("My " + "counter");
}
.el::before {
  /* ! */
  content: calc("Candyman " * 3);
}

Es gibt viele Maßeinheiten , die in CSS verwendet werden können , um die Größe der Elemente und deren Teile zu spezifizieren: px, %, em, rem, in, mm, cm, pt, pc, ex, ch, vh, vw, vmin, vmax. Alle diese Einheiten können mit der Funktion verwendet werden calc().

Diese Funktion kann auch mit Zahlen verwendet werden, die ohne Angabe von Einheiten verwendet werden:

line-height: calc(1.2 * 1.2);

Es kann auch zur Berechnung von Winkeln verwendet werden:

transform: rotate(calc(10deg * 5));

Diese Funktion kann auch verwendet werden, wenn in dem an sie übergebenen Ausdruck keine Berechnungen durchgeführt werden:

.el {
  /*   ,    */
  width: calc(20px);
}

Calc () kann nicht in Medienabfragen verwendet werden


Obwohl diese Funktion zum Festlegen von CSS-Eigenschaftswerten entwickelt wurde, funktioniert sie in Medienabfragen leider nicht:

@media (max-width: 40rem) {
  /* 40rem   */
}

/*  ! */
@media (min-width: calc(40rem + 1px)) {
  /* ,  40rem */
}

Wenn sich solche Konstruktionen einmal als funktionsfähig erweisen, ist dies sehr gut, da hierdurch sich gegenseitig ausschließende Medienabfragen erstellt werden können , die sehr logisch aussehen (z. B. die oben gezeigten).

Verwenden verschiedener Einheiten in einem Ausdruck


Die Zulässigkeit der Verwendung verschiedener Maßeinheiten in einem Ausdruck ist wahrscheinlich die wertvollste Gelegenheit calc(). Ähnliches wird in fast allen obigen Beispielen verwendet. Um Sie darauf aufmerksam zu machen, ein weiteres Beispiel, das die Verwendung verschiedener Maßeinheiten zeigt:

/*      */
width: calc(100% - 20px);

Dieser Ausdruck lautet wie folgt: "Die Breite entspricht der Breite des Elements, von dem 20 Pixel subtrahiert werden."

In einer Situation, in der sich die Breite des Elements ändern kann, ist es völlig unmöglich, den gewünschten Wert im Voraus zu berechnen, indem nur in Pixel ausgedrückte Indikatoren verwendet werden. Mit anderen Worten, Sie können calc()etwas wie Sass nicht vorverarbeiten und versuchen, etwas wie Polyfill zu erhalten. Ja, dies ist nicht erforderlich, angesichts der Tatsache , dass der Browser unterstütztcalc() sehr gut . Der Punkt hier ist, dass solche Berechnungen, bei denen Werte, die in verschiedenen Einheiten ausgedrückt werden, gemischt werden, im Browser durchgeführt werden müssen (während der "Ausführung" der Seite). Die Fähigkeit, solche Berechnungen durchzuführen, ist nämlich der Hauptwert .calc()

Hier sind einige weitere Beispiele für die Verwendung von Werten, die in verschiedenen Einheiten ausgedrückt werden:

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

Sie können diese Ausdrücke wahrscheinlich vorverarbeiten, da sie Werte mischen, deren Einheiten sich nicht auf etwas beziehen, das bestimmt wird, während die Seite im Browser ausgeführt wird.

Vergleich von calc () mit Präprozessorberechnungen


Wir haben gerade gesagt, dass die nützlichste Funktion calc()nicht für die Vorverarbeitung geeignet ist. Durch die Vorverarbeitung erhält der Entwickler jedoch einige Funktionen, die den Funktionen entsprechen calc(). Wenn Sie beispielsweise Sass verwenden, können Sie auch Eigenschaftswerte berechnen:

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; //  3rem;
  margin-bottom: $padding * 2; //  2rem; 
}

Hier können Berechnungen unter Angabe der Maßeinheiten durchgeführt werden. Hier können Sie die in denselben Maßeinheiten ausgedrückten Größen addieren und bestimmte Werte mit Werten multiplizieren, deren Maßeinheiten nicht angegeben sind. Es ist jedoch nicht möglich, Berechnungen mit Werten durchzuführen, die in verschiedenen Maßeinheiten ausgedrückt werden. Einschränkungen, die Einschränkungen ähneln, werden solchen Berechnungen auferlegt calc()(zum Beispiel müssen die Zahlen, mit denen etwas multipliziert oder geteilt wird, Werte ohne Einheiten sein).

Offenlegung der Bedeutung der in CSS verwendeten numerischen Werte


Auch wenn Sie keine Chancen nutzen, die nur mit Hilfe erreichbar sind calc(), kann diese Funktion verwendet werden, um die Bedeutung der in CSS verwendeten Werte aufzuzeigen. Angenommen, Sie möchten, dass der Wert einer Eigenschaft genau 1/7 der Breite des Elements beträgt:

.el {
  /*   , */
  width: calc(100% / 7);

  /*   */
  width: 14.2857142857%;
}

Dieser Ansatz kann in einer Art selbsternannter CSS-API nützlich sein:

[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }

Mathematische Operatoren der Funktion calc ()


Der Ausdruck, der mit Hilfe calc()der Operatoren ausgewertet werden +soll -, *und /. In ihrer Anwendung gibt es jedoch einige Funktionen.

Beim Addieren ( +) und Subtrahieren ( -) müssen Sie die Werte mit den angegebenen Einheiten verwenden

.el {
  /*  */
  margin: calc(10px + 10px);

  /*  */
  margin: calc(10px + 5);
}

Bitte beachten Sie, dass die Verwendung falscher Werte dazu führt, dass eine bestimmte Ansage ebenfalls falsch wird.

Beim Teilen von ( /) muss die Maßeinheit nicht auf der zweiten Zahl angegeben werden

.el {
  /*  */
  margin: calc(30px / 3);

  /*  */
  margin: calc(30px / 10px);

  /*  (   ) */
  margin: calc(30px / 0);
}

Beim Multiplizieren ( *) sollte eine der Zahlen keine Maßeinheit haben:

.el {
  /*  */
  margin: calc(10px * 3);

  /*  */
  margin: calc(3 * 10px);

  /*  */
  margin: calc(30px * 3px);
}

Die Bedeutung von Räumen


Die in Ausdrücken verwendeten Leerzeichen sind für Additions- und Subtraktionsoperationen wichtig:

.el {
  /*  */
  font-size: calc(3vw + 2px);

  /*  */
  font-size: calc(3vw+2px);

  /*  */
  font-size: calc(3vw - 2px);

  /*  */
  font-size: calc(3vw-2px);
}

Hier ist es durchaus möglich, negative Zahlen zu verwenden (zum Beispiel in einem Konstrukt wie calc(5vw — -5px)), aber dies ist ein Beispiel für eine Situation, in der Leerzeichen nicht nur notwendig, sondern auch im Hinblick auf die Klarheit der Ausdrücke nützlich sind.

Tab Atkins sagte mir, dass der Grund, warum die Additions- und Subtraktionsoperatoren durch Leerzeichen getrennt werden sollten, in der Tat die Besonderheiten des Analysierens von Ausdrücken sind. Ich kann nicht sagen, dass ich das vollständig verstanden habe, aber der Parser verarbeitet den Ausdruck 2px-3pxbeispielsweise als Zahl 2mit einer Maßeinheitpx-3px. Und niemand wird eine so seltsame Maßeinheit brauchen. Das Parsen von Ausdrücken mit dem Additionsoperator hat seine eigenen Probleme. Ein Parser kann diesen Operator beispielsweise als Teil der Syntax zur Beschreibung von Zahlen verwenden. Ich dachte, dass ein Leerzeichen benötigt wird, um die Syntax von benutzerdefinierten Eigenschaften ( --) korrekt zu handhaben , aber das ist nicht der Fall.

Beim Multiplizieren und Teilen von Leerzeichen um Operatoren sind keine erforderlich. Ich glaube jedoch, dass Sie die Verwendung von Leerzeichen mit diesen Operatoren empfehlen können, um die Lesbarkeit des Codes zu verbessern und um die Leerzeichen nicht zu vergessen und um Ausdrücke einzugeben, die Addition und Subtraktion verwenden.

Leerzeichen, die Klammern calc()von einem Ausdruck trennen, spielen keine Rolle. Falls gewünscht, kann der Ausdruck sogar durch Verschieben in eine neue Zeile ausgewählt werden:

.el {
  /*  */
  width: calc(
    100%     /   3
  );
}

Natürlich sollten Sie hier vorsichtig sein. Zwischen dem Namen der Funktion ( calc) und der ersten öffnenden Klammer dürfen keine Leerzeichen stehen:

.el {
  /*  */
  width: calc (100% / 3);
}

Verschachtelte Konstruktionen: calc (calc ())


Wenn Sie mit einer Funktion arbeiten calc(), können Sie verschachtelte Konstruktionen verwenden, dies ist jedoch nicht unbedingt erforderlich. Dies ähnelt der Verwendung von Klammern ohne calc:

.el {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
}

Es macht keinen Sinn, verschachtelte Konstruktionen aus Funktionen zu erstellen calc(), da diese nur in Klammern umgeschrieben werden können:

.el {
  width: calc(
   (100% / 3)
    -
   (1rem * 2)
  );
}

Außerdem werden in diesem Beispiel keine Klammern benötigt, da bei der Berechnung der hier dargestellten Ausdrücke die Regeln zur Bestimmung der Priorität von Operatoren angewendet werden. Division und Multiplikation werden vor Addition und Subtraktion durchgeführt. Infolgedessen kann der Code folgendermaßen umgeschrieben werden:

.el {
  width: calc(100% / 3 - 1rem * 2);
}

Für den Fall, dass die zusätzlichen Klammern den Code klarer erscheinen lassen, können sie verwendet werden. Wenn der Ausdruck ohne Klammern, basierend auf der Priorität der Operatoren, falsch berechnet wird, benötigt ein solcher Ausdruck außerdem Klammern:

.el {
  /* ,   , */
  width: calc(100% + 2rem / 2);

  /*     ,    */
  width: calc((100% + 2rem) / 2);
}

Benutzerdefinierte CSS-Eigenschaften und calc ()


Wir haben bereits etwas über eine der großartigen Funktionen gelernt calc(), über Berechnungen, bei denen Werte mit unterschiedlichen Einheiten verwendet werden. Ein weiteres interessantes Merkmal dieser Funktion ist, wie sie mit benutzerdefinierten CSS-Eigenschaften angewendet werden kann. Benutzerdefinierte Eigenschaften können Werte zugewiesen werden, die für Berechnungen verwendet werden können:

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

Ich bin mir sicher, dass es einfach ist, sich eine Reihe von CSS-Stilen vorzustellen, bei denen viele Einstellungen an einem Ort vorgenommen werden, indem Werte für benutzerdefinierte CSS-Eigenschaften festgelegt werden. Diese Werte werden dann im gesamten CSS-Code verwendet.

Benutzerdefinierte Eigenschaften können sich außerdem aufeinander beziehen (beachten Sie, dass sie hier calc()nicht verwendet werden). Die erhaltenen Werte können verwendet werden, um die Werte anderer CSS-Eigenschaften festzulegen (hier können Sie jedoch calc()nicht darauf verzichten).

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

Für einige mag dies nicht sehr praktisch erscheinen, da Sie sich beim Zugriff auf eine benutzerdefinierte Eigenschaft daran erinnern müssen calc(). Aber ich finde das im Hinblick auf die Lesbarkeit des Codes interessant.

Die Quelle für benutzerdefinierte Eigenschaften kann HTML-Code sein. Manchmal kann dies äußerst nützlich sein. In Splitting.js werden beispielsweise Indizes zu Wörtern und Symbolen hinzugefügt.

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>
div {
  /*     HTML (   ) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

Zuweisen von Einheiten zu benutzerdefinierten Eigenschaften nach dem Deklarieren dieser Eigenschaften


Angenommen, wir befinden uns in einer Situation, in der es sinnvoll ist, eine Zahl ohne Maßeinheiten in eine benutzerdefinierte Eigenschaft zu schreiben, oder in einer Situation, in der eine solche Zahl vor der tatsächlichen Verwendung zweckmäßig ist, und konvertieren sie irgendwie ohne Verwendung von Maßeinheiten. In solchen Fällen kann einer benutzerdefinierten Eigenschaft ein Wert zugewiesen werden, ohne dass Einheiten angegeben werden. Wenn diese Zahl in eine neue Zahl umgerechnet werden muss, ausgedrückt in bestimmten Maßeinheiten, kann sie durch 1Angabe der gewünschten Maßeinheiten multipliziert werden :

html {
  --importantNumber: 2;
}

.el {
  /*    ,  ,        */
  padding: calc(var(--importantNumber) * 1rem);
}

Arbeite mit Blumen


Bei der Beschreibung von Farben mit Formaten wie RGB und HSL werden Zahlen verwendet. Diese Nummern können bearbeitet werden calc(). Sie können beispielsweise einige grundlegende HSL-Werte festlegen und diese dann nach Bedarf ändern ( hier ein Beispiel):

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}

Sie können calc () und attr () nicht kombinieren.


Die CSS-Funktion attr()kann sehr attraktiv erscheinen. Und die Wahrheit: Sie nehmen den Attributwert aus HTML und verwenden ihn dann. Aber…

<div data-color="red">...</div>
div {
  /*    */
  color: attr(data-color);
}

Leider versteht diese Funktion die „Wertetypen“ nicht. Daher attr()eignet es sich nur zum Arbeiten mit Zeichenfolgen und zum Festlegen von CSS-Eigenschaften content. Das heißt, ein solches Design funktioniert ziemlich gut:

div::before {
  content: attr(data-color);
}

Ich habe dies hier gesagt, weil jemand versuchen möchte, eine attr()bestimmte Zahl aus dem HTML-Code zu extrahieren und sie in den Berechnungen zu verwenden:

<div class="grid" data-columns="7" data-gap="2">...</div>
.grid {
  display: grid;

  /*         */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

Das Gute ist jedoch, dass es nicht wirklich wichtig ist, da benutzerdefinierte Eigenschaften in HTML sich hervorragend zur Lösung solcher Probleme eignen :

<div class="grid" style="--columns: 7; --gap: 2rem;">...</div>
.grid {
  display: grid;

  /* ! */
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: calc(var(--gap));
}

Browser-Tools


Browser-Entwicklertools zeigen normalerweise Ausdrücke mit calc()denselben Ausdrücken an, wie sie im CSS-Quellcode beschrieben sind.


Firefox-Entwicklertools, Registerkarte "Regeln"

Wenn Sie herausfinden möchten, wie die Funktion berechnet wirdcalc(), können Sie auf die Registerkarte verweisenComputed(diese Registerkarte finden Sie in den Entwicklertools aller mir bekannten Browser). Dort wird der berechnete Wert angezeigtcalc().


Registerkarte "Berechnete Chrome Developer Tools"

Browser-Unterstützung


Hier erfahren Sie mehr über die calc()Browserunterstützung für diese Funktion . Wenn wir über moderne Browser sprechen, liegt der Support-Grad bei calc()über 97%. Wenn Sie ziemlich alte Browser (wie IE 8 oder Firefox 3.6) unterstützen müssen, tun sie dies normalerweise: Fügen Sie vor der Eigenschaft calc()dieselbe Eigenschaft hinzu, um den Wert zu berechnen, der in einem Format festgelegt ist, das alte Browser verstehen:

.el {
  width: 92%; /*   */
  width: calc(100% - 2rem);
}

Die Funktion calc()hat viele bekannte Probleme, aber nur alte Browser leiden darunter. Auf Caniuse finden Sie eine Beschreibung von 13 solchen Problemen. Hier sind einige davon:

  • Der Firefox-Browser unter Version 59 unterstützt calc()die zum Einstellen der Farbe verwendeten Funktionen nicht . Zum Beispiel : color: hsl(calc(60 * 2), 100%, 50%).
  • IE 9-11 rendert den von der Eigenschaft angegebenen Schatten nicht, box-shadowwenn er zum Bestimmen eines der Werte verwendet wird calc().
  • Weder IE 9-11 noch Edge unterstützen das Ansichtsdesign, width: calc()wenn es auf Tabellenzellen angewendet wird.

Lebensbeispiele


Ich habe mehrere CSS-Entwickler gefragt, wann sie die Funktion zuletzt verwendet haben calc(). Ihre Antworten waren eine kleine Auswahl, die jedem helfen wird, zu lernen, wie andere Programmierer calc()in ihrer täglichen Arbeit arbeiten.

  • Ich habe calc()die Hilfsklasse für die Bereiche Management erstellt : .full-bleed { width: 100vw; margin-left: calc(50% — 50vw); }. Ich kann sagen, dass es calc()in meinen Top 3 der nützlichsten CSS-Funktionen ist.
  • Ich habe diese Funktion verwendet, um Platz für eine feste "Fußzeile" der Seite zuzuweisen.
  • calc() . , font-size, . font-size — calc() line-height. ( , calc() , , , rem em. , ).
  • , . . — : .margin { width: calc( (100vw — var(--content-width)) / 2); }.
  • calc() - , . : .drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }.
  • , .
  • , padding vw/vh.
  • Ich wende mich calc()an Umgehungsbeschränkungen background-position. Dies gilt insbesondere für Einschränkungen bei der Einstellung von Farbwechselpositionen in Verläufen. Dies kann beispielsweise wie folgt beschrieben werden: "Positionieren Sie die Position der Farbänderung, ohne 0.75emden Boden zu erreichen."



Liebe Leser! Verwenden Sie CSS calc()?

More articles:


All Articles