sqrt()

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die sqrt() CSS Funktion ist eine exponentielle Funktion, die die Quadratwurzel einer Zahl zurückgibt.

Die Funktion pow(x, 0.5) ist gleichbedeutend mit sqrt(x).

Syntax

css
/* A <number> value */
width: calc(100px * sqrt(9)); /*  300px */
width: calc(100px * sqrt(25)); /*  500px */
width: calc(100px * sqrt(100)); /* 1000px */

Parameter

Die sqrt(x) Funktion akzeptiert nur einen Wert als Parameter.

x

Eine Berechnung, die sich zu einer <number> größer oder gleich 0 auflöst.

Rückgabewert

Gibt eine <number> zurück, die die Quadratwurzel von x ist.

  • Wenn x +∞ ist, ist das Ergebnis +∞.
  • Wenn x 0⁻ ist, ist das Ergebnis 0⁻.
  • Wenn x kleiner als 0 ist, ist das Ergebnis NaN.

Formale Syntax

<sqrt()> = 
sqrt( <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

Größen basierend auf der Quadratwurzel skalieren

Dieses Beispiel zeigt, wie Sie die sqrt() Funktion verwenden können, um Größen zu berechnen.

HTML

html
<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>

CSS

Hier verwenden wir CSS-Custom-Properties, um die zu verwendenden Größen zu definieren. Zuerst deklarieren wir die erste Größe (--size-0), die dann verwendet wird, um die anderen Größen zu berechnen.

  • --size-1 wird berechnet, indem der Wert von --size-0 (50px) mit der Quadratwurzel von 4 (2) multipliziert wird, was 100px ergibt.
  • --size-2 wird berechnet, indem der Wert von --size-0 (50px) mit der Quadratwurzel von 9 (3) multipliziert wird, was 150px ergibt.
  • --size-3 wird berechnet, indem der Wert von --size-0 (50px) mit der Quadratwurzel von 16 (4) multipliziert wird, was 200px ergibt.
css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /*  100px */
  --size-2: calc(var(--size-0) * sqrt(9)); /*  150px */
  --size-3: calc(var(--size-0) * sqrt(16)); /*  200px */
}

Die Größen werden dann als width und height Werte der Selektoren angewendet.

css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

Ergebnis

Spezifikationen

Specification
CSS Values and Units Module Level 4
# exponent-funcs

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
sqrt()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch