log()

Базовая версия 2023

Новая функция

С декабря 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, она не будет работать на более старых устройствах или браузерах.

Функция log() CSS функция представляет собой экспоненциальную функцию, которая возвращает логарифм числа.

Логарифм — это обратная операция возведения в степень. Это число, к которому необходимо возвести фиксированное основание, чтобы получить число, переданное в качестве первого параметра.

В CSS, когда передаётся один параметр, используется натуральный логарифм e, или приблизительно 2.7182818, хотя основание можно установить на любое значение с помощью дополнительного второго параметра.

Синтаксис

/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */

Параметры

Функция log(value [, base]?) принимает два разделенных запятыми значения в качестве параметров.

value: Вычисление, результатом которого является <number> больше или равно 0. Представляет значение, логарифм которого нужно вычислить.
base: Необязательно. Вычисление, результатом которого является <number> больше или равно 0. Представляет основание логарифма. Если не определено, используется значение по умолчанию для логарифмического основания e.

Возвращаемое значение

Логарифм value, когда base определено.

Натуральный логарифм (основание e) от value, когда base не определено.

Формальный синтаксис

<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

Примеры

Использование функции `log()` на логарифмической шкале

Этот пример демонстрирует, как функция log() может использоваться для визуализации значений данных с помощью логарифмической шкалы. Ширина каждой полосы в этом примере относительна к её значению данных на логарифмической шкале с основанием 10. Для каждого элемента его значение присваивается CSS кастомной переменной с именем --value, которая затем используется классом .bar для расчета её ширины.

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);
}

Результат

Спецификации

Спецификация
CSS Values and Units Module Level 4 # exponent-funcs

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`log`	120	120	118	106	15.4	120	118	80	15.4	25.0	120

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/log