feat: Editorial review: Add content to cover the field-sizing property #32489
Conversation
chrisdavidmills
requested review from
estelle
and removed request for
a team
github-actions
bot
added
Content:CSS
|
Preview URLs
(comment last updated: 2024-04-15 21:02:52) |
chrisdavidmills
changed the title
|
Thanks for the helpful review comments, @tkent-google! I have responded to all of them. Please let me know if you think anything else is needed here. |
chrisdavidmills
changed the title
There was a problem hiding this comment.
Fun feature, thanks for documenting it, @chrisdavidmills 👍
I've added edit suggestions for you to consider.
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
There was a problem hiding this comment.
The updates are looking good, thanks @chrisdavidmills.
Just two comments with a few nits, but leaving a +1. Feel free to merge when you're ready with the changes.
| - `content` | ||
| - : Allows the element to adjust its size to fit its contents. | ||
| - `fixed` | ||
| - : Sets a fixed size for the element. |
There was a problem hiding this comment.
We should note that this is the browser default for elements with default preferred size.
There was a problem hiding this comment.
Good call, however, I've just added "This is the default value." If you look at the computed values on any element, a default field-sizing: fixed will be shown.
| Specifically, this property affects the following elements: | ||
|
|
||
| - Form input types that accept direct text input from users. This includes [`email`](/en-US/docs/Web/HTML/Element/input/email), [`number`](/en-US/docs/Web/HTML/Element/input/number), [`password`](/en-US/docs/Web/HTML/Element/input/password), [`search`](/en-US/docs/Web/HTML/Element/input/search), [`tel`](/en-US/docs/Web/HTML/Element/input/tel), [`text`](/en-US/docs/Web/HTML/Element/input/text), and [`url`](/en-US/docs/Web/HTML/Element/input/url) types. | ||
| - If no minimum width is set on the control, it will only be as wide as the text cursor. |
There was a problem hiding this comment.
need to clarify that this is if If we change the h3 heading to "Elements affected by content is set. Not true if fixed is set, where the size is set by the size attribute or the browser's default preferred size.field-sizing: content and intro statement this edit is not needed, and the multiple "elements with field-sizing: content set" can be removed from bullets below.
There was a problem hiding this comment.
I've made the heading change, however, I think most of those instances are still needed — the sentences read a bit strangely when removed, and some of them are important so that the sentence makes sense.
|
|
||
| The sizing flexibility provided to form controls by `field-sizing: content` can be overridden if you use other CSS sizing properties. Avoid setting a fixed {{cssxref("width")}} and {{cssxref("height")}} when using `field-sizing: content` because they will reimpose a fixed size on the control. However, using properties like {{cssxref("min-width")}} and {{cssxref("max-width")}} alongside `field-sizing: content` is quite effective because they allow the control to grow and shrink with the entered text and also prevent the control from becoming too large or too small. | ||
|
|
||
| It is also useful to combine `field-sizing: content` with form attributes like [`maxlength`](/en-US/docs/Web/HTML/Element/input#maxlength), which will cause the control to stop growing in size when the maximum character limit is reached. |
There was a problem hiding this comment.
In most cases, setting maxlength is generally not recommended. A main issue was (and possibly still is) that as the user can keep entering characters, these characters are read by the screen reader, but there is no indication that they aren't being added to the input. There were a lot of discussions about this 5 and 10 years ago. Letting the user add more than the max characters but indicating that they're beyond the limit, color, and not allowing submission (i.e. Twitter, Mastodon, etc. UI pattern) are better usability. Ex. https://heymichellemac.com/design-pattern-character-limits. So maybe omit this or downplay it because we don't want to be recommending it.
There was a problem hiding this comment.
I've downplayed it a bit — removed some of the instances from the examples, and removed language that says it is useful.
|
|
||
| #### HTML | ||
|
|
||
| The HTML contains two sets of `<select>` elements: one with `field-sizing: content` applied, and one without, allowing you to see the difference (though the effect may be less obvious than on text fields). Each set includes one drop-down menu type and one multiline listbox type (with the [`multiple`](/en-US/docs/Web/HTML/Element/select#multiple) attribute set). |
There was a problem hiding this comment.
add a note about why we aren't using labels.
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Description
Chrome 123 supports the
field-sizingproperty, which is used to size textual form elements and textareas by their content, rather than sticking to a fixed size. This PR adds data for the new property.Motivation
Additional details
Related issues and pull requests