calc-size()

Syntax

/* Pass a value through calc-size() */
calc-size(auto, size)
calc-size(fit-content, size)

/* Perform a calculation */
calc-size(min-content, size + 100px)
calc-size(fit-content, size / 2)

/* Calculation including a function */
calc-size(auto, round(up, size, 50px))

Parameter

Die Syntax der calc-size() Funktion ist wie folgt:

calc-size(<calc-size-basis>, <calc-sum>)

Die Parameter sind:

<calc-size-basis>

Der Wert (häufig ein intrinsischer Wert), auf dem Sie eine Berechnung durchführen möchten.

<calc-sum>

Ein Ausdruck, der die Berechnung definiert, die auf dem <calc-size-basis> durchgeführt werden soll.

Rückgabewert

Gibt einen Wert zurück, der dem <calc-size-basis> entspricht, modifiziert durch den <calc-sum> Ausdruck. Da der <calc-size-basis> Wert ein intrinsischer Größenwert ist, ist der Rückgabewert ein modifizierter intrinsischer Größenwert, der sich wie der in die Funktion eingegebene intrinsische Größenwert verhält.

Beschreibung

Bestimmte Browser-Layout-Algorithmen haben besondere Verhaltensweisen für intrinsische Größen-Schlüsselwörter. Die calc-size() Funktion ist explizit definiert, um eine intrinsische Größe anstelle eines <length-percentage> darzustellen, wodurch die Korrektheit erzwungen wird. calc-size() ermöglicht Berechnungen an intrinsischen Größenwerten in einer sicheren, wohl definierten Weise.

Gültige Werte für das erste Argument (<calc-size-basis>)

Das erste calc-size() Argument kann einer der folgenden intrinsischen Werte sein:

• auto
• min-content
• max-content
• fit-content
• content (für Container, die mit flex-basis dimensioniert werden).

Es gibt auch einige spezielle Werte, die dieses Argument annehmen kann:

• Ein geschachtelter calc-size() Wert. Dies ist etwas, das Sie wahrscheinlich nicht sehr oft tun werden, aber es ist verfügbar und stellt sicher, dass die Verwendung einer CSS-Variable als <calc-size-basis> immer funktioniert, vorausgesetzt, die Variable ist ein gültiger Wert für die Eigenschaft, auf die calc-size() gesetzt wird. So funktioniert zum Beispiel Folgendes:

  css

  section {
    height: calc-size(calc-size(max-content, size), size + 2rem);
  }
  

  Ebenso funktioniert dies:

  css

  :root {
    --intrinsic-size: calc-size(max-content, size);
  }
  
  section {
    height: calc-size(var(--intrinsic-size), size + 2rem);
  }
  

• Ein weiteres <calc-sum>, mit denselben Einschränkungen, wie sie für das <calc-sum> für das zweite Argument spezifiziert sind, mit der Ausnahme, dass das size Schlüsselwort nicht enthalten sein kann. Dies werden Sie wahrscheinlich nicht tun, da Sie keine Berechnung an einem intrinsischen Größenwert mehr durchführen, aber wenn ein Wert einer benutzerdefinierten Eigenschaft ein <calc-sum> ist, wird die Funktion dennoch funktionieren. Zum Beispiel funktioniert dies direkt oder wenn Sie eine benutzerdefinierte Eigenschaft mit einem Wert von 300px + 2rem verwenden:

  css

  section {
    height: calc-size(300px + 2rem, size / 2);
  }
  

• Das Schlüsselwort any, das eine nicht spezifizierte endgültige Größe darstellt. In diesem Fall kann das size Schlüsselwort nicht im zweiten Argument enthalten sein, und die calc-size() gibt das Ergebnis der Berechnung des zweiten Arguments zurück. Zum Beispiel:

  css

  section {
    height: calc-size(any, 300px * 1.5); /* Returns 450px */
  }
  

Das Mischen verschiedener intrinsischer Größen in derselben Berechnung funktioniert nicht. Zum Beispiel macht max-content - min-content keinen Sinn. calc-size() erlaubt nur einen einzigen intrinsischen Größenwert in jeder Berechnung, um dieses Problem zu vermeiden.

Gültige Werte für das zweite Argument (<calc-sum>)

