### Layout for input type="search"

Layout for `input type="search"` has been updated. This causes a search field to have a clear icon once someone starts typing in it, to match other browser implementations. (See [Firefox bug 558594](https://bugzil.la/558594) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>81</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>81</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>81</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>81</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.forms.input-type-search.enabled</code></td>

</tr>

</tbody>

</table>

### Toggle password display

HTML password input elements ([`<input type="password">`](/en-US/docs/Web/HTML/Element/input/password)) include an "eye" icon that can be toggled to display or obscure the password text ([Firefox bug 502258](https://bugzil.la/502258)).

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>96</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>96</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>96</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>96</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.forms.reveal-password-button.enabled</code></td>

</tr>

</tbody>

</table>

### Hex boxes to display stray control characters

This feature renders control characters (Unicode category Cc) other than _tab_ (`U+0009`), _line feed_ (`U+000A`), _form feed_ (`U+000C`), and _carriage return_ (`U+000D`) as a hexbox when they are not expected. (See [Firefox bug 1099557](https://bugzil.la/1099557) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>43</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>43</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>43</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>43</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2">

<code>layout.css.control-characters.enabled</code> or

<code>layout.css.control-characters.visible</code>

</td>

</tr>

</tbody>

</table>

### initial-letter property

The {{cssxref("initial-letter")}} CSS property is part of the [CSS Inline Layout](https://drafts.csswg.org/css-inline/) specification and allows you to specify how dropped, raised, and sunken initial letters are displayed. (See [Firefox bug 1223880](https://bugzil.la/1223880) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>50</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>50</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>50</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>50</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.initial-letter.enabled</code></td>

</tr>

</tbody>

</table>

### `from` keyword for relative colors

The `from` keyword is now parsed as valid CSS syntax when the `layout.css.relative-color-syntax.enabled` preference is set to `true`.

Although this keyword currently has no effect, it will not produce syntax errors when used in valid places in CSS color functions, thereby supporting the ongoing work on [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors).

See [Firefox bug 1889133](https://bugzil.la/1889133) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.relative-color-syntax.enabled</code></td>

</tr>

</tbody>

</table>

### Single numbers as aspect ratio in media queries

Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a [media query](/en-US/docs/Web/CSS/CSS_media_queries). (See [Firefox bug 1565562](https://bugzil.la/1565562) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.aspect-ratio-number.enabled</code></td>

</tr>

</tbody>

</table>

### backdrop-filter property

The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. (See [Firefox bug 1178765](https://bugzil.la/1178765) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>70</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.backdrop-filter.enabled</code></td>

</tr>

</tbody>

</table>

### fit-content() function

The {{cssxref("fit-content_function", "fit-content()")}} function as it applies to {{cssxref("width")}} and other sizing properties. This function is already well-supported for CSS Grid Layout track sizing. (See [Firefox bug 1312588](https://bugzil.la/1312588) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>91</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>91</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>91</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>91</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.fit-content-function.enabled</code></td>

</tr>

</tbody>

</table>

### Scroll-driven animations

Earlier called "scroll-linked animations", a scroll-driven animation depends on the scroll position of a scrollbar instead of time or some other dimension.

The {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties (and the {{cssxref('scroll-timeline')}} shorthand property) allow you to specify that a particular scrollbar in a particular named container can be used as the source for a scroll-driven animation.

The scroll timeline can then be associated with an [animation](/en-US/docs/Web/CSS/CSS_animations) by setting the {{cssxref('animation-timeline')}} property to the name value defined using `scroll-timeline-name`.

When using the {{cssxref('scroll-timeline')}} shorthand property, the order of the property values must be {{cssxref('scroll-timeline-name')}} followed by {{cssxref('scroll-timeline-axis')}}. The longhand and shorthand properties are both available behind the preference.

You can alternatively use the [`scroll()`](/en-US/docs/Web/CSS/animation-timeline/scroll) functional notation with {{cssxref('animation-timeline')}} to indicate that a scrollbar axis in an ancestor element will be used for the timeline.

For more information, see [Firefox bug 1807685](https://bugzil.la/1807685), [Firefox bug 1804573](https://bugzil.la/1804573), [Firefox bug 1809005](https://bugzil.la/1809005), [Firefox bug 1676791](https://bugzil.la/1676791), [Firefox bug 1754897](https://bugzil.la/1754897), and [Firefox bug 1737918](https://bugzil.la/1737918).

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>110</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>110</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>110</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>110</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.scroll-driven-animations.enabled</code></td>

</tr>

</tbody>

</table>

### @scope at-rule

The [@scope](/en-US/docs/Web/CSS/@scope) [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) allows you to select specific child elements without having to overly increase the specificity of CSS selectors ([Firefox bug 1886441](https://bugzil.la/1886441)).

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>128</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>128</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>128</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>128</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.at-scope.enabled</code></td>

</tr>

</tbody>

</table>

### @font-face src feature checking

The `@font-face` [`src` descriptor](/en-US/docs/Web/CSS/@font-face/src) now supports the `tech()` function, allowing fallback of whether a font resource is downloaded based on whether the user-agent supports a particular font feature or technology.

See [Firefox bug 1715546](https://bugzil.la/1715546) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>105</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>105</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>105</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>105</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.font-tech.enabled</code></td>

</tr>

</tbody>

</table>

### font-variant-emoji property

The CSS [`font-variant-emoji`](/en-US/docs/Web/CSS/font-variant-emoji) property allows you to set a default presentation style for displaying emojis.

See ([Firefox bug 1461589](https://bugzil.la/1461589)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>108</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>108</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>108</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>108</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.font-variant-emoji.enabled</code></td>

</tr>

</tbody>

</table>

### page-orientation descriptor

The **`page-orientation`** [CSS](/en-US/docs/Web/CSS) descriptor for the {{cssxref("@page")}} at-rule controls the rotation of a printed page. It handles the flow of content across pages when the orientation of a page is changed. This behavior differs from the [`size`](/en-US/docs/Web/CSS/@page/size) descriptor in that a user can define the direction in which to rotate the page.

See ([Firefox bug 1673987](https://bugzil.la/1673987)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>111</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>111</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>111</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>111</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.page-orientation.enabled</code></td>

</tr>

</tbody>

</table>

### prefers-reduced-transparency media feature

The CSS [`prefers-reduced-transparency`](/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media feature lets you detect if a user has enabled the setting to minimize the amount of transparent or translucent layer effects on their device.

See ([Firefox bug 1736914](https://bugzil.la/1736914)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>113</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>113</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>113</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>113</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.prefers-reduced-transparency.enabled</code></td>

</tr>

</tbody>

</table>

### inverted-colors media feature

The CSS [`inverted-colors`](/en-US/docs/Web/CSS/@media/inverted-colors) media feature lets you detect if a user agent or the underlying operating system is inverting colors.

See ([Firefox bug 1794628](https://bugzil.la/1794628)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.inverted-colors.enabled</code></td>

</tr>

</tbody>

</table>

### Named view progress timelines property

The CSS [`view-timeline-name`](/en-US/docs/Web/CSS/view-timeline-name) property lets you give a name to particular element, identifying that its ancestor scroller element is the source of a view progress timeline.

The name can then be assigned to the `animation-timeline`, which then animates the associated element as it moves through the visible area of its ancestor scroller.

See ([Firefox bug 1737920](https://bugzil.la/1737920)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.scroll-driven-animations.enabled</code></td>

</tr>

</tbody>

</table>

### Anonymous view progress timelines function

The CSS [`view()`](/en-US/docs/Web/CSS/animation-timeline/view) function lets you specify that the `animation-timeline` for an element is a view progress timeline, which will animate the element as it moves through the visible area of its ancestor scroller.

The function defines the axis of the parent element that supplies the timeline, along with the inset within the visible area at which the animation starts and begins.

See ([Firefox bug 1808410](https://bugzil.la/1808410)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>114</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.scroll-driven-animations.enabled</code></td>

</tr>

</tbody>

</table>

### zoom property

The non-standard CSS {{cssxref("zoom")}} property is enabled in the Nightly release and lets you magnify an element similar to the {{cssxref("transform")}} property, but it affects the layout size of the element.

See ([Firefox bug 1855763](https://bugzil.la/1855763) and [Firefox bug 390936](https://bugzil.la/390936)) for more details.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2">

<code>layout.css.zoom.enabled</code>

</td>

</tr>

</tbody>

</table>

To ensure compatibility with these changes, the [Vendor-prefixed transform properties](#vendor-prefixed_transform_properties) and the [Vendor-prefixed transition properties](#vendor-prefixed_transition_properties) are disabled in the Nightly release.

These changes are described in the following sections.

### text-wrap: balance & stable values

The [`text-wrap`](/en-US/docs/Web/CSS/text-wrap) CSS property values `balance` and `stable` allow the layout of short content to be wrapped in a balanced manner and for editable content to not reflow while the user is editing it, respectively.

(See [Firefox bug 1731541](https://bugzil.la/1731541) for more details.)

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.text-wrap-balance.enabled, layout.css.text-wrap-balance.limit, layout.css.text-wrap-balance-after-clamp.enabled</code></td>

</tr>

</tbody>

</table>

### Vendor-prefixed transform properties

The `-moz-` prefixed [CSS transform](/en-US/docs/Web/CSS/CSS_transforms) properties have been disabled in the Nightly release via the `layout.css.prefixes.transforms` preference being set to `false`. ([Firefox bug 1855763](https://bugzil.la/1855763)).

Specifically, the disabled properties are:

- `-moz-backface-visibility`

- `-moz-perspective`

- `-moz-perspective-origin`

- `-moz-transform`

- `-moz-transform-origin`

- `-moz-transform-style`

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Beta</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Release</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2">

<code>layout.css.prefixes.transforms</code>

</td>

</tr>

</tbody>

</table>

### Vendor-prefixed transition properties

The `-moz-` prefixed [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) properties have been disabled in the Nightly release via the `layout.css.prefixes.transitions` preference being set to `false`. ([Firefox bug 1855763](https://bugzil.la/1855763)).

Specifically, the disabled properties are:

- `-moz-transition`

- `-moz-transition-delay`

- `-moz-transition-duration`

- `-moz-transition-property`

- `-moz-transition-timing-function`

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>120</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Beta</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Release</th>

<td>120</td>

<td>Yes</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2">

<code>layout.css.prefixes.transitions</code>

</td>

</tr>

</tbody>

</table>

### UA styles for `<h1>` nested in sectioning elements

The `<h1>` heading doesn't decrease in font size now when nested within [sectioning elements](/en-US/docs/Web/HTML/Content_categories#sectioning_content) `<article>`, `<aside>`, `<nav>`, and `<section>`. The UA styles for `<h1>` nested within sectioning elements are no longer relevant since the outline algorithm [has been removed](https://github.com/whatwg/html/pull/7829) from the HTML specification. ([Firefox bug 1883896](https://bugzil.la/1883896)).

> **Note:** The preference for this feature works in reverse: it's set to `false` in the Nightly build, which removes the UA styling for headings nested in sectioning elements. It's set to `true` in all other channels, which retains the existing UA styling for the nested headings.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>125</td>

<td>No</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>125</td>

<td>Yes</td>

</tr>

<tr>

<th>Beta</th>

<td>125</td>

<td>Yes</td>

</tr>

<tr>

<th>Release</th>

<td>125</td>

<td>Yes</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2">

<code>layout.css.h1-in-section-ua-styles.enabled</code>

</td>

</tr>

</tbody>

</table>

### `shape()` function

The CSS [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) function is a [`<basic-shape>`](/en-US/docs/Web/CSS/basic-shape) data type that enables you to define a shape in the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties using one or more "shape commands". These commands are very similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). The `shape()` function is similar in some respects to the `{{cssxref("basic-shape/path","path()")}}` function, but unlike `path()`, which uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax. This enables you to easily create and edit shapes and also allows the use of CSS math functions.

For more details, see [Firefox bug 1823463](https://bugzil.la/1823463) for the `shape()` function support in `clip-path`, [Firefox bug 1884424](https://bugzil.la/1884424) for the function's support in `offset-path`, and [Firefox bug 1884425](https://bugzil.la/1884425) for its interpolation support.

<table>

<thead>

<tr>

<th>Release channel</th>

<th>Version added</th>

<th>Enabled by default?</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nightly</th>

<td>126</td>

<td>Yes</td>

</tr>

<tr>

<th>Developer Edition</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Beta</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Release</th>

<td>126</td>

<td>No</td>

</tr>

<tr>

<th>Preference name</th>

<td colspan="2"><code>layout.css.basic-shape-shape.enabled</code></td>

</tr>

</tbody>

</table>

### `@starting-style` at-rule

The CSS [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) at-rule allows you to set the starting styles of an element for a CSS transition, when the element has no default initial style. This is particularly useful for elements that are hidden from view on the first paint such as [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) or ['dialog'](/en-US/docs/Web/HTML/Element/dialog). For more details, see [Firefox bug 1834876](https://bugzil.la/1834876).