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 (meist eine intrinsische Größe), auf den Sie eine Berechnung anwenden möchten.

<calc-sum>

Ein Ausdruck, der die Berechnung definiert, die auf den <calc-size-basis> angewendet 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 eine intrinsische Größe ist, ist der Rückgabewert eine modifizierte intrinsische Größe, die sich wie der in die Funktion eingegebene intrinsische Größenwert verhält.

Beschreibung

Bestimmte Browser-Layout-Algorithmen haben spezielle Verhaltensweisen für intrinsische Größen-Keywords. Die calc-size()-Funktion ist ausdrücklich definiert, um eine intrinsische Größe darzustellen, anstatt eines <length-percentage>. Dadurch wird die Korrektheit sichergestellt. calc-size() ermöglicht Berechnungen auf intrinsischen Größenwerten auf eine sichere, wohldefinierte 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 sind).

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

• Ein verschachtelter calc-size() Wert. Dies werden Sie wahrscheinlich nicht sehr häufig tun, aber es ist verfügbar, um sicherzustellen, 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() angewendet wird. Zum Beispiel funktioniert dies:

  css

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

  Ebenso wie dies:

  css

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

• Ein weiteres <calc-sum>, mit den gleichen Einschränkungen wie das für das zweite Argument spezifizierte <calc-sum>, mit der Ausnahme, dass das size-Keyword nicht enthalten sein darf. Dies werden Sie wahrscheinlich nicht tun, da Sie keine Berechnung auf einem intrinsischen Größenwert mehr durchführen, aber wenn ein benutzerdefinierter Eigenschaftswert ein <calc-sum> ist, funktioniert die Funktion dennoch. 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 Keyword any, das eine nicht spezifizierte bestimmte Größe darstellt. In diesem Fall kann das size-Keyword nicht im zweiten Argument enthalten sein, und das calc-size() gibt das Ergebnis der zweiten Argumentberechnung zurück. Zum Beispiel:

  css

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

Das Mischen unterschiedlicher intrinsischer Größen in derselben Berechnung funktioniert nicht. Zum Beispiel ergibt max-content - min-content keinen Sinn. calc-size() erlaubt in jeder Berechnung nur einen einzelnen intrinsischen Größenwert und vermeidet dadurch dieses Problem.

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

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

In diesem Ausdruck:

• Das Keyword size repräsentiert den als erstes Argument angegebenen <calc-size-basis>.
• Operanden können size sowie alle Werttypen, die in dem Kontext Sinn ergeben, enthalten.
• Die Operatoren +, -, * und / können enthalten sein.
• Andere mathematische Funktionen wie round(), max() oder sogar ein verschachteltes calc-size() können enthalten sein.
• Der gesamte Ausdruck muss <length-percentage> entsprechen und auf ein <length> auflösen.

Aktivieren von Animationen mit intrinsischen Größenwerten

calc-size() Rückgabewerte können interpoliert werden und ermöglichen dadurch Animationen zwischen einem <length-percentage> Wert und einem calc-size() intrinsischen Größenrückgabewert.

Zum Beispiel könnten Sie einen Übergang nutzen, um eine Containerbreite 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 gezeigten in den meisten Fällen einfacher zu implementieren, besonders wenn es mehrere Animationen zu berücksichtigen gibt. Es wird vererbt und muss daher nur einmal an einer Vorfahreigenschaft deklariert werden, was bedeutet, dass wir zwischen 0 und auto hätten wechseln können, ohne calc-size() zu verwenden.

Die calc-size() Funktion sollte nur dann verwendet werden, um Animationen mit intrinsischen Größen 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 Containerbreite zwischen fit-content und 70% von 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 Nutzung von calc-size

Dieses Beispiel zeigt die grundlegende Dimensionsängung 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: 400;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 0.8rem;
}

Im CSS verwenden wir flexbox, um die Kindelemente innerhalb des <section> zu zentrieren und die width und height des <section> auf calc-size() Funktionen zu setzen. 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 für den zentrierten Text geschaffen, ohne das Padding zu verwenden.

Grundlegende calc-size Animationen

Dieses Beispiel demonstriert, wie calc-size() verwendet wird, um zwischen einer bestimmten Größe und einer intrinsischen Größe zu animieren. Die Demo zeigt ein Charakterabzeichen/"Namensschild", das angesehen oder fokussiert werden kann, um Informationen über den Charakter zu offenbaren. Das Offenbaren erfolgt durch einen height Übergang zwischen einer festgelegten Länge und max-content.

HTML

Das HTML enthält ein einzelnes <section> Element mit tabindex="0" gesetzt, damit es den Tastaturfokus erhalten kann. Das <section> enthält <header> und <main> Elemente, die jeweils eigene Kindinhalte haben.

<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: 400;
  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 standardmäßig nur das <header> angezeigt wird. Anschließend spezifizieren wir einen transition, der die <section> height über 1 Sekunde bei Zustandsänderungen animiert. Schließlich setzen wir die <section> height auf einen calc-size() Funktionsaufruf bei :hover und :focus. Der Funktionsrückgabewert entspricht 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 über die Tastatur zu fokussieren — es wird auf seine volle Höhe + 2rem animiert, alle Inhalte mit 2rem zusätzlichem Platz am unteren Rand enthüllend.

Anpassung der Lesebreite basierend auf fit-content

Dieses Beispiel zeigt einen Container mit Text darin und einen Button, der angeklickt werden kann, um die Containerbreite je nach Lesepräferenz schmaler oder breiter zu machen.

HTML

Das HTML enthält ein einzelnes <section> Element mit Inhaltstext sowie einen <button> zur Änderung der <section> Breite.

<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 Standardwert von fit-content. Wir definieren dann zwei Sets von @keyframes, narrower, das von fit-content zu 70% von fit-content animiert (berechnet mit calc-size()), und wider, das dieselben Werte animiert, jedoch in die entgegengesetzte Richtung. Schließlich binden wir diese Animationen an zwei Klassen — .narrower und .wider. Jede Animation ist so definiert, dass sie eine Sekunde dauert und den Endzustand angewendet hä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 einen Schalter für schmaler/breiter, der die relevante Klasse auf das <section> anwendet, wenn der Button angeklickt 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> einige Male anzuklicken, um das <section> zwischen der weiten und schmalen Lesebreite anzupassen, erreicht durch Manipulation der width basierend auf dem fit-content Wert.

Verwendung einer Funktion innerhalb der calc-size() Funktion

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

HTML

Das HTML enthält ein <form> Element, das drei textuelle <input> Typen enthält. Jedes <input> hat ein <label>, das damit verbunden ist, um das Formular zugänglich zu machen, und eine maxlength, die angewendet wird, um zu verhindern, dass eingegebene Werte so lang werden, dass sie das Formularlayout sprengen.

<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 eingegeben wird. 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 wenn kein Wert eingegeben ist. Wenn ein eingegebener Wert breiter als 100px wird, ändert sich ihre width zu fit-content plus 20px, was bedeutet, dass sie mit der Inhaltgröße wachsen, aber einen 20px Abstand auf der rechten Seite halten.

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, einige Texte in die Formulareingaben einzugeben, und beobachten Sie, wie sie wachsen, wenn die Werte anfangen, so breit wie die durch die max() Funktion erzwungene Mindestbreite zu werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• interpolate-size
• calc()
• round()
• Animate to height: auto; (and other intrinsic sizing keywords) in CSS auf developer.chrome.com (2024)