Das zweite calc-size() Argument ist ein <calc-sum> Ausdruck.

In diesem Ausdruck:

• Das Schlüsselwort size repräsentiert das als erstes Argument spezifizierte <calc-size-basis>.
• Operanden können size und alle Werttypen enthalten, die im Kontext sinnvoll sind.
• Die Operatoren +, -, * und / können enthalten sein.
• Andere mathematische Funktionen wie round(), max() oder sogar ein geschachteltes calc-size() können enthalten sein.
• Der gesamte Ausdruck muss <length-percentage> entsprechen und sich auf ein <length> auflösen.

Aktivierung der Animation intrinsischer Größenwerte

calc-size() Rückgabewerte können interpoliert werden, sodass Animationen zwischen einem <length-percentage> Wert und einem calc-size() intrinsischen Größenausgabewert ermöglicht werden.

Beispielsweise könnten Sie einen Übergang verwenden, um die width eines Containers zwischen 0 und auto wie folgt zu animieren:

section {
  width: 0;
  transition: width ease 1s;
}

section:hover,
section:focus {
  width: calc-size(auto, size);
}

Im obigen Fall berechnen wir nichts — wir setzen auto in calc-size() und geben es unverändert zurück. Die interpolate-size Eigenschaft macht Animationen wie die oben genannten einfacher umzusetzen, insbesondere wenn mehrere Animationen zu berücksichtigen sind. Es wird vererbt und muss daher nur einmal auf einer übergeordneten Eigenschaft deklariert werden, was bedeutet, dass wir zwischen 0 und auto hätten übergangsweise wechseln können, ohne calc-size() zu verwenden.

Die calc-size() Funktion sollte nur verwendet werden, um intrinsische Größenanimationen zu ermöglichen, wenn sie auch Berechnungen erfordern. Zum Beispiel, im folgenden Fall animieren wir die width und wenden eine Berechnung auf den Endzustand der intrinsischen Größe an:

section {
  width: 0;
  transition: width ease 1s;
}

section:hover,
section:focus {
  width: calc-size(auto, size + 2rem);
}

Ein Fall, in dem calc-size() nützlich ist, ist, wenn Sie zwischen einer intrinsischen Größe und einer modifizierten Version derselben intrinsischen Größe animieren möchten. Dies ist mit interpolate-size und calc() nicht möglich. Zum Beispiel animiert die folgende @keyframes Definition eine Container-width zwischen fit-content und 70% des fit-content.

@keyframes narrower {
  from {
    width: fit-content;
  }

  to {
    width: calc-size(fit-content, size * 0.7);
  }
}

Formale Syntax

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Beispiele

Grundlegende Verwendung von calc-size

Dieses Beispiel zeigt die grundlegende Dimensionierung eines Containers unter Verwendung von calc-size()

HTML

Das HTML enthält ein einzelnes <section>-Element, das einige Kindinhalte enthält.

<section>
  <h2>Favorite quote</h2>

  <p>
    Fashion is something so ugly it has to be changed every fifteen minutes.
  </p>
</section>

CSS

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  border: 1px solid black;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 0.8rem;
}

Im CSS verwenden wir Flexbox, um die Kindelemente im <section> zu zentrieren, und setzen die width und height des <section> auf calc-size() Funktionen. Die width wird auf fit-content plus 6rem gesetzt. Die height wird auf auto multipliziert mit zwei gesetzt.

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: calc-size(fit-content, size + 6rem);
  height: calc-size(auto, size * 2);
}

Der Rest des CSS wurde der Kürze halber ausgeblendet.

Ergebnis

Wir haben etwas horizontalen und vertikalen Platz geschaffen, um den Text zu zentrieren, ohne Polsterung zu verwenden.

Grundlegende calc-size Animationen

Dieses Beispiel demonstriert, wie man calc-size() benutzt, um zwischen einer spezifischen Größe und einer intrinsischen Größe zu animieren. Das Demo zeigt ein Charakterabzeichen/"Namensschild", das durch Hover oder Fokus Informationen über den Charakter offenbart. Das Anzeigen wird durch einen height Übergang zwischen einer festgelegten Länge und max-content gehandhabt.

HTML

