Victor

Agreed!

Browser compatibility chart displaying the CSS property "scroll-margin-top" with usage statistics across various browsers.

Extra tip: if your header height changes (like on mobile), use CSS variables:

scroll-margin-top: var(--header-height);

Browser support: ~96%

One line of CSS. Your anchor links finally work the way users expect.

Code snippet showing an `h2` CSS selector with a property `scroll-margin-top` set to `80px`. Dark background enhances readability.

How to use it:

If your header is 80px tall, add this to your headings:

scroll-margin-top: 80px;

Now when someone clicks an anchor link, the browser scrolls to the heading but it leaves 80px above.

The heading appears below the header.

What it does:

Adds extra space above the heading.

Your anchor links still work, but the heading appears below the sticky header. So that the header doesn't hide part of it.

Two website designs show a fixed header. One lacks scroll-margin-top, causing overlap; the other adjusts spacing with it, preventing overlap.

Ever had such an issue when your sticky header covers anchor headings?

An easy fix is: scroll-margin-top

Where to use it:

• Modals and dialogs
• Sidebars and navigation menus
• Fixed containers with overflow: scroll
• Mobile carousels

Browser support: 95%

One line of CSS.

Your modals still suck, but a little bit less 😄

How it works:

When a user reaches the end of a scrollable element (modals are ideal candidates), scrolling just stops. It doesn't continue (chain) to the parent.

Doesn't trigger pull-to-refresh on mobile.

What it does:

You scroll a modal, hit the bottom of it and then keep scrolling.

Then boom, the page behind it starts scrolling as well. The modal stays open but you've lost your place on the page behind it.

That's scroll chaining. This property stops it.

Two overlapping web page sections illustrate scrolling behaviors: default where both page and content scroll, and a contained version.

Modals suck.

Want them to suck less?

Use overscroll-behavior: contain;

Learn Modern CSS for Better User Experience A practical book with modern CSS techniques, real examples, and UX-focused solutions.

I'll compile all these tricks into a book, feel free to join the waitlist

👉 css.vpon.me

Browser support:

text-wrap: pretty = 77%
text-wrap: balance = 87%

But nothing breaks if the browser doesn't support it.

One line of CSS and your typography instantly looks more professional.

When to use what:

For headings: use balance. It makes titles look even, balanced, good.

For body text in articles: use pretty. No more single hanging words (orphans) that look ugly.

text-wrap: wrap - default behavior

text-wrap: nowrap - keeps everything on one line (💀)

text-wrap: balance - makes text balanced (~ so that each line has approximately the same width)

text-wrap: pretty - prevents orphans (single words on the last line). It leaves at least two words at the end (🤩)

Three text styles demonstrate design principles: "wrap," "balance," and "pretty," highlighting proper text formatting and clarity.

Your headings look awkward because one word sits alone on the last line.

There's a CSS property that can fix that easily.

text-wrap!

It controls how text breaks across lines.

Here's what what each value does:

Indeed

Learn Modern CSS for Better User Experience A practical book with modern CSS techniques, real examples, and UX-focused solutions.

I'll compile all these tricks into a book, feel free to join the waitlist

👉 css.vpon.me

What improves:

• INP (Interaction to Next Paint)
• Initial load speed
• Mobile battery life
• Scroll performance

Your users won't see the optimization. They'll just notice your site feels faster.

Where to use it:

Best for sections below the fold: reviews, footers, anything with complex layouts that aren't immediately visible.

Never on the hero section. That needs to render instantly for good LCP.

The auto prefix solves this.

It's like "memory mode" for the browser. E.g. use 600px as a rough estimate on first render. Once the browser actually renders the section, it remembers the real height. Future scrolls are smooth.

Code snippet showing CSS styling for a class `.heavy-section` with properties for content visibility and intrinsic size settings.

But! You need another property: contain-intrinsic-size

If you don't reserve space for hidden sections, they collapse to 0 height.

Your scrollbar thinks the page is shorter than it is. When you scroll down and the section renders, the page expands suddenly and everything jumps.

The rescue is - content-visibility: auto

It's like a toggle that tells the browser: "Skip rendering this section until it's actually needed."

The browser saves CPU resources. Your page becomes interactive faster. Scrolling is smoother.

Look, the browser doesn't care that your testimonials are off-screen.

It still calculates their layout, styles, and geometry. Your hero section is ready, but the main thread is busy with content the user can't see until they scroll down.

Result: slow INP, laggy interactions.

A comparison diagram shows a browser rendering excessive content versus optimizing with CSS properties to improve performance.

You know what kills your site performance?

Rendering 3000px of content when the user can only see 900px. And there is an easy fix for that.

It's a magical CSS property

content-visibility: auto.

A user interface displays an owner tag and member tag with options for tagging in a group, emphasizing user roles and settings.

Try to guess what's going on in this UI?

A cash withdrawal receipt displays an error stating "OPERATION FAILED" along with various transaction details.

Grateful UX.

Thank you too! :)

Code snippet demonstrating the use of the aspect-ratio property in CSS for responsive images and video wrappers.

CSS/UX Tip ⚡

Your UI feels clunky and your Lighthouse score tanks because of CLS.

One CSS property fixes most of it is aspect-ratio.

Before aspect-ratio, we had a hacky workaround with padding-top: 56.25% (like if you remember this!)

Now it's just aspect-ratio: 16 / 9;

Writing a book in Figma: yes or no?

CSS code snippet adjusting background color and implementing backdrop-filter for responsive design and accessibility considerations.

This CSS combo does something most developers skip.

It handles a11y, performance, and browser support at once.

Take backdrop-filter as an example. Users might not want liquid glass effects.

Also, backdrop-filter consumes GPU resources because it requires real-time processing of every frame.

Even when I open these three icons I still don't know what I see :D

Four indistinct icons are displayed on a blurred background, suggesting navigation features related to social media usage.

Instagram has the most confusing icons of any app I use.

I still don't know what all of these do.