Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

CSS tip: stop your layout from jumping sideways when the scrollbar appears. html { scrollbar-gutter: stable; } The browser reserves space for the scrollbar ahead of time, so nothing shifts.

denicmarko's profile picture

Marko Denic

266,651 subscribers

12,938 görüntüleme • 6 gün önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

33,089 görüntüleme • 2 ay önce

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

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

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

Florian

169,459 görüntüleme • 4 ay önce

scrollbar-width: thin + extra padding for sheets
0:14

scrollbar-width: thin + extra padding for sheets

rauno

25,283 görüntüleme • 2 ay önce

Learn how to create a custom scrollbar.
0:18

Learn how to create a custom scrollbar.

Ali Reza

30,201 görüntüleme • 3 yıl önce

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

214,677 görüntüleme • 5 ay önce

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

just shipped a curved scrollbar made with Expo react-native-svg and reanimated works on mobile and web grab the code 👇
0:14

just shipped a curved scrollbar made with Expo react-native-svg and reanimated works on mobile and web grab the code 👇

rs

30,840 görüntüleme • 1 yıl önce

the UUID community is so beautiful 🥰 🥰 since launching Every UUID Dot Com I've received PRs with lots of helpful features: * favorites tab (no more scrolling to find your faves!) * vim hotkeys for navigation * better scrollbar on mobile ✨ thanks for the warm welcome!!
0:12

the UUID community is so beautiful 🥰 🥰 since launching Every UUID Dot Com I've received PRs with lots of helpful features: * favorites tab (no more scrolling to find your faves!) * vim hotkeys for navigation * better scrollbar on mobile ✨ thanks for the warm welcome!!

nolen

30,675 görüntüleme • 1 yıl önce

Just taking things too far with this date picker over here Got infinite month scrolling going Kept the scrollbar visible in the video so you can see that the scrolling is actually spoofed (there are only ever 3 calendar grids rendered at a time)
0:10

Just taking things too far with this date picker over here Got infinite month scrolling going Kept the scrollbar visible in the video so you can see that the scrolling is actually spoofed (there are only ever 3 calendar grids rendered at a time)

Caleb Porzio ⚡️

10,777 görüntüleme • 1 yıl önce

I just customized the scrollbar on my latest Framer project using Chat GPT. It took me 3 minutes and I know less about code than a drywall. Totally transformed the feel of my site. Here's a step-by-step of how I did it 👇🏼
0:18

I just customized the scrollbar on my latest Framer project using Chat GPT. It took me 3 minutes and I know less about code than a drywall. Totally transformed the feel of my site. Here's a step-by-step of how I did it 👇🏼

Erman Malak

31,326 görüntüleme • 3 yıl önce

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,843 görüntüleme • 2 yıl önce

spent way too much time on this scrollbar on my website. - long ticks are months, short ticks are dates - snaps to your cursor - click to jump, drag to scrub - long-press to open a focus ring - satisfying ratchet clicks - touch friendly on mobile go break it
0:13

spent way too much time on this scrollbar on my website. - long ticks are months, short ticks are dates - snaps to your cursor - click to jump, drag to scrub - long-press to open a focus ring - satisfying ratchet clicks - touch friendly on mobile go break it

Peng Zheng

93,437 görüntüleme • 18 gün önce

Design Engineering Tip Your tooltip doesn’t always end up where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block) { .tooltip { animation-name: slide-from-top; } }
0:10

Design Engineering Tip Your tooltip doesn’t always end up where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block) { .tooltip { animation-name: slide-from-top; } }

Gabriel

12,010 görüntüleme • 3 ay önce

Create this responsive flex layout using just HTML and CSS 🚀
0:10

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 görüntüleme • 2 yıl önce

90% of my time is now spent in Do the plan, screenshots come back (via built-in browser) of the implemented feature, and when needed fully built HTML artifacts for multiple edge cases, light/dark mode etc. Feels so nice...
0:14

90% of my time is now spent in Do the plan, screenshots come back (via built-in browser) of the implemented feature, and when needed fully built HTML artifacts for multiple edge cases, light/dark mode etc. Feels so nice...

Balint Orosz

19,687 görüntüleme • 7 ay önce

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,205 görüntüleme • 1 yıl önce

🍱 Generador de estructuras HTML y CSS con Flexbox y Grid Layout
0:13

🍱 Generador de estructuras HTML y CSS con Flexbox y Grid Layout

Carmen Ansio

107,261 görüntüleme • 3 yıl önce