diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index a197c8082376c0b..3f67fb8ff8470b0 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -348,6 +348,20 @@ The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rul - `layout.css.attr.enabled` - : Set to `true` to enable. +### `field-sizing` property + +The {{cssxref("field-sizing")}} CSS property lets you control the sizing behavior of form control elements. This property has two values: `content` allows elements to adjust in size to fit their content, and `fixed` sets a fixed size on elements. ([Firefox bug 1977176](https://bugzil.la/1977176)). + +| Release channel | Version added | Enabled by default? | +| ----------------- | ------------- | ------------------- | +| Nightly | 151 | Yes | +| Developer Edition | 151 | No | +| Beta | 151 | No | +| Release | 151 | No | + +- `layout.css.field-sizing.enabled` + - : Set to `true` to enable. + ### Fix for nested scrollable areas This implementation has been added in order to fix an issue where scrollable content was unreachable. If a scrollbar is set to `display: none;` or `width: 0;` then the scrollbars of nested scrollable areas would be stacked on top of each other meaning that some of the content may well be unreachable. This does however mean that the `@supports selector(::-webkit-scrollbar)` check will return `true` even though the [`::-webkit-scrollbar`](/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar) pseudo-element is not truly supported. ([Firefox bug 1977511](https://bugzil.la/1977511)). diff --git a/files/en-us/mozilla/firefox/releases/151/index.md b/files/en-us/mozilla/firefox/releases/151/index.md index b55c1cf02001210..08c135a061aab04 100644 --- a/files/en-us/mozilla/firefox/releases/151/index.md +++ b/files/en-us/mozilla/firefox/releases/151/index.md @@ -112,6 +112,10 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rule [`style()`](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_style_queries) queries now supports the _range syntax_. This allows you to check if a container has a valid CSS custom property and compare its value with comparison operators like `>`, `<`, `>=`, and `<=` and apply styles to its children accordingly. ([Firefox bug 2024601](https://bugzil.la/2024601)). +- **`field-sizing` property**: `layout.css.field-sizing.enabled` + + The {{cssxref("field-sizing")}} CSS property lets you control the sizing behavior of form control elements. This property has two values: `content` allows elements to adjust in size to fit their content, and `fixed` sets a fixed size on elements. ([Firefox bug 1977176](https://bugzil.la/1977176)). + - **Fix for nested scrollable areas**: `layout.css.fake-webkit-scrollbar.enabled` This implementation has been added in order to fix an issue where scrollable content was unreachable. If a scrollbar is set to `display: none;` or `width: 0;` then the scrollbars of nested scrollable areas would be stacked on top of each other meaning that some of the content may well be unreachable. ([Firefox bug 1977511](https://bugzil.la/1977511)). diff --git a/files/en-us/web/css/reference/properties/field-sizing/index.md b/files/en-us/web/css/reference/properties/field-sizing/index.md index 175adfcfcf8bafb..6392c83d398ec6f 100644 --- a/files/en-us/web/css/reference/properties/field-sizing/index.md +++ b/files/en-us/web/css/reference/properties/field-sizing/index.md @@ -76,16 +76,20 @@ This example illustrates the effect of `field-sizing: content` on single- and mu #### HTML -The HTML in this example contains three form fields, each with an associated {{htmlelement("label")}}: two `` elements of types [`text`](/en-US/docs/Web/HTML/Reference/Elements/input/text) and [`email`](/en-US/docs/Web/HTML/Reference/Elements/input/email) and a {{htmlelement("textarea")}} element. +The HTML in this example contains four form fields, each with an associated {{htmlelement("label")}}: three `` elements of types [`text`](/en-US/docs/Web/HTML/Reference/Elements/input/text), [`email`](/en-US/docs/Web/HTML/Reference/Elements/input/email), and [`tel`](/en-US/docs/Web/HTML/Reference/Elements/input/tel), and a {{htmlelement("textarea")}} element. ```html
- +
- + +
+
+ +
@@ -95,7 +99,8 @@ The HTML in this example contains three form fields, each with an associated {{h Note the following points about the HTML: -- The first two fields have a [`maxlength`](/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) attribute set, which stops the size of the field from increasing when the character limit is reached. +- The first two fields have no length restrictions set. +- The third field (of type `tel`) has a [`maxlength`](/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) attribute set, which stops the size of the field from increasing when the character limit is reached. - The `