Add missing Formal syntax section for css functions [m-r] (#37211)

* Add missing Formal syntax section for css functions * Update files/en-us/web/css/basic-shape/polygon/index.md * Update index.md * Update index.md
mdn · Dec 14, 2024 · 802978f · 802978f
1 parent 5332af3
commit 802978f
Show file tree

Hide file tree

Showing 24 changed files with 70 additions and 18 deletions.
diff --git a/files/en-us/web/css/basic-shape/rect/index.md b/files/en-us/web/css/basic-shape/rect/index.md
@@ -31,6 +31,10 @@ The inset rectangle is defined by specifying four offset values, starting with t
 - `round <'border-radius'>`
   - : Specifies the radius of the rounded corners of the rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. This parameter is optional.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Creating offset-path using rect()

diff --git a/files/en-us/web/css/color_value/oklab/index.md b/files/en-us/web/css/color_value/oklab/index.md
@@ -143,9 +143,9 @@ oklab(from hsl(0 100% 50%) calc(l + 0.2) calc(a - 0.08) calc(b - 0.2) / calc(alp
 > [!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/rgb/index.md b/files/en-us/web/css/color_value/rgb/index.md
@@ -143,9 +143,9 @@ rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1
 > [!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/filter-function/opacity/index.md b/files/en-us/web/css/filter-function/opacity/index.md
@@ -25,6 +25,10 @@ opacity(amount)
 - `amount`
   - : The amount of the conversion, specified as a {{cssxref("&lt;number&gt;")}} or a {{cssxref("&lt;percentage&gt;")}}. A value of `0%` is completely transparent, while a value of `100%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is `1`.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Examples of correct values for opacity()

diff --git a/files/en-us/web/css/font-palette/palette-mix/index.md b/files/en-us/web/css/font-palette/palette-mix/index.md
@@ -53,6 +53,10 @@ palette-mix(method, palette1 [p1], palette2 [p2])
     - If `p1 = p2 = 0%`, the function is invalid.
     - If `p1 + p2 ≠ 100%`, then `p1' = p1 / (p1 + p2)` and `p2' = p2 / (p1 + p2)`, where `p1'` and `p2'` are the normalization results.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Using `palette-mix()` to blend two palettes

diff --git a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md
@@ -99,9 +99,9 @@ If two or more color stops are at the same location, the transition will be a ha
 
 While you can mix and match different angle units, don't. It makes CSS hard to read.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Accessibility
 

diff --git a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md
@@ -67,9 +67,9 @@ repeating-linear-gradient(in hsl longer hue, blue, red 50px)
 > [!NOTE]
 > Rendering of color stops in repeating linear gradients follows the same rules as [color stops in linear gradients](/en-US/docs/Web/CSS/gradient/linear-gradient#composition_of_a_linear_gradient).
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/gradient/repeating-radial-gradient/index.md b/files/en-us/web/css/gradient/repeating-radial-gradient/index.md
@@ -55,9 +55,9 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)
 - `<color-stop>`
   - : A color-stop's {{cssxref("&lt;color&gt;")}} value, followed by an optional stop position (either a {{cssxref("&lt;percentage&gt;")}} or a {{cssxref("&lt;length&gt;")}} along the gradient's axis). A percentage of `0%`, or a length of `0`, represents the center of the gradient; the value `100%` represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the virtual gradient ray.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/image/paint/index.md b/files/en-us/web/css/image/paint/index.md
@@ -22,6 +22,10 @@ where:
 - _parameters_ {{optional_inline}}
   - : Optional additional parameters to pass to the paintWorklet
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Basic CSS paint() usage

diff --git a/files/en-us/web/css/max/index.md b/files/en-us/web/css/max/index.md
@@ -28,7 +28,7 @@ You can use different units for each value in your expression. You may also use
 - The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any \<length> syntax value.
 - You can (and often need to) combine `min()` and `max()` values, or use `max()` within a `clamp()` or `calc()` function.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/min/index.md b/files/en-us/web/css/min/index.md
@@ -29,7 +29,7 @@ You can use different units for each value in your expression, if you wish. You
 - You can (and often need to) combine `min()` and `max()` values, or use `min()` within a `clamp()` or `calc()` function.
 - You can provide more than two arguments, if you have multiple constraints to apply.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/minmax/index.md b/files/en-us/web/css/minmax/index.md
@@ -62,9 +62,9 @@ If _max_ < _min_, then _max_ is ignored and `minmax(min,max)` is treated as _min
   - : As `min`, it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
     As `max`, it is identical to `max-content`. However, unlike `max-content`, it allows expansion of the track by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} property values like `normal` and `stretch`.
 
-### Formal syntax
+## Formal syntax
 
-{{csssyntax}}
+{{CSSSyntax}}
 
 ### CSS properties
 

diff --git a/files/en-us/web/css/mod/index.md b/files/en-us/web/css/mod/index.md
@@ -57,7 +57,7 @@ Returns a {{CSSxREF("&lt;number&gt;")}}, {{CSSxREF("&lt;dimension&gt;")}}, or {{
 - If `dividend` is `infinite`, the result is `NaN`.
 - If `divisor` is positive the result is positive (`0⁺`), and if `divisor` is negative the result is negative (`0⁻`).
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/rem/index.md b/files/en-us/web/css/rem/index.md
@@ -60,7 +60,7 @@ Returns a {{CSSxREF("&lt;number&gt;")}}, {{CSSxREF("&lt;dimension&gt;")}}, or {{
 - If `dividend` is `infinite`, the result is `NaN`.
 - If `dividend` is positive the result is positive (`0⁺`), and if `dividend` is negative the result is negative (`0⁻`).
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/repeat/index.md b/files/en-us/web/css/repeat/index.md
@@ -118,6 +118,10 @@ There is a fourth form, `<name-repeat>`, which is used to add line names to subg
 - `min-content`
   - : Represents the largest min-content contribution of the grid items occupying the grid track.
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Specifying grid columns using repeat()

diff --git a/files/en-us/web/css/round/index.md b/files/en-us/web/css/round/index.md
@@ -66,7 +66,7 @@ The value of `valueToRound`, rounded to the nearest lower or higher integer mult
 - The argument calculations can resolve to {{CSSxREF("&lt;number&gt;")}}, {{CSSxREF("&lt;dimension&gt;")}}, or {{CSSxREF("&lt;percentage&gt;")}}, but must have the same type, or else the function is invalid; the result will have the same type as the arguments.
 - If `valueToRound` is exactly equal to an integer multiple of `roundingInterval`, `round()` resolves to `valueToRound` exactly (preserving whether `valueToRound` is `0⁻` or `0⁺`, if relevant). Otherwise, there are two integer multiples of `roundingInterval` that are potentially "closest" to `valueToRound`, lower `roundingInterval` which is closer to `−∞` and upper `roundingInterval` which is closer to `+∞`.
 
-### Formal syntax
+## Formal syntax
 
 {{CSSSyntax}}
 

diff --git a/files/en-us/web/css/transform-function/matrix/index.md b/files/en-us/web/css/transform-function/matrix/index.md
@@ -70,7 +70,11 @@ matrix(a, b, c, d, tx, ty)
 </table>
 
 The values represent the following functions:
-`matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`
+`matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`.
+
+## Formal syntax
+
+{{CSSSyntax}}
 
 ## Examples
 

diff --git a/files/en-us/web/css/transform-function/matrix3d/index.md b/files/en-us/web/css/transform-function/matrix3d/index.md
@@ -54,6 +54,10 @@ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Cube squashing example

diff --git a/files/en-us/web/css/transform-function/perspective/index.md b/files/en-us/web/css/transform-function/perspective/index.md
@@ -74,6 +74,10 @@ perspective(d)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### HTML

diff --git a/files/en-us/web/css/transform-function/rotate/index.md b/files/en-us/web/css/transform-function/rotate/index.md
@@ -72,6 +72,10 @@ rotate(a)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Basic example

diff --git a/files/en-us/web/css/transform-function/rotate3d/index.md b/files/en-us/web/css/transform-function/rotate3d/index.md
@@ -78,6 +78,10 @@ rotate3d(x, y, z, a)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### Rotating on the y-axis

diff --git a/files/en-us/web/css/transform-function/rotatex/index.md b/files/en-us/web/css/transform-function/rotatex/index.md
@@ -64,6 +64,10 @@ rotateX(a)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### HTML

diff --git a/files/en-us/web/css/transform-function/rotatey/index.md b/files/en-us/web/css/transform-function/rotatey/index.md
@@ -64,6 +64,10 @@ rotateY(a)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### HTML

diff --git a/files/en-us/web/css/transform-function/rotatez/index.md b/files/en-us/web/css/transform-function/rotatez/index.md
@@ -65,6 +65,10 @@ rotateZ(a)
   </tbody>
 </table>
 
+## Formal syntax
+
+{{CSSSyntax}}
+
 ## Examples
 
 ### HTML