Modern CSS Radar: find custom code modern CSS can replace
For frontend teams
Replace custom code with modern CSS.
Scan a public page to see where modern HTML and CSS can replace custom code. Each finding includes the evidence<br>and what to test before making the change.
Public page URL<br>No login needed
Audit my page
popover
:has()
@starting-style
animation-timeline
What a finding looks like
Each finding connects the current pattern to a possible platform replacement, then shows the evidence and<br>tradeoffs behind it.
Why it may help
Deletes custom focus-trap logic and open-state tracking.
Lets the browser handle top-layer rendering and Escape key dismissal.
Provides modal semantics and focus management with less custom JavaScript.
Found on this page<br>.newsletter-modal<br>#mobile-menu<br>Newsletter signup and mobile navigation overlays (2 instances)
See the native dialog working on CodePen ↗
Current HTML + JavaScript
class="modal" role="dialog"<br>aria-modal="true" hidden><br>class="modal__close">Close
/* Original JavaScript excerpt */<br>const modal = document.querySelector('.modal');<br>trigger.addEventListener('click', () => {<br>modal.hidden = false;<br>trapFocus(modal);<br>});<br>Modern alternative
id="site-modal"><br>method="dialog"><br>Close
const modal = document.querySelector('#site-modal');<br>trigger.addEventListener('click', () => modal.showModal());
Everything the scanner checks
The audit reports only the checks below: 18 code and behavior patterns, plus 9 mechanical CSS quick wins.<br>Every recommendation must be supported by evidence captured from the public page.
27<br>reportable checks
18<br>code and behavior patterns
mechanical CSS quick wins
Custom code modern HTML and CSS can simplify
18 checks
These become findings only when the scanner captures matching implementation evidence.
Custom modals<br>could become<br>→
Custom popovers, tooltips, and dropdowns<br>could become<br>→<br>the Popover API
Scripted accordions and disclosure widgets<br>could become<br>→
JavaScript-assisted entry transitions<br>could become<br>→<br>@starting-style
Parent state classes toggled by JavaScript<br>could become<br>→<br>:has()
Whole sections manually removed from the tab order<br>could become<br>→<br>the inert attribute
System theme detection scripts<br>could become<br>→<br>prefers-color-scheme + light-dark()
Smooth-scroll handlers and fixed-header offset math<br>could become<br>→<br>scroll-behavior + scroll-margin
Timer-driven logo and news tickers<br>could become<br>→<br>CSS keyframes with pause and reduced-motion states
Headings or steps numbered from JavaScript<br>could become<br>→<br>CSS counters
Decorative count-up libraries and timers<br>could become<br>→<br>@property + CSS counters
JavaScript-driven animated borders<br>could become<br>→<br>@property + conic-gradient()
Per-frame coordinates along a fixed path<br>could become<br>→<br>CSS Motion Path
Scripted before-and-after reveal geometry<br>could become<br>→<br>CSS masks driven by one custom property
Scroll-triggered reveal scripts<br>could become<br>→<br>animation-timeline: view()
Carousel and slider libraries<br>could become<br>→<br>CSS scroll snapping
Auto-growing textarea scripts<br>could become<br>→<br>field-sizing: content
JavaScript-positioned tooltips<br>could become<br>→<br>CSS anchor positioning
CSS quick wins
9 checks
These are matched directly in the collected stylesheets and shown separately in the report.
Percentage-padding aspect ratio boxes<br>could become<br>→<br>aspect-ratio
Transform-based centering<br>could become<br>→<br>place-items: center
100vh heights that break on mobile<br>could become<br>→<br>dvh and svh units
WebKit-only scrollbar styling<br>could become<br>→<br>scrollbar-color
Prefixed line-clamp workarounds<br>could become<br>→<br>line-clamp
Duplicated dark-mode color rules<br>could become<br>→<br>light-dark()
Resolution media queries for image density<br>could become<br>→<br>image-set()
Negative decorative layers that escape their component<br>could become<br>→<br>isolation: isolate
Paired physical spacing declarations<br>could become<br>→<br>logical properties
From rendered page to verified finding
Render the public page
Chrome captures rendered HTML, interaction signals, same-origin CSS, and JavaScript.
Flag evidence, not conclusions
Deterministic checks surface candidate patterns across the supported categories.
Verify before reporting
Weak leads are rejected. Each finding includes evidence and tradeoffs to test.
The scanner only reports what a browser can verify on the public page. It does not inspect server-side code,<br>authenticated states, or hidden business logic.
Every recommendation shows its work
What exists today
The page, interaction, and implementation evidence behind the finding.
What could replace it
The browser feature and the custom code it could simplify.
What to verify
Limitations and behavior to test before changing anything.
What a URL cannot show
A public page cannot reveal server-side code, anything behind authentication, or interaction states I<br>cannot reach. The...