Scroll animation
CSS scroll-driven animations without JavaScript
Tie progress bars and entry effects to scroll position with animation-timeline, then keep the
page useful when support or motion preferences differ.
Modern frontend notes
Modern CSS, in practice.
Practical guides to modern CSS, native HTML, and the custom code you may no longer need.
Start with the code you already have.
CSS @starting-style: animate entry and exit
Animate newly inserted elements, dialogs, popovers, and display: none transitions, including the extra work a clean exit needs.
HTML inert attribute: disable a whole section
Make a complete DOM subtree unavailable to clicks, focus, editing, and assistive technology without rewriting every descendant.
CSS light-dark(): simpler light and dark themes
Keep both colors in one token, let color-scheme select the value, and preserve manual theme overrides without duplicate palettes.
HTML details and summary: an accordion without JavaScript
Use the browser's native disclosure widget instead of rebuilding open state, semantics, and keyboard behavior with a custom script.
Auto-growing textarea with CSS field-sizing
Replace the scrollHeight resize loop with one CSS property, while keeping useful minimum and maximum sizes for real forms.
CSS scroll snap and smooth scrolling: a practical guide
Build card rails and section scrollers that settle at useful positions, without JavaScript offset math or a motion-heavy fallback.
From custom JavaScript to native CSS: a safer migration
Move one browser-owned behavior at a time, keep the fallback useful, and delete the duplicate state that made the old script difficult to maintain.
CSS container queries: practical examples
Build components that respond to the space they actually receive, with named containers, fluid units, and fallbacks that keep the base layout useful.
CSS anchor positioning: a practical guide
Position menus, tooltips, and floating UI relative to a trigger, then add collision fallbacks without measuring coordinates in JavaScript.
CSS nesting vs Sass: the differences that matter
See where native nesting matches Sass, where selectors and specificity diverge, and how to migrate without changing the cascade by accident.
Popover API vs dialog: which one should you use?
Choose the native overlay that matches the behavior: a non-modal popover or a modal dialog that pauses the rest of the page.
CSS :has() selector: practical examples
Six useful patterns for forms, cards, sibling state, and layouts, plus the specificity and fallback rules
that keep :has() predictable.
Modern CSS features you can use today
A practical look at container queries, :has(), nesting, cascade layers, logical properties,
and the support decisions that make them useful in production.
How to replace JavaScript with HTML and CSS
Use <details>, <dialog>, popovers, inert, and CSS state
without pretending every script can disappear.
How to run a modern CSS audit
A repeatable way to find old workarounds, capture evidence, check browser support, and modernize a website without turning the audit into a rewrite.
Check a real page.
CSS Radar scans one public URL and shows modern HTML and CSS replacements backed by captured evidence.