CSS and Browser Compatibility Checklist
A practical checklist for resilient layouts across modern browsers and devices.
- Start with semantic HTML and a readable layout without JavaScript.
- Use feature queries such as
@supportswhen enhancement depends on a CSS feature. - Test keyboard focus, zoom to 200%, reduced motion, dark mode, and forced colors.
- Avoid fixed heights for text containers; allow wrapping and expansion.
- Provide fallbacks for newer color functions, container queries, and advanced selectors when your audience requires them.
- Test Safari/iOS, Chromium, and Firefox rather than relying on one engine.
- Use logical properties for multilingual and right-to-left layouts.
- Check print styles and form controls, not only the main visual layout.
Useful generated CSS tools
CSS Grid Generator, CSS Clamp Calculator, and CSS Gradient Generator.