Curated collection of modern CSS code snippets. Every old CSS hack next to its clean, native replacement, side by side.
Joined February 2026
- Tweets 72
- Following 35
- Followers 67
- Likes 109
3 Photos and videos
modern.css retweeted
May 30
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;
11 May 2024
Scroll masking with CSS scroll animation as a progressive enhancement ⭐️
.scroller {
animation: mask-up;
animation-timeline: scroll(self);
animation-range: 0 1rem;
mask-composite: exclude;
}
@keyframes mask-up {
to { mask-size: 100% 120px, 100% 100%; }
}
10
63
1,550
207,865
modern.css retweeted
May 19
In case you missed it, I wrote about the CSS round() function.
ishadeed.com/article/css-rou…
May 17
✍️ New Article: Better fluid sizing with round()
I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it.
🔗 ishadeed.com/article/css-rou…
4
43
4,300
modern.css retweeted
May 21
🤔 CSS is just styling, they said
Meanwhile CSS with :where() and :has() to look like SQL queries
7
45
2,417
modern.css retweeted
May 21
What we can do with modern CSS is impressive! 🤩
A cool demo is in progress. Stay tuned! 👀
9
10
144
12,122
modern.css retweeted
May 20
CSS小技✨
文章の最大幅にpxを使うな！
レスポンシブ用に width: min(90%, ○○px)と
1行で書くモダンな設計思想💻
でも上限にpxを使うと、文字を大きくした時に
不自然な改行で大崩れする🤔
正解は【width: min(90%, ○○ch)】
文字の拡大に合わせて枠ごと広がる👍
#CSS #Web制作 #100DaysOfCode
1
14
124
7,629
modern.css retweeted
Every site has a story to scroll 📖
With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS.
Break free from static UI and create your story in minutes.
#GoogleIO
2
24
204
12,155
modern.css retweeted
May 19
This CSS unit is quietly ruining your website's mobile experience.
In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off.
Even worse if you have a bottom right action button since users won't even know it's there.
The "svh" unit fixes it:
.page {
min-height: 100svh;
}
If you found this one useful, follow for more! ❤️
5
22
181
11,675
I made this small demo 👇. I needed it!
I know there are a few fonts that support tabular numbers by default, but this CSS rule is a game-changer.
`font-variant-numeric: tabular-nums` makes numbers look as they should.
Play with this little demo here → iprodan.dev/l/font-variant-t…
1
3
13
1,704
Gap decorations are now in Chromium 149 (stable rollout in 5 days)!
Shoutout to the folks at @MSEdgeDev for the implementation, post, and demos:
developer.chrome.com/blog/ga…
6
20
147
10,943
modern.css retweeted
May 13
I made an interactive demo showing clamp() in action and comparing it to traditional CSS media queries (link below):
May 10
One line of CSS. Perfectly responsive typography on every screen.
font-size: clamp(1rem, 1vw, 1.75rem);
🪄 1rem minimum keeps text readable on phones
🪄 1vw makes it scale fluidly with the viewport
🪄 1.75rem caps it elegantly on large displays
No media queries or breakpoints.
Try it!
7
19
316
32,059
modern.css retweeted
May 12
🦊 Firefox 150: color-mix() now accepts more than two colors at once.
Mix any number of colors in a single declaration — no more nesting multiple calls.
Read Now 👇
developer.mozilla.org/en-US/…
ALT Firefox 150 release notes feature a pastel background with wavy patterns, highlighting the new color-mix() function for CSS.
4
43
2,307
this one CSS trick makes scrollbars not suck:
scrollbar-width: thin;
scrollbar-color: gray transparent;
by @raunofreiberg
6
36
639
33,610
modern.css retweeted
May 6
Speed up rendering with content-visibility: auto ⚡
This CSS property skips rendering off-screen content until needed, giving massive performance wins on long pages.
⋅ Pairs with contain-intrinsic-size
⋅ Zero-effort lazy rendering
Learn more 👇
developer.mozilla.org/en-US/…
ALT CSS snippet detailing the `content-visibility` property with keyword and global values for efficient rendering practices.
3
31
316
11,420
modern.css retweeted
May 4
Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇
.section-header {
...
container-type: scroll-state;
container-name: sticky-hd;
}
@ container sticky-hd scroll-state(stuck: top) {
...
}
#CSS
5
35
604
26,585
modern.css retweeted
Apr 29
CSS tip:
Use CSS animations with translateX(-50%) to create a seamless, infinite marquee that scrolls smoothly forever, no JS needed!
11
66
641
32,021
modern.css retweeted
Apr 30
This one line of CSS will make your website feel more native.
On mobile, tapping on clickable elements triggers an ugly blue highlight.
This gets rid of it:
html {
-webkit-tap-highlight-color: transparent;
}
If you found this one useful, follow for more. ❤️
1
33
430
29,150
modern.css retweeted
CSS's light-dark() now accepts images, making it simpler to define alternate values for a dark color scheme. Here's how it works:
3
17
140
19,758