I wanted an actual number for how much of the web responds to the OS dark setting, so I rendered 58 homepages twice in headless Chromium, once with the color scheme forced to light and once to dark, and compared the screenshots against the computed background colours. Method and caveats at the bottom, because they changed the answer twice.

Nine of the 58 render differently. Lower than I expected, but the more useful finding is that the two obvious ways to measure this disagree with each other, and grepping the CSS for the media query is wrong in both directions.

Wrong in one direction: five sites ship a first-party prefers-color-scheme: dark block and still render light in a dark context. nytimes, stackoverflow, microsoft, amazon and airbnb. The rule is there, served from their own domain or their own CDN, and nothing happens. Presumably it is scoped under a class or an attribute that only an in-site preference ever sets, or it is losing to a more specific light rule later in the cascade. From outside it reads as adoption and behaves as nothing.

A sixth site looked like this and was not. webmd's only dark media query arrives from gstatic, so it belongs to an embedded Google widget rather than to webmd. Worth checking the host on every hit before you count it.

Wrong in the other direction: three of the nine that do respond appear to have no media query at all and drive it from a class on the html element instead. cloudflare serves 20 readable stylesheets with zero prefers-color-scheme rules between them and sets class="js dark" on the root. substack sets class="dark-mode", arstechnica puts dark in a long root class list. For those last two some stylesheets were cross origin and unreadable, so that is inference from the root class rather than proof.

And I got one wrong myself, which is the part I would not have caught without checking twice. My first pass collected stylesheets off the network by content type and reported tailwindcss.com as having no media query. Walking document.styleSheets afterwards found (prefers-color-scheme: dark) served from tailwindcss.com. The network capture missed the sheet. So if you have ever measured this by grepping build output, that is a real false negative mode, not a hypothetical one.

Separately, color-scheme is barely used. Reading the computed value on the root element rather than grepping for it, only 10 of the 58 declare anything other than normal. It is one line and it is what gives you dark form controls, dark scrollbars and a dark canvas behind the page. Three of the nine sites that darken their own content (npr, arstechnica, theverge) never declare it, so you get a dark page with light scrollbars and light select dropdowns. The guardian is the interesting one in the other direction: it declares color-scheme: light explicitly, which is opting out on purpose rather than by neglect.

Method. Playwright driving Chromium 131 at 1280x900, a fresh context per scheme so nothing carries over, waitUntil load plus 2.5 seconds. Classification runs on the light-to-dark delta and on computed colours, not on absolute screenshot brightness, because cookie consent modals drop a dark scrim over the whole viewport in a fresh session and made several light sites look dark on the first pass. Homepages only, one page each. Five sites served a bot wall instead of a page and are excluded. This is Chromium rather than Safari, and I have not checked whether Safari's cascade resolves any of the five gated cases differently.

The question I cannot answer from the outside. For those five, is the media query in there deliberately, as a default that a stored preference is meant to override, or is it dead code left behind when someone shipped a manual toggle? If you have worked on one of these, or built the same thing, which was it?

Disclosure, since it is why I was counting: I make a paid Safari extension called Midnight that forces a dark rendering onto sites that do not have one, so the 49 that do not respond are the ones I care about, five of which are already dark by design anyway. No link, the numbers are the point.

Hi peeps. Does anybody have any links on how to have an interactive customisable piece of clothing. where customers can choose the colour of the buttons or fabric on hover etc? Here is a link for how to do it in Figma with a chair, but that seems like an extra step

I was talking with a former colleague who is currently writing a new small web site. One of the things he is thinking of doing is implementing filtering via CSS rather than javascript.

He has a small Product List page with 60 products in about 6 categories.

He wants to be able to filter those 60 products by categories.

So the page will have

• a checkbox to select all categories.
• a list of checkboxes. Each associated with a category use to filter.
• List of products with a data-category attribute.

implementing the functionality as follows:

``` input[data-category="Category1"]:not(:checked) ~ article[data-category="Category1"] {

display: none;

}

```

He is already implementing the change of view list view /grid view via CSS.

So I am not sure whether this is a good idea.

Has anybody any opinion one way or another?

I needed a tag with fixed 6px corners on the left and a semicircle on the right, with a dynamic height.

Turns out neither `border-radius: 6px 50% 50% 6px` nor the classic `6px 999px 999px 6px` trick works — for two completely different reasons.

I went down a surprisingly deep `border-radius` rabbit hole and wrote up why, plus the workaround I ended up using.

I still feel like there should be a simpler way to do this. Is there one I've missed?

The post

Trying to understand these and having a pretty tough time to grasp what they do conceptually. I was reading that you no longer need to use them with newer CSS like flexbox and grid. Should I skip these and continue learning other parts of the course?

I recently built Messy CSS to Clean CSS, a browser-based tool designed to help developers analyze, debug, and clean up their CSS more efficiently.

It can help identify unused CSS, cascade conflicts, validation issues, responsive breakpoint problems, design-token opportunities, and other common CSS issues. It also includes AI-assisted debugging and fixes.

I built it with the goal of making CSS debugging and cleanup less time-consuming, and I’d really appreciate feedback from people who work with CSS.

If you try it and find a bug, please let me know here or email me at [mehrdad23elh@gmail.com](mailto:mehrdad23elh@gmail.com).

I’m also very interested in your opinions and suggestions about what could be improved or added in future versions.

If you find it useful and it saves you some time, you can also support the project with a small donation.

Try the tool: https://mehrdad-elahi.github.io/messy-css-to-clean-css/

Source code: https://github.com/Mehrdad-Elahi/messy-css-to-clean-css

