Modern CSS Code Snippets: Stop writing CSS like it's 2015

by eustoria • 5 months ago

708 305 5 months ago

laacz• 5 months ago

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.

apsurd4• 5 months ago

AI 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• 5 months ago

You’re right not to trust it, it’s wrongly calling sibling-index() widely available. And that’s the first example I checked.

piskov2• 5 months ago

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.

nicoburns• 5 months ago

I definitely don't agree with all of these, but grid centering is pretty nice and has a lot fewer quirks than Flexbox based solutions.

asddubs• 5 months ago

What are the quirks with flexbox centering?

perardi• 5 months ago

I 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.

piskov2• 5 months ago

Just 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• 5 months ago

0.02% as of January 2026: 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/in...

ktpsns• 5 months ago

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.

h4x0rr2• 5 months ago

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

lawn• 5 months ago

Is jumping between files supposed to be difficult or something?

paradox4603• 5 months ago

Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles

zelphirkalt3• 5 months ago

What stops you from doing the same thing in CSS? It is trivial to assign a specific CSS class to an element that is the root node of a "component" and scope rules under that.

crooked-v• 5 months ago

Tailwind is a direct response to how the "C" in "CSS" actually sucks, so there's no surprise that it's so popular.

spartanatreyu• 5 months ago

The "C" (Cascade) in CSS doesn't suck, the education about it sucks.

People don't know how it works, then things go wrong so they learn to work around it.

That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind.

The cascade is actually awesome, super powerful and if you know how to use it, it can greatly simplify your code.

Education is the problem and the solution.

---

To anyone outside the CSS space, this is the closest analogy I can find:

In the American education system, there was a recent-ish change where children are "taught" to read using a method of just learning the shape of every word (e.g. "thermally" has a th at the start and ly at the end, so it must be the word "thermally", despite other similar looking words like thematically).

The method was disproven but the American education system still uses it.

Now illiteracy rates are climbing where almost 1/4 Americans (USA) can't read.

It's basically the same thing with CSS, where developers don't know what the code they're reading/writing is actually going to do.

dbbk3• 5 months ago

I mean, the cascade really doesn't suck though does it. You really want to set font families and sizes on every p tag?

mattlondon• 5 months ago

Wait until you see React & JSX...

At least html and CSS are both presentation. React/JSX now confuses presentation and business logic.

lateforwork5• 5 months ago

React/JSX now confuses presentation and business logic

React was originally designed to be the "V in MVC". You can still use it that way. React becomes very simple when you only use it as the V in MVC.

bromuro• 5 months ago

React is great for MVVM indeed. Who is still using MVC in 2026?

madeofpalk• 5 months ago

I think you're confusing business logic with view logic.

namuol9• 5 months ago

The deadest horse in web development is the myth of “separation of concerns”

appplication2• 5 months ago

You can separate concerns without violating locality of behavior, and that’s exactly what tailwind does.

It admittedly does not do a good job at being very DRY but I think that’s poorly applied to HTML/CSS in general, and the most DRY css is often over abstracted to the point of becoming nigh uninterpretable.

IgorPartola• 5 months ago

I was recently doing some very specific web scraping of some very public very static documents. About 25% of them use a soup of divs with hashes for class names. Not a <main> or <article> or <section> in sight. I am fine with the idea of what tailwind does but like at least using semantic tags where appropriate could be a thing.

kristopolous4• 5 months ago

It's a choice. The dominant paradigms choose not to.

I disagree. And that makes me the loser here

zarzavat• 5 months ago

I don't use Tailwind, it's a solution to a problem I don't have.

I can understand how it might be useful for certain types of web development, e.g. landing pages where the content and styles are tightly coupled.

So as a technology, it's OK. But my god its userbase is toxic and obnoxious.

the_other2• 5 months ago

SoC is how all maintainable software is built. A function for A, a class for B, DDD-spec'd modules and features, databases on separate machines, API definitions, queuing systems, event systems, load balancing, web servers.

You don't even need to think of the web to see how content and presentation are different. Try editing a text file with hard line breaks in and you'll quickly understand how presentation and content are orthogonal.

tgv• 5 months ago

I don't think "separation of concerns" is entirely dead. Ideally, the CSS is readable and maintainable, and that implies structure. If you have a bunch of (co-)related components, you don't want to find/replace tailwind class names when you need to change the layout. So you separate that part of the layout in classes based on (layout!) functionality. You can see that as "concerns."

