Add missing Formal syntax section for css functions [a-l] (#37212)

* Add missing Formal syntax section for css functions [a-l] * Update files/en-us/web/css/image/image/index.md
mdn · Dec 14, 2024 · 5332af3 · 5332af3
1 parent f651109
commit 5332af3
Show file tree

Hide file tree

Showing 32 changed files with 82 additions and 46 deletions.
diff --git a/files/en-us/web/css/@import/layer_function/index.md b/files/en-us/web/css/@import/layer_function/index.md
@@ -20,12 +20,7 @@ The `framework.themes.dark` is the layer into which the CSS file would be import
 
 ## Formal syntax
 
-```plain
-layer() = layer( <layer-name> )
-
-<layer-name> =
-  <ident> [ '.' <ident> ]*
-```
+{{CSSSyntax}}
 
 ## Specifications
 

diff --git a/files/en-us/web/css/abs/index.md b/files/en-us/web/css/abs/index.md
@@ -30,7 +30,7 @@ The absolute value of `x`.
 - if `x`'s numeric value is positive or `0⁺`, return `x`.
 - Otherwise, returns `-1 * x`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/acos/index.md b/files/en-us/web/css/acos/index.md
@@ -35,7 +35,7 @@ The inverse cosine of an `number` will always return an {{cssxref("&lt;angle&gt;
 - If `number` is less than `-1` or greater than `1`, the result is `NaN`.
 - If `number` is exactly `1`, the result is `0`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/anchor-size/index.md b/files/en-us/web/css/anchor-size/index.md
@@ -143,9 +143,9 @@ This rule sizes the positioned element's inline size to 4 times the anchor eleme
 }
 ```
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/asin/index.md b/files/en-us/web/css/asin/index.md
@@ -35,7 +35,7 @@ The inverse sine of an `number` will always return an {{cssxref("&lt;angle&gt;")
 - If `number` is less than `-1` or greater than `1`, the result is `NaN`.
 - If `number` is `0⁻`, the result is `0⁻`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/atan/index.md b/files/en-us/web/css/atan/index.md
@@ -44,7 +44,7 @@ That is:
 - `atan(1)` representing `45deg`
 - `atan(infinity)` representing `90deg`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/atan2/index.md b/files/en-us/web/css/atan2/index.md
@@ -39,7 +39,7 @@ The `atan2(y, x)` function accepts two comma-separated values as its parameters.
 
 Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns the {{cssxref("&lt;angle&gt;")}} between the positive x-axis and the ray from the origin to the point `(x, y)`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md
@@ -143,7 +143,7 @@ attr(data-something, "default");
 - `<fallback>`
   - : The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each `<type-or-unit>`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/clamp/index.md b/files/en-us/web/css/clamp/index.md
@@ -58,7 +58,7 @@ Keep the following aspects in mind while working with the function:
 
 Based on the provided parameters, the function returns {{CSSxRef("&lt;length&gt;")}}, {{CSSxRef("&lt;frequency&gt;")}}, {{CSSxRef("&lt;angle&gt;")}}, {{CSSxRef("&lt;time&gt;")}}, {{CSSxRef("&lt;percentage&gt;")}}, {{CSSxRef("&lt;number&gt;")}}, or {{CSSxRef("&lt;integer&gt;")}}.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md
@@ -58,9 +58,9 @@ Functional notation: `color-mix(<color-interpolation-method>, <color>[<percentag
     - If `p1 + p2 ≠ 100%`, then `p1' = p1 / (p1 + p2)` and `p2' = p2 / (p1 + p2)`, where `p1'` and `p2'` are the normalization results.
       - If `p1 + p2 < 100%`, then an alpha multiplier of `p1 + p2` is applied to the resulting color. This is similar to mixing in [`transparent`](/en-US/docs/Web/CSS/named-color#transparent), with percentage `pt = 100% - p1 - p2`.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/color_value/color/index.md b/files/en-us/web/css/color_value/color/index.md
@@ -149,9 +149,9 @@ color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(
 > [!NOTE]
 > Because the origin color channel values are resolved to `<number>` values, you have to add numbers to them when using them in calculations, even in cases where a channel would normally accept `<percentage>`, `<angle>`, or other value types. Adding a `<percentage>` to a `<number>`, for example, doesn't work.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/color_value/device-cmyk/index.md b/files/en-us/web/css/color_value/device-cmyk/index.md
@@ -35,9 +35,9 @@ Functional notation: `device-cmyk(C M Y K[ / A][, color])`
 
   - : An optional fallback {{CSSXref("&lt;color&gt;")}} to use if the user agent does not know how to translate the CMYK color to RGB.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Specifications
 

diff --git a/files/en-us/web/css/color_value/hsl/index.md b/files/en-us/web/css/color_value/hsl/index.md
@@ -163,9 +163,9 @@ hsl(from rgb(255 0 0 / 0.8) calc(h + 60) calc(s - 20) calc(l - 10) / calc(alpha
 > [!NOTE]
 > Because the origin color channel values are resolved to `<number>` values, you have to add numbers to them when using them in calculations, even in cases where a channel would normally accept `<percentage>`, `<angle>`, or other value types. Adding a `<percentage>` to a `<number>`, for example, doesn't work.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/color_value/lab/index.md b/files/en-us/web/css/color_value/lab/index.md
@@ -140,9 +140,9 @@ lab(from hsl(0 100% 50%) calc(l + 20) calc(a - 20) calc(b - 40) / calc(alpha - 0
 > [!NOTE]
 > Because the origin color channel values are resolved to `<number>` values, you have to add numbers to them when using them in calculations, even in cases where a channel would normally accept `<percentage>`, `<angle>`, or other value types. Adding a `<percentage>` to a `<number>`, for example, doesn't work.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/color_value/light-dark/index.md b/files/en-us/web/css/color_value/light-dark/index.md
@@ -46,9 +46,9 @@ Functional notation: `light-dark(light-color, dark-color)`
 - `dark-color`
   - : {{CSSXref("&lt;color&gt;")}} value to be set for dark {{CSSXref("color-scheme")}}.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Example
 

diff --git a/files/en-us/web/css/cos/index.md b/files/en-us/web/css/cos/index.md
@@ -39,7 +39,7 @@ The cosine of an `angle` will always return a number between `−1` and `1`.
 
 - If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/counter/index.md b/files/en-us/web/css/counter/index.md
@@ -38,7 +38,7 @@ The `counter()` function accepts up to two parameters. The first parameter is th
 > [!NOTE]
 > To join the counter values when nesting counters, use the {{cssxref("counters", "counters()")}} function, which provides an additional {{cssxref("string")}} parameter.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/counters/index.md b/files/en-us/web/css/counters/index.md
@@ -43,7 +43,7 @@ The return value is a string containing all the values of all the counters in th
 > [!NOTE]
 > For information about non-concatenated counters, see the {{cssxref("counter", "counter()")}} function, which omits the `<string>` as a parameter.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/element/index.md b/files/en-us/web/css/element/index.md
@@ -26,6 +26,10 @@ where:
 - _id_
   - : The ID of an element to use as the background, specified using the HTML attribute #_id_ on the element.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 These examples work in builds of Firefox that support `-moz-element()`.

diff --git a/files/en-us/web/css/env/index.md b/files/en-us/web/css/env/index.md
@@ -45,7 +45,7 @@ env(safe-area-inset-left, 1.4rem);
 > [!NOTE]
 > Unlike other CSS properties, user agent-defined property names are case-sensitive.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/exp/index.md b/files/en-us/web/css/exp/index.md
@@ -38,7 +38,7 @@ Returns a non-negative {{CSSxRef("number")}} representing e<sup>number</sup>, wh
 - If `number` is `1`, the result is `e` (i.e. `2.718281828459045`).
 - If `number` is `Infinity`, the result is `Infinity`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/filter-function/blur/index.md b/files/en-us/web/css/filter-function/blur/index.md
@@ -52,6 +52,10 @@ filter: url(#blur11); /* with embedded SVG */
 filter: url(folder/fileName.svg#blur11); /* external svg filter definition */
 ```
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 This example shows three images: the image with a `blur()` filter function applied, the image with the equivalent SVG blur function applied, and the original images for comparison:

diff --git a/files/en-us/web/css/filter-function/brightness/index.md b/files/en-us/web/css/filter-function/brightness/index.md
@@ -38,9 +38,9 @@ brightness(2) /* Brightness of input is doubled */
 brightness(200%)
 ```
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/filter-function/contrast/index.md b/files/en-us/web/css/filter-function/contrast/index.md
@@ -38,9 +38,9 @@ contrast(2)  /* Double contrast */
 contrast(200%)
 ```
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/filter-function/grayscale/index.md b/files/en-us/web/css/filter-function/grayscale/index.md
@@ -22,6 +22,10 @@ grayscale(amount)
 - `amount`
   - : Amount of the input image that is converted to grayscale. It is specified as a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}}. A value of `100%` changes the input completely to grayscale, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` have linear multipliers on the effect. If the `grayscale()` filter is present with no parameter, the default value is `1`. The initial value used for {{Glossary("interpolation")}} is `0`.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Examples of correct values for grayscale()

diff --git a/files/en-us/web/css/filter-function/hue-rotate/index.md b/files/en-us/web/css/filter-function/hue-rotate/index.md
@@ -36,9 +36,9 @@ hue-rotate(3.14159rad)
 hue-rotate(0.5turn)
 ```
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/filter-function/invert/index.md b/files/en-us/web/css/filter-function/invert/index.md
@@ -22,6 +22,10 @@ invert(amount)
 - `amount`
   - : The amount of the conversion, specified as a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}}. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is `0`.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Examples of correct values for invert()

diff --git a/files/en-us/web/css/fit-content_function/index.md b/files/en-us/web/css/fit-content_function/index.md
@@ -44,6 +44,10 @@ fit-content(40%)
 
     In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Sizing grid columns with fit-content

diff --git a/files/en-us/web/css/hypot/index.md b/files/en-us/web/css/hypot/index.md
@@ -36,7 +36,7 @@ Returns a {{CSSxRef("&lt;number&gt;")}}, {{CSSxRef("&lt;dimension&gt;")}}, or {{
 - If any of the inputs is `infinite`, the result is `+∞`.
 - If a single parameter is provided, the result is the absolute value of its input. `hypot(2em)` and `hypot(-2em)` both resolve to `2em`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/image/image-set/index.md b/files/en-us/web/css/image/image-set/index.md
@@ -51,9 +51,9 @@ image-set(
 - `type(<string>)` {{optional_inline}}
   - : A valid MIME type string, for example "image/jpeg".
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Accessibility
 

diff --git a/files/en-us/web/css/image/image/index.md b/files/en-us/web/css/image/image/index.md
@@ -2,7 +2,7 @@
 title: image()
 slug: Web/CSS/image/image
 page-type: css-function
-browser-compat: css.types.image.image
+spec-urls: https://drafts.csswg.org/css-images-4/#funcdef-image
 ---
 
 {{CSSRef}}
@@ -14,9 +14,26 @@ The **`image()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_
 
 ## Syntax
 
-{{CSSSyntax}}
+```css-nolint
+/* Basic usage */
+image("image1.jpg");
+image(url("image2.jpg"));
+
+/* Bidi-sensitive Images */
+image(ltr "image1.jpg");
+image(rtl "image1.jpg");
+
+/* Image Fallbacks */
+image("image1.jpg", black);
 
-where:
+/* Image Fragments */
+image("image1.jpg#xywh=40,0,20,20");
+
+/* Solid-color Images */
+image(rgba(0,0,255,.5)), url("bg-image.png");
+```
+
+### Values
 
 - `image-tags` {{optional_inline}}
   - : The directionality of the image, either `ltr` for left-to-right or `rtl` for right-to-left.
@@ -59,6 +76,10 @@ Omitting image sources while including a color is valid and creates a color swat
 
 The size of the color swatch can be set with the {{CSSxRef("background-size")}} property. This is different from the `background-color`, which sets a color to cover the entire element. Both `image(color)` and `background-color` placements are impacted by the {{CSSxRef("background-clip")}} and {{CSSxRef("background-origin")}} properties.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Accessibility
 
 Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
@@ -139,7 +160,7 @@ The above will put a semi-transparent black mask over the Firefox logo backgroun
 
 ## Browser compatibility
 
-{{Compat}}
+There is no browser implementing this feature.
 
 ## See also
 

diff --git a/files/en-us/web/css/log/index.md b/files/en-us/web/css/log/index.md
@@ -39,7 +39,7 @@ The logarithm of `value`, when `base` is defined.
 
 The natural logarithm (base `e`) of `value`, when `base` is not defined.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}