Modern CSS Quiz
Compare old and modern CSS side by side
About
Modern CSS Quiz provides snippets that juxtapose legacy CSS with modern CSS, complete with browser support data for each feature. It covers Grid, custom properties, nesting, container queries, and more, enabling developers to see the differences and compatibilities at a glance.
The case
Who it is for
CSS developers and designers looking to refresh their skills with modern CSS features.
What is broken today
Developers often struggle to keep up with modern CSS features because there is no easy way to compare legacy code with new syntax or to see which browsers support each feature.
What it does about it
The quiz displays paired code snippets—old CSS on one side, modern CSS on the other—along with a table of browser support for each feature. Users can interact with the snippets to see how the new syntax behaves in real browsers.
Why not the obvious alternative
Unlike generic CSS tutorials, Modern CSS Quiz offers side‑by‑side comparisons with explicit browser support data for features such as Grid, custom properties, nesting, and container queries, making it easier to decide when to adopt new syntax.
No comments yet. Be the first to give the maker feedback.