Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

CSS trick: transition `field-sizing: content` on a textarea with anchor

argyleink's profile picture

Adam Argyle

58,636 subscribers

16,812 görüntüleme • 3 gün önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

4 Yorum

Alex Inkin profil fotoğrafı
Alex Inkin3 gün önce

Check out this one ;)

Adam Argyle profil fotoğrafı
Adam Argyle3 gün önce

Sick 🤘💀 great use of view-timeline. Amazing what an overflow clip can unlock huh?

James Kerr profil fotoğrafı
James Kerr3 gün önce

Noice. This good on all the browsers??

Justin profil fotoğrafı
Justin3 gün önce

it would have been really special if the video grew with it

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

TIL about `field-sizing: content` in css
0:35

TIL about `field-sizing: content` in css

Jonnie Hallman

150,940 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,348 görüntüleme • 2 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

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇
0:25

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

730,856 görüntüleme • 2 yıl önce

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,877 görüntüleme • 3 yıl önce

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶
0:28

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,740 görüntüleme • 2 yıl önce

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀
0:22

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

jhey ʕ•ᴥ•ʔ

234,654 görüntüleme • 1 yıl önce

iOS-style morphing context menu w/ css transitions 👨‍🍳 [popover] api + anchor positioning + transition-behavior: allow-discrete
0:31

iOS-style morphing context menu w/ css transitions 👨‍🍳 [popover] api + anchor positioning + transition-behavior: allow-discrete

jhey ʕ•ᴥ•ʔ

31,121 görüntüleme • 8 ay önce

fun little blog filters with css anchor positioning
0:20

fun little blog filters with css anchor positioning

Petr Knoll

73,087 görüntüleme • 6 ay önce

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇
0:36

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,652 görüntüleme • 3 yıl önce

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

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}
0:22

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,817 görüntüleme • 2 yıl önce

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇
0:21

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,244 görüntüleme • 3 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

spritesheets are, and always will be, a fun trick! ⚡ translate with css based on pointer position grace note™ blink included ♪
0:29

spritesheets are, and always will be, a fun trick! ⚡ translate with css based on pointer position grace note™ blink included ♪

jhey ʕ•ᴥ•ʔ

154,132 görüntüleme • 2 ay önce

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳
0:24

the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨‍🍳

jhey ʕ•ᴥ•ʔ

160,074 görüntüleme • 1 yıl önce

今天又学了一个新的 css 属性：field-sizing 是我最近学到的最有用的属性了，可以实现根据输入的 content 实现可变宽高的 textarea，当我写了半天 js 实现对应的效果，发现 CSS 可以很轻松的实现对应的效果了。 而且针对响应性设计使用这个属性会非常的方便。
0:35

今天又学了一个新的 css 属性：field-sizing 是我最近学到的最有用的属性了，可以实现根据输入的 content 实现可变宽高的 textarea，当我写了半天 js 实现对应的效果，发现 CSS 可以很轻松的实现对应的效果了。 而且针对响应性设计使用这个属性会非常的方便。

Viking

52,713 görüntüleme • 2 yıl önce