Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

TIL about `field-sizing: content` in css

destroytoday's profile picture

Jonnie Hallman

21,768 subscribers

150,898 Aufrufe • vor 1 Jahr •via X (Twitter)

Gesundheit & WellnessBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Jonnie Hallman
Jonnie Hallmanvor 1 Jahr

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:

Profilbild von Jesper Bylund -- e/acc
Jesper Bylund -- e/accvor 1 Jahr

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

Profilbild von Jonnie Hallman
Jonnie Hallmanvor 1 Jahr

Looks like Chrome/Edge got support in March

Profilbild von Antoine Minoux
Antoine Minouxvor 1 Jahr

Can you still specify a max-height?

Profilbild von Jonnie Hallman
Jonnie Hallmanvor 1 Jahr

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

Profilbild von Marco Roth
Marco Rothvor 1 Jahr

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

Profilbild von Nick Noble
Nick Noblevor 1 Jahr

NO WAY

Profilbild von Gustav Ekerot
Gustav Ekerotvor 1 Jahr

We need this yesterday

Profilbild von Manish Nikam
Manish Nikamvor 1 Jahr

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

Profilbild von Christopher / クリス
Christopher / クリスvor 1 Jahr

Sadly a basically Chrome only feature right now

Ähnliche Videos

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

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

jhey ʕ•ᴥ•ʔ

204,378 Aufrufe • vor 2 Jahren

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

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 Aufrufe • vor 2 Jahren

¡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:
0:27

¡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 Aufrufe • vor 10 Monaten

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! 👇
1:31

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 Aufrufe • vor 2 Jahren

🔥 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 👌
1:00

🔥 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 Aufrufe • vor 1 Jahr

Jesse Livermore about position sizing.
1:24

Jesse Livermore about position sizing.

True market Leader

30,485 Aufrufe • vor 4 Monaten

What Soros taught Stan about sizing
1:31

What Soros taught Stan about sizing

Computer

14,164 Aufrufe • vor 3 Monaten

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 Aufrufe • vor 1 Jahr

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

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

Alamin

85,495 Aufrufe • vor 3 Jahren

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

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

Alamin

46,145 Aufrufe • vor 3 Jahren

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 👇
0:38

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 Aufrufe • vor 1 Jahr

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.
0:22

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 Aufrufe • vor 1 Monat

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

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

Alamin

65,653 Aufrufe • vor 3 Jahren

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

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

Adam Argyle

31,206 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 3 Jahren

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; }
0:25

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 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

64,029 Aufrufe • vor 1 Jahr

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

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

Firefox for Web Developers

11,137 Aufrufe • vor 3 Monaten

Master CSS Animations in 30 seconds!
1:19

Master CSS Animations in 30 seconds!

Ania Kubów #JavaScriptGames

13,127 Aufrufe • vor 1 Jahr