diff --git a/README.md b/README.md index 514038b..d4d3a89 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,8 @@ A collection of tips to help take your CSS skills pro. 1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) 1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) 1. [Use `margin-inline` instead of `margin`](#use-margin-inline-instead-of-margin) +1. [Use `field-sizing` to Auto-Size Form Elements](#use-field-sizing-to-auto-size-form-elements) +1. [Simplify Color Schemes With `light-dark()`](#simplify-color-schemes-with-light-dark) ### Use a CSS Reset @@ -698,6 +700,46 @@ The same can be done for `margin-block` with defines the block start and end mar [Back to top](#contents) +### Use `field-sizing` to Auto-Size Form Elements + +Automatically resize textareas and inputs based on their content without using JavaScript: + +```css +textarea { + field-sizing: content; + min-height: 3em; +} +``` + +Now, as the user types, the textarea will grow vertically to fit the text. + +#### [Demo](https://codepen.io/Varun-B-the-sans/pen/QwGwYyp) + +[Back to top](#contents) + +### Simplify Color Schemes With `light-dark()` + +Easily define colors for both light and dark modes in a single property without using media queries: + +```css +body { + color: light-dark(#333, #ccc); + color-scheme: light dark; +} +``` + +This function automatically selects the first color for light mode and the second for dark mode based on the user's system preference. + +#### [Demo](https://codepen.io/Varun-B-the-sans/pen/KwNwJdm) + +[Back to top](#contents) + +## Support + +Current versions of Chrome, Firefox, Safari, and Edge. + +[Back to top](#contents) + ## Translations > [!NOTE]