Browser support data for CSS math functions min(), max(), and clamp() with usage percentages across various platforms.
Where to use it:
• Headings that need to scale
• Body text in hero sections
• Any text that should adapt to screen size
Browser support: ~95%
One function.
Your responsive typography is done.
Result:
Your text scales depending on screen width. No breakpoints, no media queries. Just fluid, responsive text.
For example:
• 1rem = minimum (16px). Text never gets smaller than 16px.
• 2vw + 0.5rem = preferred size. Scales smoothly with viewport width.
• 2rem = maximum (32px). Text never gets bigger than 32px, even on huge monitors.
How it works:
Sets three values at once: minimum size, preferred (fluid) size, and maximum size.
The browser picks the middle value that fits, but never goes below the minimum or above the maximum.
Diagram illustrating the CSS clamp function with examples of minimum, preferred, and maximum sizes across different screen widths.
Do you need 5 media queries to make your font look good depending on screen width?
One line of CSS is all you need:
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
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;
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
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! :)
