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 Exponentialfunktion, die den Logarithmus einer Zahl zurückgibt.
Ein Logarithmus ist das Inverse der Exponentiation. Es ist die Zahl, auf die eine feste Basis potenziert werden muss, um die als erster Parameter übergebene Zahl zu ergeben.
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 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 Funktion log(value [, base]?) akzeptiert zwei kommagetrennte Werte als Parameter.
value-
Eine Berechnung, die sich zu einem
<number>größer gleich 0 auflöst. Sie stellt den Wert dar, dessen Logarithmus genommen werden soll. base-
Optional. Eine Berechnung, die sich zu einem
<number>größer gleich 0 auflöst. Sie stellt die Basis des Logarithmus dar. Wenn sie nicht definiert ist, wird die Standard-Logarithmus-Basiseverwendet.
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 auf einer logarithmischen Skala zu visualisieren. Die Breite jeder Stange in diesem Beispiel ist relativ zu ihrem Datenwert auf einer logarithmischen Skala mit Basis 10. Auf jedem Element wird der Wert einer CSS- benutzerdefinierten Eigenschaft namens --value zugewiesen, der 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 |