CSS3 support in browsers: prefixes table

CSS3 Feature Support in Modern Browsers: Compatibility Table

CSS3 properties are partially implemented in current browser versions, even without full W3C standardization. Developers must account for vendor prefixes and minimum versions for cross-browser compatibility. The table below details the status of key properties, including prefix requirements (-ms-, -moz-, -webkit-, -o-) and browser versions. This helps you plan feature usage in projects accurately.

Table legends:

• Icons indicate support in IE, Firefox, Chrome, Safari, Opera.
• Numbers show the minimum browser version.
• Prefixed variants are noted separately.

(Insert CSS3 support cheat sheet table as an image here for quick reference.)

Browser Support Details

Internet Explorer supports features with the -ms- prefix starting from version 9+, like border-radius and box-shadow. Firefox used -moz- until version 16, after which many properties switched to standard names. Chrome and Safari rely on -webkit-, supported from versions 4–5, gradually dropping prefixes for final specs.

Opera uses -o- (and rarely -xv-) from version 10.5. The full table covers properties like:

• Animations and transforms: transition, animation, transform.
• Borders and shadows: border-radius, box-shadow.
• Backgrounds and gradients: background-clip, linear-gradient.
• Fonts and text: @font-face, text-shadow.
• Layouts: flexbox (display: flex), multi-column.

| Property | IE (version) | Firefox (version) | Chrome (version) | Safari (version) | Opera (version) |

|----------------|--------------|-------------------|------------------|------------------|-----------------|

| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |

| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-) | 10.5 (-o-) |

| transition | 10 | 16 | 26 | 6.1 | 12.5 |

This table is based on 2012 data, but prefix principles remain relevant for legacy projects.

Working with Vendor Prefixes

• Automation: Use Autoprefixer in build tools (Webpack, Gulp) to add prefixes based on Can I Use data.
• Polyfills: For weak support, use JS libraries like Modernizr for detection and fallbacks.
• Post-processing: Tools like PostCSS generate vendor prefixes dynamically.
• Testing: Check in emulators and real devices, focusing on mobile Safari/Chrome.
• Graceful degradation: Ensure basic rendering without CSS3 for older IE.

Example code with prefixes for transforms:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Updates and Resources

Support has evolved: today, most properties work without prefixes in Chrome 111+, Firefox 115+, Safari 17+. Check compatibility databases for the latest info. The table is great for auditing old code or migrating to modern standards.

Key Takeaways

• Prefixes essential for legacy: -webkit- covers 80% of mobile browsers pre-2020.
• Minimum versions: Chrome 4+, Firefox 4+, IE 9+ reach 95% of users at publication.
• Automation simplifies: Autoprefixer eliminates manual work.
• Testing is critical: Rendering differences in shadows and gradients across engines.
• Prefix-free future: W3C standardization speeds up ditching vendor extensions.

— Editorial Team