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.

Ein Logarithmus ist die Umkehrung der Exponentiation. Er ist die Zahl, zu der eine feste Basis erhoben werden muss, um die Zahl zu ergeben, die als erster Parameter übergeben wird.

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

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 Funktion log(value [, base]?) akzeptiert zwei durch Kommas getrennte Werte als ihre Parameter.

value: Eine Berechnung, die auf ein <number> größer oder gleich 0 auflöst. Sie stellt den Wert dar, von dem der Logarithmus genommen wird.
base: Optional. Eine Berechnung, die auf ein <number> größer oder gleich 0 auflöst. Sie stellt die Basis des Logarithmus dar. Wenn nicht definiert, wird die Standard-Logarithmus-Basis e verwendet.

Rückgabewert

Der Logarithmus des value, wenn base definiert ist.

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

Formaler 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 unter Verwendung einer logarithmischen Skala zu visualisieren. Die Breite jeder Leiste in diesem Beispiel ist relativ zu ihrem Datenwert auf einer logarithmischen Skala mit Basis 10. Auf jedem Element wird sein Wert einer CSS-Benutzerdefinierten Eigenschaft 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);
}

.bar {
  height: 2em;
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25em 0;
}

Ergebnis

Spezifikationen

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