"Your CSS has dirty secrets and Wallace knows them."
is just a title that hits. Immediate guilt and fear flow through your veins. "Does it know about... the floats?", you ask yourself. Ha, who are you kidding, of course it does. And that tiny 8px font-size. Thought you'd get away with that, did ya?
Project Wallace homepage. A hero banner says "Your css has dirty secrets and Wallace knows them" against a mostly dark gray background.
Project Wallace analysis page. The page header shows the page's title inline with toggles for choosing whether to analyze a URL, file or pasted CSS. The same gradient dark background is used.
Tried some wildly different fonts but I think Teko is just the best reflection of my border-radius:0 design. Added 2 gradients to the header at a late stage, quite like them. Added a lot more spacing to the homepage, but made the forms to submit URL a bunch smaller.
2 improvements shipped today!
- denser analysis view (if you're on Firefox, or you have experimental grid-lanes enabled in chromium)
- analyze custom element selectors, like details-utils, is-land, pagefind-search, etc. etc. (h/t @bkardell.com for the idea!)
Over 10,000 views so far and traffic is only slowly declining. One of the best things I've ever made and it's only going to be better next year!
The sad, sad irony here is that the actual file that contains this is named [domain]_default.critical.css
There's a huge blob of inlined sourcemaps, but also TONS of other, seemingly out-of-context comments.
Graph showing comment size by percentile in CSS files. 75th percentile is under 4kb, the 90th percentile being 11.4kb, and a callout at the bottom saying there was one outlier with 8mb worth of comments
Did they have an entire novel in there?!
Come read the biggest-ever article we've ever done!
Partial screenshot of a blog post that announces The CSS Selection
Excerpt from The CSS Selection about @media: "The max-width and min-width features are quite unexpectedly used on most websites (88% and 86%). I did not expect prefers-reduced-motion to have such a great adoption rate even though it’s almost half of that of the top two. There are some other surprises here, like forced-colors being used a bunch more than prefers-color-scheme." Below that is a sponsored block, reading: "Polypane wrote the complete guide to media queries" with a link to the Polypane website.
align-content: home-stretch!
Working on the last few bits so this beast can be released on Friday!
🫶🫶 Shoutout to @polypane.app for making this first edition possible. Imagine having incorporated several links to Polypane in the content already, and then @kilianvalkhof.com stepping up. 🫶🫶
Did you know @projectwallace.com has a CSS Complexity calculator?
It's a fun complement to CSS Specificity. It doesn't measure the impact a selector has but the number of parts that it has. more parts: harder to understand for humans.
www.projectwallace.com/selector-com...
A social media preview image, or card. The title is "The CSS Selection". Subtitled: "The state of real-world CSS usage, 2026 edition". The bottom shows some stats: 100+ metrics, 100,000 websites, 41% use :has(), 9.61% use @container. The design shows a bright grean/teal outline and a dark background with a dark-green to dark-gray gradient from top to bottom. There are two seemingly random rectangular shapes in the top right, probably visual decoration.
We're progressing! Hoping to launch The CSS Selection later this week, maybe before the weekend if all goes well. Also hoping that the estimated reading time of 45-60 minutes won't scare people too much 😅
Making a very long checklist of what needs to go in before this goes live. Most content writing is done now. Need a lot of accessibility checking to make sure charts and tables work. Then making raw data available for download. Social images, maybe baseline data. The lot!
More CSS analysis more better!
A table showing min, max, mode, median and several percentiles for a dozen CSS metrics. It shows that 21000 websites were analyzed.
First metrics are in! 21,000+ websites analyzed. The `max` column is absolutely bonkers.
Plaintext table of attached screenshot here: gist.github.com/bartveneman/...
Top nerdery this
A good entry for @cssweekly.com and @stefanjudis.com's newsletters.
The dust of decades settles on your keyboard as you push aside lines of vendor prefixes
Your fedora casts shadows over cryptic CSS hacks from another era. "This belongs in a museum" you mutter
ReliCSS: The front-end archaeologist's tool for navigating legacy CSS
www.alwaystwisted.com/relicss/
🙏🖤
Would a standalone page (like layers analysis, custom property analysis/etc) make sense then?
Will consider leaving it in then. Currently rewriting the analyzer with our own parser, so not sure yet if I'll succeed but it's worth a shot.
So it actually helps finding the most crappy CSS? Or is it more something to get a feel for how bad things are? Or maybe both?
Do you ever use or look at the browserhacks analysis that we provide? Old IE hacks like `*zoom: 1`, or others like old Webkit stuff `.selector:not(*:root) {}`, etc. etc.
Considering removing it from our analysis to speed it up and reduce bundle size.
It only took 14 years so far
How to calculate CSS code coverage with @playwright/test 🎭
www.projectwallace.com/blog/how-to-...
Thanks for the shout out! Glad you like it 😃
BIG shoutout to @netlify.com to allow projectwallace.com to run on an Open Source sponsered plan.
This allows me to keep shipping many updates for free to everyone to use 🫶
Project Wallace CSS Coverage CLI tool showing 2 failures: global line coverage is lower than the configured 90% and 4 files don't meet the per-file coverage threshold of 70%. Below that is shows an excerpt of a CSS file with markings for the lines that are not covered.
How to calculate CSS code coverage with @playwright.dev
www.projectwallace.com/blog/how-to-...
It looks like the folks at cssstats.com did a massive overhaul. Lots more stats, comparing websites and saving snapshots, for free! 😱
It looks like it's still early days because I've encountered many issues but they've taken a giant leap.
If you really hate looking at unused custom properties, maybe clean them up? 😇
I know looking at unused custom properties not applied in devtools is not the same as potentially flawed static analysis on a large chunk of CSS, but hey...
Open sourcing css-code-coverage
github.com/projectwalla...
It is *very* early stages, it needs a ton more tests, docs, cli tool etc. but is for the folks who want an early look.
But the good news is: @netlify.com is now serving our website! 🥳
Looks like we're back. Keeping a close eye and hoping we'll stay online while we still need to finalize switching registrars.
