10 ms·
Modern CSS Code Snippets: Stop writing CSS like it's 2015
- Twey 8mo agoThis site claims the `initial-letter` property is newly supported, but actually it is still unsupported in most recent Firefox and Safari.
- laacz 8mo agoIs 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.
- apsurd 8mo agoAI got it from people though. I too am saddened by the instant-polish marketing pages everyone and their grandma deploys to Render, but also some people at some point in time really did make these effects. And they are nice. HTML based UIs will always have a place in my heart. Btw: actually I think webflow did more to pump this stuff out to the masses. The animate on scroll being the biggest offender. It's so good, but not for every literal text paragraph on your local bakery's website.
- samhh 8mo agoYou’re right not to trust it, it’s wrongly calling sibling-index() widely available. And that’s the first example I checked.
- piskov 8mo ago2015 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.
- deleted 8mo ago[deleted]
- nicoburns 8mo agoI definitely don't agree with all of these, but grid centering is pretty nice and has a lot fewer quirks than Flexbox based solutions.
- deleted 8mo ago[deleted]
- asddubs 8mo agoWhat are the quirks with flexbox centering?
- perardi 8mo agoI dare you to find any analytics, anywhere, that show any IE 11 usage. It would be utterly negligent to still be running IE in a corporate environment. It’s a huge security risk.
- piskov 8mo agoJust recently I stumbled on some god forsaken pc hooked up to a projector in some conference room. It had Windows 7 with guess what browser built-in. It had Chrome also, thank god (that’s how I know it is no longer updated by Google under 7). But that’s not the point. The thing is 2015’s state of affairs is good enough for dare I say most UI. Yeah, grid is not there, but there are very specific UIs that need what flex cannot provide. PostCSS takes care for most other legacy things
- ranger_danger 8mo ago0.02% as of January 2026: https://www.stetic.com/market-share/browser/ https://www.stetic.com/market-share/browser/ Results may also be skewed because IE mode in Edge will masquerade as IE. > Internet Explorer mode in Microsoft Edge enables backward compatibility and will be supported through at least 2029. https://learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support https://learn.microsoft.com/en-us/lifecycle/announcements/in...
- ktpsns 8mo agoCSS 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.
- h4x0rr 8mo agoYeah let's do that. You have everything related to your component on place instead of jumping between files.
- lawn 8mo agoIs jumping between files supposed to be difficult or something?
- runarberg 8mo agoAlso modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.
- chrisweekly 8mo agoColocation is a useful principle in component-based architecture.
- apsurd 8mo agoIn my lived experience, shared components just become another problem. Especially in a fledgling company, the iteration velocity is actually negatively affected by shared libs because there's always overhead to (not) break legacy. so shared components bloat to address every evolving need. And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy! TLDR: i almost always end up branching out into evergreen "reusable" components anyway. Very unlikely the component library the CTO asked claude to DRY up the code with, is the one to rule them all.
- 8mo ago
- jgalt212 8mo agoCSS and JavaScript are like two dysfunctional law enforcement agencies fighting over jurisdiction.
- sublinear 8mo agoAll web standards are like this, and then the battle continues when it comes to browser implementation.
- Bengalilol 8mo agoMe: 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.
- graypegg 8mo agoIn the past this was a major issue that meant useful features were only ever usable after IE/Safari finally supported them half a decade later, but it has seriously gotten better. Sadly as a result of Chromium's overbearing presence, but it's a helpful outcome at least. https://wpt.fyi/interop-2025 https://wpt.fyi/interop-2025
- presentation 8mo agoProblem with safari though is that it’s tied to OS updates that many people just defer for insanely long periods of time. So unlike the other browsers, it’s not evergreen, so if you need to support any iOS users or Mac users who don’t use chrome etc, you’re out of luck
- graypegg 8mo agoYeah that definitely sucks. I have seen MacOS Safari updates come though separately in Preferences.app > General > Software Update, but I think that release channel is for security issues. Saying that, MacOS and iOS generally (up until recently, from what I've heard) have very good uptake rates for major updates. It's become less awful standards-wise as time has gone on in my experience at least.
- thih9 8mo ago> most of those creative examples are in the 40-50% browsers support range. Not if you filter the examples. Click "widely available".
- MD87 8mo agoFirst widely available one I saw was this: https://modern-css.com/staggered-animations-without-nth-child-hacks/ https://modern-css.com/staggered-animations-without-nth-chil... That would actually fix some ugly CSS I have. The demo works. Neat. Except... the demo doesn't use either the old syntax or the new syntax. The browser support is wrong (Firefox doesn't support it, the site says Firefox 16+; it says Chrome 43+ but in reality it's much newer: Chrome 148+). It says "Since 2018" but the spec was introduced in 2024. So maybe an interesting overview of things that might be available or might not, but the filtering and data on the site doesn't seem to be useful.
- user3939382 8mo agoCSS 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.
- azangru 8mo ago> The browser ... wasn’t architected to run applications. Could you explain this? What prevents the browser from running applications? How should it have been architected otherwise if running applications was the goal?
- zahlman 8mo agoI think the idea here is that the DOM was designed as a model for document presentation, not for GUI layout.
- krapp 8mo agoThe DOM was designed as a model for hypertext document presentation. That document already is an application. Hyperlinks already are a GUI. And 99% of what people here consider "web applications" are just documents meant to be read as documents that have any javascript in them at all. This whole "document vs app" dichotomy is mostly a fantasy.
- rixed 8mo ago> The rest can be done in a terminal. (...) The browser is a nightmare because it wasn’t architected to run applications. Neither were terminals, which were not even designed with a screen in mind.
- anematode 8mo agoRandom 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!
- darig 8mo ago[dead]
- cwillu 8mo agoStop 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.
- deadghost 8mo agoSo where are we at with utility libs (tailwind/tachyon) vs inline css in js vs preprocessors (sass/scss) vs vanilla modern css?
- gassi 8mo agoWherever you want to be. Tailwind works for your team? Go for it. Inline CSS for your solo project? By all means. Still stuck on SASS? It'll keep working just fine. All in on modern CSS? More power to ya!
- lol768 8mo agoI'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?
- nine_k 8mo agoNo, it says: "Limited availability". These green percentage points at the bottom left show how many of the Web audience (IDK by what measurements) runs a browser supporting this feature. A ton of them are even below 50%. So I suppose it's not "modern CSS", but more like "latest Chrome CSS". Best viewed in Internet Explorer 5.
- Kailhus 8mo agoAbsolutely. So no thank you, I won't stop writing CSS like it's 2015 if those features aren't at least supported by all latest browsers.
- extra88 8mo agoTheir labeling of feature availability is messed up. It says sibling-index() is widely available when it's not even available in Firefox yet.
- egedev 8mo ago[dead]
- holistio 8mo agoMost of this feels like "stop writing CSS like it's 2015, instead come to 2022"
- 65 8mo agoThe 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.
- k33n 8mo agoModal containers should be position: fix; with their own internal flexbox or grid btw.
- 65 8mo agoNot always. That's assuming you have a full viewport modal. There are plenty of instances where you'll have a modal inside of another container somewhere on the page. You also generally don't want to use position: fixed as it can allow the user to scroll behind the modal.
- senfiaj 8mo agoMy 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.
- silverwind 8mo agoI like 2-4 but I despise nested selectors. They make selectors ungreppable.
- pphysch 8mo agoWhy/how do you grep selectors? Seems overly optimistic to be able to guess the particular rule pattern that is applying a style. Browser tools are much more reliable.
- porker 8mo agoLet's say you're thrown into a website you've never worked on before and asked to fix a styling problem. You can look in the browser tools, but the website will only be running the compiled production version, and if the team knows what they're doing there won't be source maps available. So you've now found selectors in DevTools that you think are causing the problem, and you want to find them in the source code. In the case of many projects, that means searching through hundreds of small CSS files. That's why you grep selectors, and where the pain comes. You have to start with the most specific rules that you found in DevTools, then start deleting parts from them until you find a non-nested rule that's in the source, yet still specific enough that you haven't got hundreds of matches to go through. It would be great if something like ast-grep could take a CSS rule copied from DevTools and search for nested CSS that would compile to match it.
- rozab 8mo agoIf this is the only option, I would suggest that means the team doesn't know what they are doing.
- eiiot 8mo ago...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.
- another_twist 8mo agoCongratulations 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.
- darig 8mo ago[dead]
- josephcsible 8mo agoI 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.
- oddevan 8mo agoAgreed; wish the default filter was "newly available" since that includes all 3 major browsers (Chrome/Edge, Safari, Firefox) but still includes new stuff that isn't "baseline" yet.
- virtujoel 8mo agoEven "newly available" doesn't seem correct. For example: https://modern-css.com/smooth-height-auto-animations-without-javascript/ https://modern-css.com/smooth-height-auto-animations-without... This claims `interpolate-size` is newly available and works in all major browsers. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interpolate-size https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P... This states `interpolate-size` only works in Chrome/Edge. I tested the demo and it's definitely not working in my copy of Firefox.
- maxloh 8mo agoThis site shouldn't be the one to blame. Instead, we should probably ask Mozilla to be more standards-compliant.
- zelphirkalt 8mo agoI don't see Mozilla obligated to follow whatever Google cooks up and declares a "standard".
- pchangr 8mo agoThis is an experimental feature. Not part of the standard yet .. imho.. shouldn’t be included (yet)
- ehsankia 8mo ago
- noduerme 8mo agoThe 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.
- dk8996 8mo agoVery cool. Could you include a skill.md of AGENTS.md for this?
- marcuswestin 8mo ago“Please study the material on https://modern-css.com/ https://modern-css.com/ and write a skill.md and an AGENTS.md that succinctly utilizes all the content” Or maybe even! “https://modern-css.com/ https://modern-css.com/ is very cool. Could you include a skill.md or Agents.md for this?” Or! “Please do: https://news.ycombinator.com/item?id=47030502 https://news.ycombinator.com/item?id=47030502“ =] </end_snark>
- jer0me 8mo agoError: Stray end tag end_snark.
- sthottingal 8mo agoThere is one already https://skills.sh/paulirish/dotfiles/modern-css https://skills.sh/paulirish/dotfiles/modern-css I am not sure whether it covers everything from https://modern-css.com/ https://modern-css.com/ though
- pier25 8mo agoIronically the website is locked to dark mode and doesn’t use the (not so) modern prefers-color-scheme.
- donatj 8mo agoI've been doing this webdev things too long. Many of these "old" examples are news to me.
- mdavid626 8mo agoProbably half of it still doesn’t work in Safari.
- wildrhythms 8mo agoDon't worry, I'm sure in a year about 30% of it will work! (But not on mobile)
- mdavid626 8mo agoI wish we could just ignore Safari on iOS.
- vaylian 8mo agoSafari is the new IE6
- sollniss 8mo agoI 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. ¯\_(ツ)_/¯ https://jsfiddle.net/89t1rd2u/ https://jsfiddle.net/89t1rd2u/
- dalmo3 8mo agoTry ::before and css-counters.
- sollniss 8mo ago::before has the same problem. You can't align text inside `content:` to the right. Probably because each ::before is handled separately and can't see the sibling's content length.
- dalmo3 8mo agoAh, I only now opened your example code. If you wrap the li contents in a div, you can handle them as a unit separately from ::before. Then subgrid solves the problem of treating nested elements as siblings. https://jsfiddle.net/3617wdmf/1/ https://jsfiddle.net/3617wdmf/1/
- p0w3n3d 8mo agoLive 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
- szszrk 8mo agoyeah, it doesn't work on desktop Firefox or desktop Chrome-based browser either. That one is a dud. Most others work for me, though.
- folbec 8mo agothere is a bug in the CSS : explicit border:2px solid var(--border); on the input which takes priority over the class : .demo-uv-input:user-invalid { border-color: var(--red-muted); background: rgba(239,68,68,.04); } YMMV but when corrected it works for me on latest Edge, Chrome, Firefox (Windows versions)
- selimco 8mo agoThe drop cap example is also broken for me on the latest Firefox version. It still requires a manually set line-height of 1.
- throwaway290 8mo agoAlso broken on latest Safari & iOS. They should add screenshots how it supposed to look
- p0w3n3d 8mo agohowever, it would defeat the purpose of the live demo...
- throwaway290 8mo agoThey can have both like MDN...
- moho 8mo agoIn 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; } }
- ffsm8 8mo agohttps://caniuse.com/css-nesting https://caniuse.com/css-nesting 86-90% support
- retinaros 8mo agoLooks vibecoded
- vntok 8mo ago"That plank over there looks nailed."
- kittbuilds 8mo ago[dead]
- Areena_28 8mo agoGreat resource! Browser support tables make it production-ready. How does it compare to CSS-Tricks almanac for edge cases?
- thedelanyo 8mo agoCould you please add pwa, so I can install it on my phone for easy access?
- aspizu 8mo agoFunny how half of the shit there does not work for me, even though I'm using latest Chrome (Helium)
- demetris 8mo agoI didn’t pay close attention to the domain and I thought it was the other one: https://moderncss.dev/ https://moderncss.dev/ 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-css/ 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: https://omnicarousel.dev/docs/css-tips-know-your-width/ https://omnicarousel.dev/docs/css-tips-know-your-width/
- sevenseacat 8mo agoWell 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!
- gormen 8mo agot’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.
- trepaura 8mo agoThese 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.
- hk1337 8mo agoThe 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/Values/color_value/light-dark https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...
- naeemnur 8mo agoHey all, creator here. Went through the comments and made a bunch of fixes based on the feedback: https://modern-css.com/changelog/ https://modern-css.com/changelog/
- lovegrenoble 8mo agoBookmarked, Thank you!
- T3RMINATED 8mo ago[dead]
- krystofee 8mo agoFunny that this age was probably written by AI hence the "how to write modern css" is completely irelevant.
- animanoir 8mo ago[dead]
- HumanOstrich 8mo agoWhere's the RSS feed? I'm not signing up for email newsletters.
- grabshot_dev 8mo agoThe 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.
- yokuze 8mo agoAlternate 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.
- socalgal2 8mo agoIs it 10-20% of "your users" or 10-20% of the world but <1% of "your users"
- yokuze 8mo agoI don't follow. Assuming that the caniuse data is also representative of your users (a big assumption), then it's 10-20% of either group. Adjusting the % for the subset that is "your users" can result in either a higher or lower %. Let me know if I'm missing something.
- vruppert 8mo agoI 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
- efortis 8mo agoI just refactored my colors to use the light-dark function: https://github.com/ericfortis/mockaton/commit/acf21803480412381f7801f5a34eb49f8ba9202b https://github.com/ericfortis/mockaton/commit/acf21803480412... …and it deduplicated autocomplete suggestions in WebStorm
- bovermyer 8mo agoThis 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.
- suralind 8mo agoLove this website. Definitely bookmarking for future reference.
- firemelt 8mo agowe need more of this kind of improvements
- dennysora 8mo agoI like tailwind.
- ranman 8mo agoIt's a little ironic that the text wrap doesn't work on some of these examples on WebKit.