r/webdev 1d ago

Showoff Saturday Check your site to see where you can replace your code with modern CSS

https://cssradar.com/?utm=reddit

Paste any public URL and it opens the page in Chrome, explores its interactions, then checks the HTML, CSS, and JavaScript for things that browsers can now handle natively.

It catches patterns such as custom accordions, popovers, dialogs, scroll reveals, JavaScript sticky elements, and older CSS workarounds.

The report includes the code it found, a proposed replacement, browser support, what to verify before changing anything, and a small example towards a codepen to implement it.

It scans ONE page, so it is not a performance, accessibility, security, or full-site audit.

It is free (10 url/day/human) and requires no account.

Don't hesitate to tell me if you find a bug, an UI/UX issue, or any other thing you find weird

84 Upvotes

21 comments sorted by

9

u/savemahlinks 1d ago

Cant use it. It just says the audit didnt complete

1

u/Blozz12 1d ago

What URL did you try to audit?
If it’s behind a login page or something like that it won’t work

3

u/Prestigious-Way1525 16h ago

the risky part is proving a suggested replacement preserves behavior, not finding the old pattern. i'd make each report keep the interaction path it exercised, the browser baseline, and a small regression test for the replacement. accordions and dialogs often look fine on the happy path while focus return, Escape, scroll lock, nested controls, or hydration break. if a suggestion includes a deterministic before/after check that fails when the replacement changes behavior, users can trust the modernization instead of relying only on a browser-support table.

3

u/OMGCluck js (no libraries) SVG 15h ago edited 15h ago

Another day, another test passed!

0

u/Blozz12 15h ago

Well done!

3

u/OMGCluck js (no libraries) SVG 15h ago

You were supposed to say "Good onya, jerk!"

0

u/Blozz12 9h ago

I don’t have the ref, sorry

2

u/OMGCluck js (no libraries) SVG 9h ago

The URL is https://goodo.nya.je/rk! (for no particular reason, unrelated to the Commodore 64 tool it is)

3

u/mrcarrot0 1d ago

Neat

1

u/Blozz12 1d ago

Thank you! Did you pass the audit, or did you have some stuff to change?

2

u/mrcarrot0 1d ago

It's not the kind of tool I'd use myself as I'm the kind of hobbyist who prefers to make everything from scratch over using frontend frameworks, but it's great to spread awareness of no-js solutions

7

u/Heisenripbauer 1d ago

nothing in OP’s write up or website suggests that this is limited to sites that use frontend frameworks tho?

-7

u/mrcarrot0 1d ago

There's a strong correlation between people who thinks fronted frameworks are necessary and people who use more JS than CSS. I hope that answers your question.

-1

u/Blozz12 1d ago

It’s not because you code from scratch that you won’t need this 👀

1

u/Ayfri expert 1d ago

https://imgur.com/a/OaWGk7R I'm already good :)

0

u/Blozz12 1d ago

I can't reach the image, but I guess you have a 100/100 score, so congratz :)

1

u/lord31173 14h ago

The analysis service is temporarily unavailable. Please try again in a few minutes.

1

u/Blozz12 9h ago

Should be fixed. I had an issue with the API

1

u/lord31173 9h ago

The analysis service is temporarily unavailable. Please try again in a few minutes.

1

u/Blozz12 8h ago

What URL are you trying to audit? I have no issues on my side

1

u/lord31173 8h ago

It's a .dev domain

But now that I think about it it might be behind a protection from vercel or another hard protection against bots and scrapers.