正在加载视频...

视频加载失败

返回首页

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 次观看 • 2 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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 次观看 • 4 个月前

💡 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 次观看 • 2 年前

¡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 次观看 • 3 年前

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 次观看 • 6 个月前

`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 次观看 • 24 天前

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 次观看 • 1 年前

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

Are you staring at the form or the fit?

Julflexx

33,174 次观看 • 1 个月前

✍️ 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 次观看 • 5 个月前

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 次观看 • 1 个月前

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 次观看 • 2 个月前

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 次观看 • 3 年前

💡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 次观看 • 1 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 6 个月前

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 次观看 • 9 个月前

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 次观看 • 7 个月前