Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Tip: prevent scrollbars from re-wrapping text. Using "scrollbar-gutter: stable" fixes this

flornkm's profile picture

Florian

12,876 subscribers

169,459 Aufrufe • vor 4 Monaten •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }
0:12

Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }

Gabriel

31,433 Aufrufe • vor 2 Monaten

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

67,744 Aufrufe • vor 5 Monaten

Ghostty now has scrollbars for macOS drawn using native macOS GUI widgets of course! Available now in tip releases. GTK will follow very shortly. 50% of Ghostty memes now dead.
0:14

Ghostty now has scrollbars for macOS drawn using native macOS GUI widgets of course! Available now in tip releases. GTK will follow very shortly. 50% of Ghostty memes now dead.

Mitchell Hashimoto

108,914 Aufrufe • vor 1 Jahr

Sewer tip technique to prevent rodents from entering the sewer pipeline
0:12

Sewer tip technique to prevent rodents from entering the sewer pipeline

Tim Healthy lifestyle 🏋️‍♀️

4,917,465 Aufrufe • vor 5 Monaten

Live2D Tip 📝 Using warp deformers for physics can cause unexpected size changes. To prevent this, separate physics into individual deformers for better control 🤔 #Vtuber #Live2DWIP #live2dtutorial
0:13

Live2D Tip 📝 Using warp deformers for physics can cause unexpected size changes. To prevent this, separate physics into individual deformers for better control 🤔 #Vtuber #Live2DWIP #live2dtutorial

StepTOON | Live2D 🔨

26,292 Aufrufe • vor 1 Jahr

In some countries, they install gutter guards on their roof gutters to prevent them from getting clogged with dirt. Sounds like a great idea.
0:15

In some countries, they install gutter guards on their roof gutters to prevent them from getting clogged with dirt. Sounds like a great idea.

Arcfunmi

394,934 Aufrufe • vor 2 Monaten

Curved scrollbars ✨
0:19

Curved scrollbars ✨

Dhruvin

34,244 Aufrufe • vor 7 Monaten

Inserting frames directly into text flow has been missing from UI design tools. We're fixing that in Paper. Text wrapping included. No more faking that with flex layout. This is still early in development -- tell us how you'd use this and what would make this more useful!
0:17

Inserting frames directly into text flow has been missing from UI design tools. We're fixing that in Paper. Text wrapping included. No more faking that with flex layout. This is still early in development -- tell us how you'd use this and what would make this more useful!

Alex Harri

93,372 Aufrufe • vor 3 Monaten

Wrapping up the week 📺🗞️🤝. Bagaetsho, Re lebogile 🙏
0:10

Wrapping up the week 📺🗞️🤝. Bagaetsho, Re lebogile 🙏

Paulette Neo

16,245 Aufrufe • vor 1 Jahr

Also George re-using this exact same shot from Babe 2 in that movie will never not kill me
0:15

Also George re-using this exact same shot from Babe 2 in that movie will never not kill me

Matthew

25,564 Aufrufe • vor 2 Monaten

You can build your own AI-apps powered by OpenAI and Stable Diffusion. **Even if you don't know how to code** Using no-code, build your own text and image generation apps with: - Bubble - OpenAI - Stable Diffusion Learn how:
0:12

You can build your own AI-apps powered by OpenAI and Stable Diffusion. **Even if you don't know how to code** Using no-code, build your own text and image generation apps with: - Bubble - OpenAI - Stable Diffusion Learn how:

Seth Kramer

6,893,817 Aufrufe • vor 3 Jahren

The history of scrollbars design.
0:17

The history of scrollbars design.

Felix Lee

163,847 Aufrufe • vor 1 Jahr

This guy built a custom scrollbar with section headers for his portfolio 👀
0:15

This guy built a custom scrollbar with section headers for his portfolio 👀

Adam KP

46,221 Aufrufe • vor 7 Monaten

Palestine protestors reportedly target two men for wearing poppies, and try prevent them from using the tube.
0:10

Palestine protestors reportedly target two men for wearing poppies, and try prevent them from using the tube.

Turning Point UK 🇬🇧

2,650,775 Aufrufe • vor 3 Jahren

Great prompt, but fine details won't survive the grid. Nano Banana Pro generates each in ~1k resolution. Product text gets lost. This workflow fixes that: → Automatically extracts all 9 grid image → You select your favorite → Upscales to 4K using your input as reference
0:13

Great prompt, but fine details won't survive the grid. Nano Banana Pro generates each in ~1k resolution. Product text gets lost. This workflow fixes that: → Automatically extracts all 9 grid image → You select your favorite → Upscales to 4K using your input as reference

rob - comfyui

84,263 Aufrufe • vor 9 Monaten

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉
0:12

Tailwind CSS Tip (24/30) ✨ You can create a transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉

Surjith S M ✪

45,134 Aufrufe • vor 3 Jahren

Ever notice how talking to AI feels like Groundhog Day Every new chat starts from zero. No memory. No context. Just you re-explaining yourself over and over I found something that actually fixes this
0:16

Ever notice how talking to AI feels like Groundhog Day Every new chat starts from zero. No memory. No context. Just you re-explaining yourself over and over I found something that actually fixes this

Nawi

114,304 Aufrufe • vor 5 Monaten

Learn how to create a custom scrollbar.
0:18

Learn how to create a custom scrollbar.

Ali Reza

30,201 Aufrufe • vor 3 Jahren