Das HTML enthält ein einzelnes <section>-Element mit tabindex="0", sodass es Tastaturfokus empfangen kann. Das <section> enthält <header> und <main> Elemente, jedes mit eigenen Kindinhalten.

<section tabindex="0">
  <header>
    <h2>Chris Mills</h2>
  </header>
  <main>
    <p>Chris is the silent phantom of MDN.</p>
    <ul>
      <li><strong>Height</strong>: 3.03m</li>
      <li><strong>Weight</strong>: 160kg</li>
      <li><strong>Tech Fu</strong>: 7</li>
      <li><strong>Bad Jokes</strong>: 9</li>
    </ul>
  </main>
</section>

CSS

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 175px;
  border-radius: 5px;
  background: #eeeeee;
  box-shadow:
    inset 1px 1px 4px rgb(255 255 255 / 0.5),
    inset -1px -1px 4px rgb(0 0 0 / 0.5);
}

header {
  padding: 10px;
  border-bottom: 2px solid #cccccc;
}

main {
  padding: 0.7rem;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p,
li {
  font-size: 0.8rem;
  line-height: 1.5;
}

p {
  margin-top: 0;
}

Im CSS setzen wir die height des <section> auf 2.5rem und overflow auf hidden, sodass nur der <header> standardmäßig angezeigt wird, dann spezifizieren wir einen transition, der die height des <section> über 1 Sekunde während der Zustandsänderungen animiert. Schließlich setzen wir die height des <section> auf einen calc-size() Funktionsaufruf auf :hover und :focus. Der Funktionsrückgabewert ist gleichbedeutend mit max-content + 2rem.

section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: calc-size(max-content, size + 2rem);
}

Der Rest des CSS wurde der Kürze halber ausgeblendet.

Ergebnis

Versuchen Sie, über das <section> zu fahren oder es mit der Tastatur zu fokussieren — es wird auf seine volle Höhe + 2rem animiert, wodurch der gesamte Inhalt mit 2rem zusätzlichem Abstand am unteren Rand angezeigt wird.

Anpassung der Lesebreite basierend auf fit-content

Dieses Beispiel zeigt einen Container mit Text darin und einen Button, der geklickt werden kann, um die Breite des Containers abhängig von der Lesepreferenz schmaler oder breiter zu machen.

HTML

Das HTML enthält ein einzelnes <section>-Element, das Kindtextinhalt und einen <button> enthält, um die <section> Breite zu ändern.

<section class="easy-reader">
  <h2>Easy reader</h2>

  <p>
    Eius velit aperiam ipsa. Deleniti eum excepturi ut magni maxime maxime
    beatae. Dicta aperiam est laudantium ut illum facere qui officiis. Sunt
    deleniti quam id. Quis sunt voluptatem praesentium minima dolorum autem
    consequatur velit.
  </p>

  <p>
    Vitae ab incidunt velit aspernatur deleniti distinctio rerum. Et natus sed
    et quos mollitia quia quod. Quae officia ex ea. Ducimus ut voluptatem et et
    debitis. Quidem provident laboriosam exercitationem similique deleniti.
    Temporibus vel veniam mollitia magni unde a nostrum.
  </p>

  <button class="width-adjust">Narrower</button>
</section>

CSS

* {
  box-sizing: border-box;
}

body {
  width: 600px;
  margin: 0 auto;
}

section {
  margin-top: 20px;
  font-family: "Helvetica", "Arial", sans-serif;
  background: #eeeeee;
  border: 2px solid #cccccc;
  padding: 0 20px;
  position: relative;
}

p,
li {
  font-size: 0.8rem;
  line-height: 1.5;
}

button {
  position: absolute;
  top: 2px;
  right: 2px;
}

Im CSS setzen wir die width des <section> auf einen Standard von fit-content. Dann definieren wir zwei Sets von @keyframes, narrower, was von fit-content zu 70% von fit-content animiert (unter Verwendung von calc-size() berechnet), und wider, das dieselben Werte, jedoch in umgekehrter Richtung animiert. Schließlich hängen wir diese Animationen an zwei Klassen an — .narrower und .wider. Jede Animation ist so definiert, dass sie eine Sekunde dauert und den Endzustand einmal abgeschlossen beibehält.

section {
  width: fit-content;
}

