Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

TIL about `field-sizing: content` in css

destroytoday's profile picture

Jonnie Hallman

21,841 subscribers

150,940 Aufrufe • vor 2 Jahren •via X (Twitter)

Gesundheit & WellnessBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Jonnie Hallman
Jonnie Hallmanvor 2 Jahren

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 2 Jahren

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

Profilbild von Jonnie Hallman
Jonnie Hallmanvor 2 Jahren

Looks like Chrome/Edge got support in March

Profilbild von Antoine Minoux
Antoine Minouxvor 2 Jahren

Can you still specify a max-height?

Profilbild von Jonnie Hallman
Jonnie Hallmanvor 2 Jahren

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

Profilbild von Marco Roth
Marco Rothvor 2 Jahren

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

Profilbild von Nick Noble
Nick Noblevor 2 Jahren

NO WAY

Profilbild von Gustav Ekerot
Gustav Ekerotvor 2 Jahren

We need this yesterday

Profilbild von Manish Nikam
Manish Nikamvor 2 Jahren

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

Profilbild von Christopher / クリス
Christopher / クリスvor 2 Jahren

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 ʕ•ᴥ•ʔ

208,139 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,622 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,599 Aufrufe • vor 1 Jahr

¡POR FIN podremos hacer esto en CSS! Cambiar la altura de un textarea según su contenido. Es la nueva propiedad "field-sizing: content". Sin necesidad de usar JavaScript. Aquí tienes una demostración y el código ↓
0:39

¡POR FIN podremos hacer esto en CSS! Cambiar la altura de un textarea según su contenido. Es la nueva propiedad "field-sizing: content". Sin necesidad de usar JavaScript. Aquí tienes una demostración y el código ↓

Miguel Ángel Durán

82,960 Aufrufe • vor 2 Jahren

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

How to fade out content in CSS?
0:25

How to fade out content in CSS?

Ali Reza

118,281 Aufrufe • vor 2 Jahren

Jesse Livermore about position sizing.
1:24

Jesse Livermore about position sizing.

True market Leader

30,597 Aufrufe • vor 7 Monaten

What Soros taught Stan about sizing
1:31

What Soros taught Stan about sizing

Computer

14,164 Aufrufe • vor 6 Monaten

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,365 Aufrufe • vor 1 Jahr

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

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

Alamin

46,153 Aufrufe • vor 3 Jahren

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

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

Alamin

85,501 Aufrufe • vor 3 Jahren

What William O’Neil Taught About Position Sizing, Discipline, and Letting Winners Run
46:55

What William O’Neil Taught About Position Sizing, Discipline, and Letting Winners Run

Market Rebellion

16,924 Aufrufe • vor 1 Monat

I bet you don't know about this CSS property.
0:28

I bet you don't know about this CSS property.

Pratham

94,485 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,806 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,706 Aufrufe • vor 5 Monaten

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,665 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

Some were wondering about the sizing. See mine on: I shared this on my TikTok.
1:09

Some were wondering about the sizing. See mine on: I shared this on my TikTok.

Kelly ☁️

20,573 Aufrufe • vor 9 Monaten