nonethewiser2• 5 months ago

I can't believe this isnt better understood. Style definitions on reusable components are good. The idea that your css doesn't have to know about your html just creates tons of problems and complexity. Global themes and reusable styled are fine.

If we are talking about statically defined html then sure. make your global css files.

darekkay• 5 months ago

HTML vs. CSS is a separation of technologies. If HTML was really only about the content and the CSS was only about styling, we wouldn't have to write div soups to style our websites (.container-wrapper .container .container-inner { /* "separation" */ }) and we wouldn't have to adjust our HTML when we change the layout.

fainpul• 5 months ago

we wouldn't have to adjust our HTML when we change the layout.

You don't have to: https://csszengarden.com/

WorldMaker3• 5 months ago

I find that most div soup is going away with CSS Grid. CSS Grid is often best when you lose wrappers and nesting. subgrid and display: contents help pop layers when you can't touch the HTML nesting, but now a lot of nesting feels unnecessary in the first place.

pjmlp2• 5 months ago

We only have to write div soups to style our websites, because people keep misuing a platform for interactive documents for an OS abstraction.

Sateeshm3• 5 months ago

Tailwind is not what you're describing.

digitalPhonix2• 5 months ago

Isn’t that what utility classes are? Shorthand for inline styles?

Not saying it’s good/bad, but it feels like that’s the use case

raincole3• 5 months ago

Yeah and it's a really good idea. You can't really 'separate layout from style.' The layout and the style are both parts of the UI. HTML isn't the content, it's the layout.

Even if you believe separation of concerns is the eleventh commandment, HTML and CSS are the same kind of 'concern' anyway. They're both at representation layer. Pretending you can decouple them is just burying the head in the sand.

Sateeshm3• 5 months ago

Thank you. This just makes sense. In fact, seperating them into different files don't make much sense when you think about it.

nilslindemann3• 5 months ago

Yeah. There is no need to obfuscate your code, just use Tailwind.

namuol9• 5 months ago

Obfuscate? I can learn tailwind and use it in dozens of projects. I can use tailwind in my project and onboard dozens of developers immediately. I can learn your CSS conventions and use them in exactly one project.

sylario• 5 months ago

I do not work frontend and yet, I always end up having to do some CSS here and there.

I have never been happy on how I manage CSS. With tailwind, I am still unhappy about my styles but I can make my ugly UIs faster.

mb21003• 5 months ago

If everything in your code is a React component, I get why you would just want to write the styles right there.[0] Then again, why write `<Button>` if you could just write `<button>` and style it with standard CSS.

[0] https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-...

rafark5• 5 months ago

Because button is literally anything clickable. Not everything is a boxed button. You cannot just globally add a style to <buttton> and call it a day. For example, an upvote (^) button, a close (x) button, etc. A lot of clickable elements aren’t inside a [click me] box

skeptic_ai2• 5 months ago

What if you need 3 levels of html tags?

ggregoire2• 5 months ago

If everything in your code is a React component, I get why you would just want to write the styles right there.

Even for keeping the style close to the component, you can just use standard css.

Create a folder Button, create two files Button.tsx and Button.css in that folder, import the css file in the tsx file, add a class "button" on the first element the tsx file renders, start all the rules in the css file with ".button " to encapsulate the style.

People will say it's too much work, but it took me like 5 sec.

skeptic_ai2• 5 months ago

That’s separation of technology not concerns. The concern is the component itself.

peacebeard• 5 months ago

Well put.

rafael-lua• 5 months ago

Are we still complaining about Tailwind? This ship has sailed. The world is so much better than the old BEM/LESS hell, it is wonderful. UnoCSS is even greater in empowering frontend developers.

AltruisticGapHN• 5 months ago

BEM is actually not hell, since the whole point is to have classes with a specificity of 1, making precedence of CSS rules easy to figure out.

Non-BEM CSS with ids and multi-classes everywhere was hell.

chasd00• 5 months ago

If I may be so bold, the coding agents are really good at this stuff. Save yourself the pain of front end and make a clanker do it. Or at least make the clanker to the heavy lifting and just do tweaks yourself.

abustamam• 5 months ago

Having worked on teams that wrote bad (S)CSS and teams that wrote bad tailwind, I prefer bad tailwind.

With tailwind, I can guarantee that changing a style in one component will only change that component. With css, there is no such guarantee. So of course the (wrong) way many devs fix it that is to add a new class, probably doubly specific, sometimes with important, and then everyone is sad.

