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 das Inverse der Exponentiation. Es ist die Zahl, zu der eine feste Basis angehoben werden muss, um die Zahl zu ergeben, die als erster Parameter übergeben wird.

In CSS, wenn nur ein 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 Funktion log(value [, base]?) akzeptiert zwei durch Komma getrennte Werte als Parameter.

value: Eine Berechnung, die sich zu einer <number> größer als oder gleich 0 auflöst. Sie repräsentiert den Wert, dessen Logarithmus genommen werden soll.
base: Optional. Eine Berechnung, die sich zu einer <number> größer als oder gleich 0 auflöst. Sie repräsentiert die Basis des Logarithmus. Wenn nicht definiert, wird die logarithmische Basis e standardmäßig 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 zur Visualisierung von Datenwerten mittels einer logarithmischen Skala verwendet werden kann. Die Breite jeder Leiste in diesem Beispiel ist relativ zu ihrem Datenwert auf einer logarithmischen Skala mit Basis 10. In jedem Element wird sein Wert einer CSS Custom Property 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

Browser-Kompatibilität

BCD tables only load in the browser