Modern CSS Code Snippets: Stop writing CSS like it's 2015
CSS in 2025: Let's write html inlined styles as if it was 2005 and separation of formatting/representation was never invented. I talk of tailwind, of course.
I dislike the examples here where the "old" way works in all browsers, but the "new" way only works in Chrome/Edge. IMO, it's irresponsible to include such examples, since it makes the Blink monoculture worse.
I didn’t pay close attention to the domain and I thought it was the other one:
One of the best educational resources for modern CSS.
BTW, one of the reasons I love modern CSS is front-end performance. Among other things, it allows you to make smaller DOMs.
I talk about a modern CSS technique that does that here:
https://op111.net/posts/2023/08/lean-html-markup-with-modern...
It is an idea I started playing with when custom properties landed in browsers, around 2016 or 2017? Around 2021 I started using the technique in client sites too.
Now I want to write a 2026 version of the post that talks about container queries too. The technique becomes more powerful if you can rely on container queries and on the cqw unit. (You cannot always. That stuff is still new.)
For an example of the convenience cqw offers if you can rely on it, see the snippets I have in this:
My top list of recent CSS improvements:
1) Nested selectors.
2) :has(...).
3) :is(...), before you had to write :not(:not(...)).
4) :where(...), similar to :is(...), but the selector weight inside :where becomes 0. Useful when you need deep/complex selectors without increasing the selector weight.
In case the author happens to read these - final statement in native CSS nesting is no longer true.
"The only small difference from Sass: for element selectors you need the & prefix. In Sass you could write a { color: red } inside a parent, but native CSS requires & a { color: red }."
It was true for a bit, but fixed within 2-3 releases iirc. You can now freely nav { a { color: red; } }
Stop pinning things to the edges of the screen and window. Some sites have literally over 50% of the viewable area taken up by irrelevant static elements. Let the content scroll, like god intended.
Hey all, creator here. Went through the comments and made a bunch of fixes based on the feedback: https://modern-css.com/changelog/
Me: cool, let's be creative, I love 2026.
Browsers: Yeah, but beware of limited availability, most of those creative examples are in the 40-50% browsers support range.
I was excited to see if I had any of the old centering method in my CSS code, turns out I do! So I tried to replace it with the new grid/place-items method... doesn't work because I have multiple children all needing to be placed in the center layered on top of each other. So I wouldn't call this an easy swap
The field-sizing: content one for textareas is the kind of thing that makes you wonder how we tolerated the JS workaround for so long. I've shipped that "measure scrollHeight, set height, reset" hack in probably a dozen projects. Same with scroll-state queries replacing IntersectionObserver for sticky headers.
What's nice about this collection is it's organized by the problem, not the property. Makes it easy to find the thing you're actually trying to solve rather than browsing a spec.
Would love to see one for the new anchor positioning API. That one could replace a lot of tooltip and popover JS.
I just refactored my colors to use the light-dark function:
https://github.com/ericfortis/mockaton/commit/acf21803480412...
…and it deduplicated autocomplete suggestions in WebStorm
I'm confused, many of these examples state that they don't work in my browser (Firefox) - but the live demo works fine? Are the demos poly-filled?
This site claims the `initial-letter` property is newly supported, but actually it is still unsupported in most recent Firefox and Safari.
The one I don’t see that often used is color-scheme and light-dark. Both of those with css variables are so helpful with theming and having light and dark themes. Plus it works in all of the main browsers and the effect happens immediately, so you have your page up and switch your system from light to dark, you see it transition without having to refresh.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...
These look like some interesting css options, though I'll comment that adding grid placement options is less new, and more just minor syntactic sugar. Plus, basic grid layout styling being added to css will rarely do what we actually want them to do.
Accounting for scrollbar appearance and auto-updtating the width of the frame/window is pretty useful, though. Not having the horizontal scroll bar suddenly appear when a vertical bar is needed due to dynamic elements is highly preferable.
Love this website. Definitely bookmarking for future reference.
So where are we at with utility libs (tailwind/tachyon) vs inline css in js vs preprocessors (sass/scss) vs vanilla modern css?
This site taught me a new way to do drop-caps. It looks good on multiple types of device!
If nothing else, I'm grateful for that.
Live demo for input:user-invalid does not work on my phone.
It'd always been the same: those ugly patches of JavaScript were being added to maintain compatibility with all the browsers... That's why the newest CSS tricks were always out of reach for us
Probably half of it still doesn’t work in Safari.
Funny that this age was probably written by AI hence the "how to write modern css" is completely irelevant.
Alternate title: "How to break your website's styling for 10-20% of your users"
This is a nice reference, and some properties like `scrollbar-gutter` can be used for progressive enhancement.
However, many options listed will require some kind of fallback if `autoprefixer`/`postcss`/etc. doesn't cover it, and if you don't want to exclude a large fraction of your users.
It's reasonable in some cases to have both "new" and the old fallback code side-by-side until _your users's_ browser adoption stats indicate that you can delete the old fallback code without breaking a substantial number of users.
But the reality of using the new CSS hotness is that if the code is not supported by a % threshold that is much higher than many of these techniques show, it actually _increases_ your workload in the near term. You write new + the fallback + ensure that they don't interfere with each other.
P.S. Note the emphasis on _your users_ in the paragraph above. Global browser stats are fine as a basic reference, but your specific site/app's userbase demographics affect the actual percentages tremendously. That may mean you can use ALL of these new techniques today, or some, or none of them.
If your audience is primarily software developers, then after measuring you may find you can use these without a fallback. If it includes people in less wealthy communities or countries, or in countries with restricted access to mobile phone markets, you likely cannot.
Where's the RSS feed? I'm not signing up for email newsletters.
Congratulations to the creator of this site and thank you so much for posting it !
I have to (unwillingly) do frontend work so I recently read up on CSS quite a bit. I have always thought that using computed numbers for styling is bonkers. Its better to use CSS that uses logical values. The site seems to emphasize that style.
The color lightening/darkening is new to me. I have a bunch of older sites that still accomplish the same thing with Sass and Compass, but the Compass toolchain has been fiddly to keep running. Nice to see that as a new creature comfort.
Random pet peeve... it annoys me when people have old browser-specific aliases to standardized CSS properties. For example, -o-tab-size and -moz-tab-size instead of just tab-size. Those properties haven't done anything on Opera/Firefox for a decade!
t’s interesting how different CSS approaches end up shaping completely different mental models: utility classes, semantic blocks, scoped styles — each tool pushes the architecture in its own direction.
Great resource! Browser support tables make it production-ready. How does it compare to CSS-Tricks almanac for edge cases?
I've been doing this webdev things too long. Many of these "old" examples are news to me.
Ironically the website is locked to dark mode and doesn’t use the (not so) modern prefers-color-scheme.
Well it's flat out wrong about some things, like `field-sizing: content`. Doesn't work in any version of Firefox, let alone Firefox 130+! It even links to caniuse, which says the same thing.
The "new" version doesn't even have the handle to manually expand the box - the old version does!
Could you please add pwa, so I can install it on my phone for easy access?
Bookmarked, Thank you!
Most of this feels like "stop writing CSS like it's 2015, instead come to 2022"
I hate how it's still not possible to properly style the numbers in ordered lists.
I use them for code snippets with automatic line numbers, but it's literally impossible to space the numbers (relative to the code) while keeping them aligned to the right. ¯\_(ツ)_/¯
CSS and JavaScript are like two dysfunctional law enforcement agencies fighting over jurisdiction.
Very cool. Could you include a skill.md of AGENTS.md for this?
Looks vibecoded
Funny how half of the shit there does not work for me, even though I'm using latest Chrome (Helium)
...and start writing it like you're an LLM!
This looks generally good but sadly also stylistically is similar to the default "modern" output of Claude Code. Just a thought.
The first example of not using absolute positioning isn't a good example because sometimes you do need to absolutely position things, like a modal.
Also you can just use display: flex with justify-content: center and align-items: center for non absolutely positioned elements.
Just because it uses CSS grid does not make it more "correct" than flexbox.
I also only see one usage of custom @property properties here, which has been one of the most useful things to happen to CSS in years. They have many different use cases, particularly for complex animations.
Is it just me or gradients and tile grid with specific hover effects are AI generated stuff giveaways? Maybe it's old people yelling at clouds, but I'm very reluctant to trust the site, when I see these signs.
[dead]
[dead]
[dead]
[dead]
[dead]
CSS is the only thing from browsers we actually need. The rest can be done in a terminal. Contemporary terminals could even render the UI with way less memory. The browser is a nightmare because it wasn’t architected to run applications.
2015 is good enough.
For example instead of grid center, one can use flex and margin auto.
If you are building really nation-wide products, there are still a lot of guys in corporate with old windows (where even chrome stopped updating like win7). Or, you know, old or poor people with PC from 2008.
Also don’t forget guys with mobile phones: not like one could easily install a browser there. Especially on phones which no longer receive updates.
So writing CSS like it is 2015 is great. Not because it feels great but because it is what caring about your users (and business) is.
Otherwise you’ll get humbled by your clients soon enough. And in corporate they won’t even be your clients unless you support old stuff: IE 11 is a great target if you really want to shine.