log() - New CSS functional notation (mdn#20812)

* `log()` - New CSS functional notation * typos * Update files/en-us/web/css/log/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/log/index.md Co-authored-by: Estelle Weyl <[email protected]> * Add calculation to Syntax section * Update index.md * Update index.md * Parameters: replace `x` & `y` with `value` & `base` * Fix markdown lint error * Update index.md Co-authored-by: Estelle Weyl <[email protected]>
samwilson · Sep 20, 2022 · 91c060c · 91c060c
1 parent 70ee2d9
commit 91c060c
Showing 1 changed file with 67 additions and 0 deletions.
diff --git a/files/en-us/web/css/log/index.md b/files/en-us/web/css/log/index.md
@@ -0,0 +1,67 @@
+---
+title: log()
+slug: Web/CSS/log
+tags:
+  - CSS
+  - CSS Function
+  - Function
+  - Math
+  - Reference
+  - Web
+  - log
+  - Experimental
+browser-compat: css.types.log
+spec-urls: https://www.w3.org/TR/css-values-4/#exponent-funcs
+---
+
+{{CSSRef}}{{SeeCompatTable}}
+
+The **`log()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is an exponential function that returns the logarithm of a number.
+
+The [logarithm, or log](https://en.wikipedia.org/wiki/Logarithm), is the inverse of {{CSSxRef("exp", "exponentiation")}}; it is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.
+
+In CSS, when a single parameter is passed, the natural logarithm `e`, or approximately `2.7182818`, is used, though the base can be set to any value with an optional second parameter.
+
+## 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 */
+```
+
+### Parameters
+
+The `log(value, base?)` function accepts two comma-separated values as its parameters.
+
+- `value`
+  - : A {{cssxref("&lt;number&gt;")}} greater than or equal to 0. Representing the value to be logarithmed.
+
+- `base`
+  - : Optional. A {{cssxref("&lt;number&gt;")}} greater than or equal to 0. Representing the base of the logarithm. If not defined, the default logarithmic base `e` is used.
+
+### Return value
+
+The logarithm of `value`, when `base` is defined.
+
+The natural logarithm (base `e`) of `value`, when `base` is not defined.
+
+### Formal syntax
+
+{{CSSSyntax}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSxRef("pow")}}
+- {{CSSxRef("sqrt")}}
+- {{CSSxRef("hypot")}}
+- {{CSSxRef("exp")}}