正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

TIL about `field-sizing: content` in css

Jonnie Hallman

21,768 subscribers

150,898 次观看 • 1 年前 •via X (Twitter)

健康养生教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

Jonnie Hallman 的头像

Jonnie Hallman1 年前

Looks like this tweet took off overnight… Here’s my blog where I mostly write about building and maintaining an app for the past 10 years:

Jesper Bylund -- e/acc 的头像

Jesper Bylund -- e/acc1 年前

What. Is this a new thing?? Or how long has this been available? 😅

Jonnie Hallman 的头像

Jonnie Hallman1 年前

Looks like Chrome/Edge got support in March

Antoine Minoux 的头像

Antoine Minoux1 年前

Can you still specify a max-height?

Jonnie Hallman 的头像

Jonnie Hallman1 年前

Yep! and it works for both vertical autosize and horizontal, so max-width too.

Marco Roth 的头像

Marco Roth1 年前

@pooriajr not quite ready yet, but check this out 👆🏼

Nick Noble 的头像

Nick Noble1 年前

NO WAY

Gustav Ekerot 的头像

Gustav Ekerot1 年前

We need this yesterday

Manish Nikam 的头像

Manish Nikam1 年前

this has come so late, should have been a default day 0 feature. deleting this pos react component now.

Christopher / クリス的头像

Christopher / クリス1 年前

Sadly a basically Chrome only feature right now

相关视频

We're getting closer 🤏 input, textarea { field-sizing: content; } Auto-resizing text inputs with one line of CSS 🚀

We're getting closer 🤏 input, textarea { field-sizing: content; } Auto-resizing text inputs with one line of CSS 🚀

jhey ʕ•ᴥ•ʔ

204,378 次观看 • 2 年前

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

Wes Bos

203,517 次观看 • 2 年前

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

Miguel Ángel Durán

111,424 次观看 • 10 个月前

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,151 次观看 • 2 年前

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,420 次观看 • 1 年前

Jesse Livermore about position sizing.

Jesse Livermore about position sizing.

True market Leader

30,485 次观看 • 4 个月前

What Soros taught Stan about sizing

What Soros taught Stan about sizing

Computer

14,164 次观看 • 3 个月前

Master CSS Grid in 2 CSS lines!

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 次观看 • 1 年前

Learn CSS GRID (align-content) 🔥 ➼ Animated tutorial makes learning easier.

Learn CSS GRID (align-content) 🔥 ➼ Animated tutorial makes learning easier.

Alamin

85,495 次观看 • 3 年前

CSS Grid ( justify-content ) 🔥 ➼ The animated tutorial makes learning easier.

CSS Grid ( justify-content ) 🔥 ➼ The animated tutorial makes learning easier.

Alamin

46,145 次观看 • 3 年前

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

jhey ʕ•ᴥ•ʔ

143,129 次观看 • 1 年前

CSS Subgrid is now Baseline Widely Available across all major engines → It allows nested elements to inherit and align with their parent’s grid tracks, ensuring perfect alignment across complex layouts without manual sizing hacks.

CSS Subgrid is now Baseline Widely Available across all major engines → It allows nested elements to inherit and align with their parent’s grid tracks, ensuring perfect alignment across complex layouts without manual sizing hacks.

Chrome for Developers

47,605 次观看 • 1 个月前

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.

Alamin

65,653 次观看 • 3 年前

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

Adam Argyle

31,206 次观看 • 1 年前

Do you know about :is() in CSS? It's pretty handy! More on :is(), as well as :where() and :has(), in my full article:

Do you know about :is() in CSS? It's pretty handy! More on :is(), as well as :where() and :has(), in my full article:

Steve (Builder.io)

375,389 次观看 • 3 年前

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 次观看 • 1 年前

it's all about easing curves ⏱️ translation powered via CSS custom properties

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

64,029 次观看 • 1 年前

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

11,137 次观看 • 3 个月前

Master CSS Animations in 30 seconds!

Master CSS Animations in 30 seconds!

Ania Kubów #JavaScriptGames

13,127 次观看 • 1 年前