Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

TIL about `field-sizing: content` in css

destroytoday's profile picture

Jonnie Hallman

21,841 subscribers

150,940 görüntüleme • 2 yıl önce •via X (Twitter)

Sağlık & İyilikEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Jonnie Hallman profil fotoğrafı
Jonnie Hallman2 yıl önce

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 profil fotoğrafı
Jesper Bylund -- e/acc2 yıl önce

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

Jonnie Hallman profil fotoğrafı
Jonnie Hallman2 yıl önce

Looks like Chrome/Edge got support in March

Antoine Minoux profil fotoğrafı
Antoine Minoux2 yıl önce

Can you still specify a max-height?

Jonnie Hallman profil fotoğrafı
Jonnie Hallman2 yıl önce

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

Marco Roth profil fotoğrafı
Marco Roth2 yıl önce

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

Nick Noble profil fotoğrafı
Nick Noble2 yıl önce

NO WAY

Gustav Ekerot profil fotoğrafı
Gustav Ekerot2 yıl önce

We need this yesterday

Manish Nikam profil fotoğrafı
Manish Nikam2 yıl önce

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

Christopher / クリス profil fotoğrafı
Christopher / クリス2 yıl önce

Sadly a basically Chrome only feature right now

Benzer Videolar

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

¡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 görüntüleme • 1 yıl önce

¡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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

🔥 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 görüntüleme • 2 yıl önce

How to fade out content in CSS?
0:25

How to fade out content in CSS?

Ali Reza

118,281 görüntüleme • 2 yıl önce

Jesse Livermore about position sizing.
1:24

Jesse Livermore about position sizing.

True market Leader

30,597 görüntüleme • 7 ay önce

What Soros taught Stan about sizing
1:31

What Soros taught Stan about sizing

Computer

14,164 görüntüleme • 6 ay önce

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,365 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 9 ay önce