rafark5• 5 months ago

And thank god (or Adam) for that. Tailwind makes me much more productive.

cush4• 5 months ago

Separation of formatting/representation was invented? Where was I?

saidinesh5• 5 months ago

It really depends on the websites no?

If you're building a "webapp" where you think in terms of components, no point keeping the style sheet separate..

If you're building a "website" which is basically a list of hyperlinked documents with the same styling, having just one style sheet would make sense...

Of course, there's a lot of gray area in between the two...

At the end of the day, the most that most of us can really do is be annoyed at the quirks of these leaky abstractions in the large codebases that's thrust upon us.

jgalt212• 5 months ago

CSS and JavaScript are like two dysfunctional law enforcement agencies fighting over jurisdiction.

sublinear• 5 months ago

All web standards are like this, and then the battle continues when it comes to browser implementation.

Bengalilol• 5 months ago

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.

graypegg2• 5 months ago

In 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

presentation• 5 months ago

Problem 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

thih92• 5 months ago

most of those creative examples are in the 40-50% browsers support range.

Not if you filter the examples. Click "widely available".

MD87• 5 months ago

First widely available one I saw was this: 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.

maxloh2• 5 months ago

It takes time. Browser vendors add support for those features now, in the hope that they will become widely available one day.

user3939382• 5 months ago

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.

azangru5• 5 months 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• 5 months ago

I think the idea here is that the DOM was designed as a model for document presentation, not for GUI layout.

rixed• 5 months 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• 5 months ago

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!

cwillu• 5 months ago

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.

deadghost• 5 months ago

So where are we at with utility libs (tailwind/tachyon) vs inline css in js vs preprocessors (sass/scss) vs vanilla modern css?

gassi• 5 months ago

Wherever 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!

ed_mercer2• 5 months ago

Missed opportunity to turn this into a poem

lol768• 5 months ago

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?

nine_k3• 5 months ago

No, 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• 5 months ago

Absolutely. 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• 5 months ago

Their labeling of feature availability is messed up. It says sibling-index() is widely available when it's not even available in Firefox yet.

holistio• 5 months ago

Most of this feels like "stop writing CSS like it's 2015, instead come to 2022"

652• 5 months ago

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.

k33n2• 5 months ago

Modal containers should be position: fix; with their own internal flexbox or grid btw.

652• 5 months ago

Not 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• 5 months ago

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.

silverwind• 5 months ago

I like 2-4 but I despise nested selectors. They make selectors ungreppable.

pphysch• 5 months ago

Why/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.

nilslindemann3• 5 months ago

My favorite is @layer

jjcm• 5 months ago

big +1 on #1.

As a tip - most LLMs are unaware it exists due to either knowledge cutoff or not having enough training data for it.

As a recommendation, include some examples of it in your AGENTS.md. Here's what I use:

--------------------------------------

## CSS nesting (required) When writing CSS (including component `css()` strings and `soci-frontend/soci.css`), *use modern CSS nesting* where it improves readability and reduces repetition.

- Prefer nesting with the `&` selector for pseudo-classes / pseudo-elements and compound selectors. - Avoid duplicating the parent selector when nesting can express it once. - Reference: [MDN `&` nesting selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/S...)

### Quick reference

#### Pseudo-classes / no-whitespace attachment

```css .button { color: var(--text);

  &:hover {
    color: var(--text-secondary);
  }

} ```

#### Pseudo-elements

```css .fade { position: relative;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
  }

} ```

#### Descendant nesting (whitespace implied)

```css .card { padding: 12px;

  .title {
    font-weight: 600;
  }

} ```

#### “Reverse context” (`.featured .card`) using `&`