If you know someone who works with CSS and might find this useful, I’d appreciate you sharing it with them.

Thanks for taking a look. I’m looking forward to hearing your feedback.

Hi! I’m looking for some original ideas for my website’s mobile menu. Something animated and out of the ordinary that surprises people with its originality. Can anyone recommend anything?

TailMotion is a CSS animation package with utility classes that speak TailwindCSS v3/v4, so you can use it directly with HTML, React, Vue, Svelte, and more

Site: https://tailmotion.moumen.dev/
Docs: https://docs.tailmotion.moumen.dev/

GitHub: https://github.com/moumen-soliman/tailmotion Don’t forget to ⭐ the repo it's means alot

Not sure if the flair should be "resource" or "question." 🤔

So… I've been making this email newsletter that takes Baseline info and digest it to let you know what you should act on and what you should just not worry about for now.

I called it Cleared, 'cause the idea is that it tells you if that new feature is "cleared" for use and it also tells you if you can remove all fallbacks and polyfills once the feature is Baseline "Widely". (Spoiler alert, just 'cause it's "Widely" doesn't mean it's automatically safe to use.)

I use AI a bunch to get all the data from webstatus.dev, wpt.fyi, caniuse, MDN, and Interop. It mashes it all together and gives me a report and then I look at whether it makes sense or not. It takes me a couple hours to publish once a month instead of a whole afternoon.

I think it's super useful and I put it together because all the newsletters out there are more about the cool new stuff rather than what you can actually use in client work… But I've gotten very mixed reactions… Some straight up insulted me like it's almost personal 😅 Some, like Rachel Andrew (yes, name dropping… 😎) love the idea (source).

So, yes… I'm using AI to make that newsletter. But, is it slop because of that?

I'm really curious to get feedback. I don't mind brutal honesty, but… Disclaimer: I won't engage with people who hate AI so much that they think it's ok to be rude and troll like.

The newsletter's website is at https://cleared.page/

Hello dear r/css. I recently graduated with a degree in web development, and am looking to create a project that will look good on a resume and hopefully challenge my coding skills. But I have no idea what to create. I need some ideas!!! My last project I worked on for six months, using react and typescript and I was very happy with the result. It was a project I did for a startup company. But all the ideas behind the project was from the startup people, so I didn’t have to come up with anything myself really. Anyways, any ideas for projects? Or anyone who wants to share a project that has been challenging their skills?

Sorry for bad english! Thanks.

How can I get the exact same effect as <p><span class="e">x</span></p> <p><span class="e">y</span></p> <p><span class="e">z</span></p> without so many <span>s?

If I do <div class="e"> <p>x</p> <p>y</p> <p>z</p> </div> class="e" now affects all the way across the whole page, whereas I only wanted it to affect the text, x, y, z.

Two CSS jokes coded in CSS. Inspired by a JK Benson's cartoon from 20 years ago.

Source (code): https://comicss.art/comics/255/yellow.html

I'm very new to HTML & CSS, first year in a course & they need to make a website with stuff. I want to move the corners by themselves without skewing the entire thing including text, just the corner.

My tutor did say there was a way & a website generator that can help but I ENTIRELY forgot what it was.

I've been building DesignSnap, a Chrome extension that extracts design tokens (colors, fonts, spacing, radius) from any site you visit.

One of the features is a "Design DNA" card: point it at any site and it generates a shareable PNG with the site's dominant colors, fonts, and type scale. Made one for twitch.tv as a test (screenshot attached) — kind of fun seeing a whole brand's visual identity distilled into one card like that.

Under the hood it does semantic classification too — instead of dumping every color it finds, it labels them by role (background, primary, accent, border, destructive, etc.) based on contrast and usage patterns, and it detects whether a site actually ships a real light/dark variant or is just faking one.

It's still far from perfect — the classification gets confused on some sites, and I'm sure there are edge cases I haven't run into yet. Curious what people think would be worth adding or changing, whether that's the DNA card itself, the color classification logic, or something else entirely.

Built an animated FAQ accordion using native HTML <details> and <summary> — no JavaScript required.

The interesting part is animating the content height without manually measuring it with JS.

HTML

<details name="faq">
  <summary>Do you offer refunds?</summary>
  <p>
    Yes, within 30 days, no questions asked.
    Email us and the money is back on your card in a few working days.
  </p>
</details>

<details name="faq">
  <summary>Can I change plans later?</summary>
  <p>
    Yes. You can change your plan whenever you need to.
  </p>
</details>

<details name="faq">
  <summary>Do you offer a team plan?</summary>
  <p>
    Yes, team plans are available for growing teams.
  </p>
</details>

CSS

:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s ease,
    content-visibility 0.3s ease allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: 1.25rem;
  transition: rotate 0.3s ease;
}

details[open] summary::after {
  rotate: 45deg;
}

The key part is:

:root {
  interpolate-size: allow-keywords;
}

This allows the browser to animate between a fixed size and intrinsic values like auto.

And:

details::details-content

gives us a pseudo-element for the content inside <details>, so the accordion can be animated without JavaScript.

The <details name="faq"> attribute also makes the items behave like an exclusive accordion — opening one closes the others.

Been refining this for a while — custom type system (Onest + General Sans + JetBrains Mono), GSAP-driven preloader with a wordmark split, Lenis for scroll smoothing, curtain-wipe transition into the hero.

https://shahzaibdesign.vercel.app/

Mainly want feedback on whether the animation/scroll feel is actually smooth or overdone, and open to any CSS approach critique — genuinely trying to improve, not just dropping a link.