modern.css

Curated collection of modern CSS code snippets. Every old CSS hack next to its clean, native replacement, side by side.

[jhey ʕ•ᴥ•ʔ @jh3yy]

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;

[modern.css @moderncss]

CSS isolation: Prevent z-index Overflow
https://t.co/JClqnE5Ut9

[Ahmad Shadeed @shadeed9]

In case you missed it, I wrote about the CSS round() function.

https://t.co/mj4Q2UMO8O

[Bharat Kara @KaraBharat]

🤔 CSS is just styling, they said

Meanwhile CSS with :where() and :has() to look like SQL queries

[CSS by T. Afif @ChallengesCss]

What we can do with modern CSS is impressive! 🤩

A cool demo is in progress. Stay tuned! 👀

[ろびー【CSS小技✨】 @Robby_WebDesign]

CSS小技✨
文章の最大幅にpxを使うな！
レスポンシブ用に width: min(90%, ○○px)と
1行で書くモダンな設計思想💻
でも上限にpxを使うと、文字を大きくした時に
不自然な改行で大崩れする🤔
正解は【width: min(90%, ○○ch)】
文字の拡大に合わせて枠ごと広がる👍
#CSS #Web制作 #100DaysOfCode

[Chrome for Developers @ChromiumDev]

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

[Ali @alicalimli_dev]

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! ❤️

[IP @ipwanciu]

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 → https://t.co/N6dkIsmHc9

[Una 🇺🇦 @Una]

Gap decorations are now in Chromium 149 (stable rollout in 5 days)!

Shoutout to the folks at @MSEdgeDev for the implementation, post, and demos:

https://t.co/mkjspRpIcc

[Kyrylo Silin @kyrylo]

I made an interactive demo showing clamp() in action and comparing it to traditional CSS media queries (link below):

[MDN Web Docs @MozDevNet]

🦊 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 👇
https://t.co/kTQrRg7pkN

[modern.css @moderncss]

@Una Awesome blossom!

[Ali Grids @AliGrids]

this one CSS trick makes scrollbars not suck:

scrollbar-width: thin;
scrollbar-color: gray transparent;

by @raunofreiberg

[Ollie Williams @hypeddev]

New CSS text-fit property https://t.co/nlJEF2f0yc

[MDN Web Docs @MozDevNet]

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 👇
https://t.co/aXEBbjqooA

[Bharat Kara @KaraBharat]

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

[Marko Denic @denicmarko]

CSS tip:

Use CSS animations with translateX(-50%) to create a seamless, infinite marquee that scrolls smoothly forever, no JS needed!

[Ali @alicalimli_dev]

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. ❤️

[Ali @alicalimli_dev]

CSS Masonry Layout 👇