@keyframes narrower {
  from {
    width: fit-content;
  }

  to {
    width: calc-size(fit-content, size * 0.7);
  }
}

@keyframes wider {
  from {
    width: calc-size(fit-content, size * 0.7);
  }

  to {
    width: fit-content;
  }
}

.narrower {
  animation: narrower 1s ease forwards;
}

.wider {
  animation: wider 1s ease forwards;
}

Der Rest des CSS wurde der Kürze halber ausgeblendet.

JavaScript

Das JavaScript bietet ein Schmaler/Breiter-Overlay, das die relevante Klasse auf das <section> anwendet, wenn der Button geklickt wird:

const widthAdjustBtn = document.querySelector(".width-adjust");
const easyReader = document.querySelector(".easy-reader");

widthAdjustBtn.addEventListener("click", () => {
  if (easyReader.classList.length === 1) {
    easyReader.classList.add("narrower");
    widthAdjustBtn.textContent = "Wider";
  } else if (easyReader.classList.contains("wider")) {
    easyReader.classList.replace("wider", "narrower");
    widthAdjustBtn.textContent = "Wider";
  } else if (easyReader.classList.contains("narrower")) {
    easyReader.classList.replace("narrower", "wider");
    widthAdjustBtn.textContent = "Narrower";
  }
});

Ergebnis

Versuchen Sie, den <button> ein paar Mal zu klicken, um das <section> zwischen der breiten und schmalen Lesebreite zu verstellen, indem die width auf Basis des fit-content Wertes manipuliert wird.

Verwendung einer Funktion innerhalb der calc-size() Funktion

Wie vorher erwähnt, ist es möglich, eine andere Funktion innerhalb von calc-size() zu verwenden. Dieses Beispiel setzt field-sizing: content auf <input> Elementen, um diese so breit wie den eingegebenen Inhalt zu machen, und verwendet dann eine max() Funktion innerhalb von calc-size(), um sicherzustellen, dass die <input>s mindestens eine Mindestgröße haben und erst dann wachsen, wenn der eingegebene Text breiter als diese Größe wird — indem sie auf fit-content plus 20px gesetzt werden.

HTML

Das HTML enthält ein <form> Element mit drei textlichen <input> Typen. Jedes <input> hat ein zugehöriges <label>, um das Formular zugänglich zu machen, und ein maxlength, um zu verhindern, dass eingegebene Werte zu lang werden und das Layout des Formulars brechen.

<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" maxlength="48" />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" maxlength="48" />
  </div>
  <div>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address" maxlength="60" />
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}

body {
  width: 600px;
  margin: 0 auto;
}

form {
  margin-top: 20px;
  padding: 20px;
  font-family: "Helvetica", "Arial", sans-serif;
  background: #eeeeee;
  border: 2px solid #cccccc;
}

div {
  display: flex;
  align-items: center;
}

div:not(div:last-child) {
  margin-bottom: 20px;
}

Im CSS setzen wir die width der <label> Elemente auf 100px. Wir setzen field-sizing: content auf die <input> Elemente, um sie so breit wie den eingegebenen Inhalt zu machen — standardmäßig hätten sie keine Breite, weil nichts in sie eingegeben würde. Um dem entgegenzuwirken, setzen wir ihre width Werte auf calc-size(fit-content, max(100px, size + 20px)). Das bedeutet, dass sie mindestens 100px breit sind, selbst ohne eingegebenen Wert. Wenn ein eingegebener Wert breiter als 100px wird, ändert sich ihre width zu fit-content plus 20px, was bedeutet, dass sie mit der Größe des Inhalts wachsen, jedoch einen 20px Abstand auf der rechten Seite behalten.

label {
  width: 100px;
}

input {
  field-sizing: content;
  width: calc-size(fit-content, max(100px, size + 20px));
}

Der Rest des CSS wurde der Kürze halber ausgeblendet.

Ergebnis

Versuchen Sie, in einige der Formulareingaben Text einzugeben und sehen Sie, wie sie wachsen, wenn die Werte so breit wie der von der max() Funktion festgelegte Mindestwert werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• interpolate-size
• calc()
• round()
• Animate to height: auto; (und andere intrinsische Größen-Schlüsselwörter) in CSS auf developer.chrome.com (2024)