log() CSS function
Baseline
2023
Neu verfügbar
Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die log() CSS Funktion ist eine exponentielle Funktion, die den Logarithmus einer Zahl zurückgibt.
Ein Logarithmus ist die Umkehrung der Exponentiation. Es ist die Zahl, die eine feste Basis potenziert ergeben muss, um die als erster Parameter übergebene Zahl zu erhalten.
In CSS wird, wenn ein einzelner Parameter übergeben wird, der natürliche Logarithmus e oder ungefähr 2.7182818 verwendet, obwohl die Basis mit einem optionalen zweiten Parameter auf einen beliebigen Wert festgelegt 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 Funktion log(value [, base]?) akzeptiert zwei durch Komma getrennte Werte als Parameter.
value-
Eine Berechnung, die sich zu einem
<number>größer oder gleich 0 auflöst. Sie stellt den Wert dar, dessen Logarithmus berechnet werden soll. base-
Optional. Eine Berechnung, die sich zu einem
<number>größer oder gleich 0 auflöst. Sie stellt die Basis des Logarithmus dar. Wenn nicht definiert, wird die Standard-Logarithmusbasiseverwendet.
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 zeigt, wie die log() Funktion verwendet werden kann, um Datenwerte mit einer logarithmischen Skala zu visualisieren. Die Breite jeder Leiste in diesem Beispiel ist relativ zu ihrem Datenwert auf einer logarithmischen Skala mit der Basis 10. Für jedes Element wird dessen Wert einer CSS-Custom-Property mit dem Namen --value zugewiesen, die dann von der .bar Klasse zur Berechnung ihrer Breite verwendet wird.
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
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |