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.

Logarithmen sind die Umkehrung der Exponentiation. Es ist die Zahl, auf die eine feste Basis erhöht werden 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 jeden 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 log(value [, base]?) Funktion akzeptiert zwei durch Kommas getrennte Werte als Parameter.

value: Eine Berechnung, die auf einen <number> größer oder gleich 0 auflöst. Repräsentiert den Wert, von dem der Logarithmus genommen werden soll.
base: Optional. Eine Berechnung, die auf einen <number> größer oder gleich 0 auflöst. Repräsentiert die Basis des Logarithmus. Wenn nicht definiert, wird die Standardlogarithmus-Basis e 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 zeigt, wie die log()-Funktion verwendet werden kann, um Datenwerte durch die 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 benutzerdefinierten CSS-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