log()
Baseline 2023Newly 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
/* 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 Standardbasise
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
<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
.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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
log() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support