Vendor prefixes: CSS Best Practices, Part 7
Working with experimental CSS requires you to know about vendor prefixes. Ensuring browser compatibility is important in an everchanging landscape, where new browsers are continuously being introduced.
Vendor prefixes are a way to specify CSS properties that are still in development and haven’t been standardized yet. These prefixes are added to the beginning of the property name, and they indicate which browser vendor originally implemented the property.
For example, -webkit-border-radius is a vendor-prefixed property that was originally implemented by Apple’s WebKit browser engine.
What is the point?
The purpose of vendor prefixes is to allow web developers to experiment with new CSS features and provide feedback to the browser vendors, while also ensuring that the styles they apply are consistent across different browsers. When a browser encounters a vendor-prefixed property that it doesn’t recognize, it simply ignores it, allowing the developer to provide a fallback style using a non-prefixed property.
Here’s an example of how to use them:
.card {
-webkit-border-radius: .5rem;
-moz-border-radius: .5rem;
border-radius: .5rem;
}In this example, we’re using vendor prefixes for the border-radius property to ensure that it’s recognized by different browsers. The -webkit-border-radius property is recognized by WebKit-based browsers like Chrome (older versions) and Safari, while -moz-border-radius is recognized by Firefox.
The border-radius property is the standard, non-prefixed property that will be recognized by most modern browsers.
Are vendor prefixes still needed?
Yes! They are still needed today. It is widely used by the industry, as a way to introduce new CSS properties.
It’s important to note that they should only be used for experimental CSS properties that haven’t been standardized yet. Once a property is standardized, the vendor prefix should be removed, and the standard property should be used instead.
Using vendor prefixes for standardized properties can actually harm the consistency of your styles, as it can cause older browsers that don’t recognize the prefixes to display the styles incorrectly.
Wrapping it up
A useful tool for ensuring consistency of styles across different browsers, while allowing developers to experiment with new CSS features. However, they should only be used for experimental properties, and once a property is standardized, the vendor prefix should be removed.
More CSS best practices
- CSS Naming conventions (Part 1)
- CSS Shorthand Properties (Part 2)
- CSS Avoid !important (Part 3)
- CSS Commenting your code (Part 4)
- CSS Media Queries (Part 5)
- CSS Global styles (Part 6)
- CSS Vendor prefixes (Part 7)