log()

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 log() CSS Funktion ist eine exponentielle Funktion, die den Logarithmus einer Zahl zurückgibt.

Der Logarithmus ist das Inverse der Potenzierung. Es handelt sich um die Zahl, zu der eine feste Basis potenziert werden muss, um die als erster Parameter übergebene Zahl zu erhalten.

In CSS, wenn ein einzelner Parameter übergeben wird, wird der natürliche Logarithmus e, oder ungefähr 2.7182818, verwendet, obwohl die Basis mit einem optionalen zweiten Parameter auf einen beliebigen Wert gesetzt werden kann.

Syntax

css
/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */

Parameter

Die log(value [, base]?) Funktion akzeptiert zwei durch Komma getrennte Werte als Parameter.

value

Eine Berechnung, die sich zu einem <number> größer oder gleich 0 auflöst. Repräsentiert den Wert, dessen Logarithmus berechnet werden soll.

base

Optional. Eine Berechnung, die sich zu einem <number> größer oder gleich 0 auflöst. Repräsentiert die Basis des Logarithmus. Wenn nicht definiert, wird die Standardbasis e für den Logarithmus verwendet.

Rückgabewert

Der Logarithmus von value, wenn base definiert ist.

Der natürliche Logarithmus (Basis e) von value, wenn base nicht definiert ist.

Formale Syntax

<log()> = 
log( <calc-sum> , <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

Verwendung der log() Funktion auf einer logarithmischen Skala

Dieses Beispiel veranschaulicht, wie die log() Funktion verwendet werden kann, um Datenwerte mithilfe einer logarithmischen Skala zu visualisieren. Die Breite jedes Balkens in diesem Beispiel ist relativ zu seinem Datenwert auf einer logarithmischen Skala mit der Basis 10. Auf jedem Element wird sein Wert einer CSS-Benutzervariable namens --value zugewiesen, die dann von der .bar Klasse verwendet wird, um ihre Breite zu berechnen.

HTML

html
<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>

CSS

css
.bar {
  width: calc(log(var(--value), 10) * 2em);
}

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
log()

Legend

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

Full support
Full support
No support
No support

Siehe auch