```css .card { .featured & { border-color: var(--brand-color); } }

Eric_WVGG• 5 months ago

Mine is text-box: trim. Twenty years of trying to explain to graphic designers why it’s next to impossible possible to get the top of a capital letter to a box, I feel free like a bird.

k33n2• 5 months ago

Once Firefox supports it, we will be golden.

namuol9• 5 months ago

Don’t forget @layer!

eiiot• 5 months 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• 5 months ago

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.

josephcsible2• 5 months ago

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.

oddevan• 5 months ago

Agreed; 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• 5 months ago

Even "newly available" doesn't seem correct. For example:

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/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.

maxloh2• 5 months ago

This site shouldn't be the one to blame. Instead, we should probably ask Mozilla to be more standards-compliant.

zelphirkalt3• 5 months ago

I don't see Mozilla obligated to follow whatever Google cooks up and declares a "standard".

pchangr• 5 months ago

This is an experimental feature. Not part of the standard yet .. imho.. shouldn’t be included (yet)

ehsankia2• 5 months ago

Sometimes I'm developing an internal tool or something only for myself / handful of people. I'm perfectly fine saving time and complexity using a one liner modern CSS solution instead of having to rely on some hacky unreadable code to support 10 years of legacy browsers.

josephcsible2• 5 months ago

The latest version of Firefox is not a legacy browser.

noduerme2• 5 months ago

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.

dk8996• 5 months ago

Very cool. Could you include a skill.md of AGENTS.md for this?

marcuswestin• 5 months ago

“Please study the material on 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/ is very cool. Could you include a skill.md or Agents.md for this?”

Or! “Please do: https://news.ycombinator.com/item?id=47030502“ =]

</end_snark>

jer0me• 5 months ago

Error: Stray end tag end_snark.

sthottingal• 5 months ago

There is one already https://skills.sh/paulirish/dotfiles/modern-css I am not sure whether it covers everything from https://modern-css.com/ though

pier25• 5 months ago

Ironically the website is locked to dark mode and doesn’t use the (not so) modern prefers-color-scheme.

donatj• 5 months ago

I've been doing this webdev things too long. Many of these "old" examples are news to me.

sollniss2• 5 months ago

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. ¯\_(ツ)_/¯

https://jsfiddle.net/89t1rd2u/

dalmo32• 5 months ago

Try ::before and css-counters.

sollniss2• 5 months 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.

p0w3n3d2• 5 months ago

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

szszrk• 5 months ago

yeah, 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• 5 months ago

there 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• 5 months ago

The drop cap example is also broken for me on the latest Firefox version. It still requires a manually set line-height of 1.

throwaway2902• 5 months ago

Also broken on latest Safari & iOS. They should add screenshots how it supposed to look

moho• 5 months ago

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; } }

ffsm8• 5 months ago

https://caniuse.com/css-nesting

86-90% support

retinaros• 5 months ago

Looks vibecoded

vntok• 5 months ago

"That plank over there looks nailed."

mdavid6262• 5 months ago

Probably half of it still doesn’t work in Safari.

wildrhythms• 5 months ago

Don't worry, I'm sure in a year about 30% of it will work! (But not on mobile)

mdavid6262• 5 months ago

I wish we could just ignore Safari on iOS.

vaylian• 5 months ago

Safari is the new IE6

Areena_28• 5 months ago

Great resource! Browser support tables make it production-ready. How does it compare to CSS-Tricks almanac for edge cases?

thedelanyo• 5 months ago

Could you please add pwa, so I can install it on my phone for easy access?

aspizu• 5 months ago

Funny how half of the shit there does not work for me, even though I'm using latest Chrome (Helium)

demetris2• 5 months ago

I didn’t pay close attention to the domain and I thought it was the other one:

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

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/

sevenseacat• 5 months ago

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!

gormen• 5 months ago

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.

trepaura• 5 months ago

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.

hk1337• 5 months ago

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

naeemnur• 5 months ago

Hey all, creator here. Went through the comments and made a bunch of fixes based on the feedback: https://modern-css.com/changelog/

lovegrenoble• 5 months ago

Bookmarked, Thank you!

krystofee• 5 months ago

Funny that this age was probably written by AI hence the "how to write modern css" is completely irelevant.

HumanOstrich• 5 months ago

Where's the RSS feed? I'm not signing up for email newsletters.

grabshot_dev• 5 months ago

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.

yokuze2• 5 months ago

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.

socalgal2• 5 months ago

Is it 10-20% of "your users" or 10-20% of the world but <1% of "your users"

yokuze2• 5 months ago

I 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.

Twey• 5 months ago

This site claims the `initial-letter` property is newly supported, but actually it is still unsupported in most recent Firefox and Safari.

vruppert• 5 months ago

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

efortis• 5 months ago

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

bovermyer• 5 months ago

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.

suralind• 5 months ago

Love this website. Definitely bookmarking for future reference.

firemelt• 5 months ago

we need more of this kind of improvements

dennysora• 5 months ago

I like tailwind.

ranman• 5 months ago

It's a little ironic that the text wrap doesn't work on some of these examples on WebKit.

Modern CSS Code Snippets: Stop writing CSS like it's 2015

Related Stories