Loading video...

Video Failed to Load

Go Home

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →

ChromiumDev's profile picture

Chrome for Developers

423,485 subscribers

16,453 views • 2 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }
0:14

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

87,629 views • 4 months ago

💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing: content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height units
0:13

💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing: content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height units

bolt.new

117,264 views • 2 years ago

¡POR FIN podremos hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "form-sizing: content". Aquí te dejo una demostración:
0:14

¡POR FIN podremos hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "form-sizing: content". Aquí te dejo una demostración:

Miguel Ángel Durán

174,737 views • 3 years ago

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,796 views • 6 months ago

`field-sizing: content` lets you autosize textareas in css but what if you want the height to transition instead of snap? wrap it and sync the wrapper height with a ResizeObserver ↓
0:15

`field-sizing: content` lets you autosize textareas in css but what if you want the height to transition instead of snap? wrap it and sync the wrapper height with a ResizeObserver ↓

jhey ʕ•ᴥ•ʔ

42,058 views • 24 days ago

This 1989 Nike shoes designed to adjust their fit around athletes' ankles
0:15

This 1989 Nike shoes designed to adjust their fit around athletes' ankles

Massimo

7,119,761 views • 1 year ago

Are you staring at the form or the fit?
0:12

Are you staring at the form or the fit?

Julflexx

33,174 views • 1 month ago

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗
0:17

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,912 views • 5 months ago

This is what happens when the player and the fit find their match 🎾
0:13

This is what happens when the player and the fit find their match 🎾

PUMP!

59,886 views • 1 month ago

Auto layout in Figma now lets you adjust auto gap spacing for nested elements for better CSS flex-box parity. Rolling out to all users by August 31st. More here:
0:18

Auto layout in Figma now lets you adjust auto gap spacing for nested elements for better CSS flex-box parity. Rolling out to all users by August 31st. More here:

miggi from figgi

37,072 views • 2 months ago

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻
0:12

Tailwind Tweak #6 Learn how to do custom form validation with Tailwind CSS, no JavaScript required. 🪄 Code: Don't forget to follow for daily tweaks!🫶🏻

Namya @ Supafast

57,323 views • 3 years ago

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 views • 1 year ago

Neo-classical economists getting their models to fit the data.
0:15

Neo-classical economists getting their models to fit the data.

Rethinking Economics

97,048 views • 3 years ago

onboarding ends with fog reveal - css-only dynamic fog (no canvas/shaders) - fluid sizing - features the 4 spirits of whimsy
0:16

onboarding ends with fog reveal - css-only dynamic fog (no canvas/shaders) - fluid sizing - features the 4 spirits of whimsy

JohnPhamous

215,551 views • 1 year ago

Electric Vibe hits the field tonight & is available for a limited time only!⚡ LIVE. FIT. GO.
0:15

Electric Vibe hits the field tonight & is available for a limited time only!⚡ LIVE. FIT. GO.

CELSIUS Energy Drink

3,559,753 views • 6 months ago

What to do, when the car you bought is too big to fit on your driveway? Buy a bigger property.
0:18

What to do, when the car you bought is too big to fit on your driveway? Buy a bigger property.

Walking Marky

39,989 views • 9 months ago

NEW: Starting this week, Disney+ is rolling out “Verts,” a vertical video feed that lets users swipe through clips from movies and shows, add titles to their Watchlist, or jump straight into playback. It's the first step in a strategy to bring more short-form content to Disney+.
0:18

NEW: Starting this week, Disney+ is rolling out “Verts,” a vertical video feed that lets users swipe through clips from movies and shows, add titles to their Watchlist, or jump straight into playback. It's the first step in a strategy to bring more short-form content to Disney+.

Scott Gustin

243,032 views • 7 months ago