CSS Compatibility

CSS compatibility means that our styles should appear the same across different browsers and versions. This is critical to ensure a consistent user experience.

Using vendor prefixes

Vendor prefixes help use experimental CSS properties until they become standardized. For example, -webkit- for Safari and Chrome, -moz- for Firefox.

This example demonstrates how to use vendor prefixes in a simple border-radius setting.

Feature Queries (@supports)

@supports allows us to conditionally apply CSS rules depending on whether the browser supports a given property.

This example shows how to set up a flexible layout that uses grid if available, otherwise flexbox.

Support for key features

Tips for improving CSS compatibility

Some best practices to make sure your CSS works reliably in all browsers.

• Always check property support on caniuse.com.
• Use feature queries to conditionally apply modern properties.
• Test the site in multiple browsers and devices before going live.