Vendor Prefixes in 2024
To be very honest, I wasn't expecting to write about vendor prefixes in 2024. I haven't really thought about them ever since building inline-style-prefixer and fela-plugin-prefixer.
However, recently I stumbled over css-hooks and got very excited about it.
I wanted to try it out for my next project, but I also didn't want to give up the convenience and user experience of Fela and all its plugins. That's when I realised, I had to solve vendor prefixes once again.
If you're wondering whether vendor prefixes are still a thing, this article is here to enlighten you!
Retrospect
If you haven't already been around 5-10 years ago, chances are you don't even know what I'm talking about. Let me try to summarise the history of vendor prefixes.
The Origins
Browsers didn't always support all the fancy CSS properties and values that we take for granted nowadays. In fact, most of them have been introduced fairly recently. Even border-radius was only added early 2010s and standardised as late as 2012.
In order to gradually support new CSS properties, browser vendors (hence the name) added specific strings to CSS properties indicating that they're not yet standardised or stable. Those strings are referred to as vendor prefixes.
The most common ones are:
-webkit-: for Chrome, Safari, newer versions of Opera, and almost all iOS browsers (including Firefox and Chrome for iOS)-moz-: for Firefox-o-: for older versions of Opera-ms-: for Internet Explorer and Microsoft Edge
In order to use border-radius we had to add quite some lines of CSS in the past:
.rounded {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Besides properties, vendor prefixes were also added to values, at-rules and pseudo elements. Sometimes they were also used for non-standard values.
For example, using Flexbox required a total of five different display values:
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Autoprefixers
Over time, more and more properties were added to browsers and as a result more and more vendor prefixes were required. At some point, it was almost impossible to remember all of them including all the non-standard ones.
Luckily, open source libraries such as Autoprefixer, inline-style-prefixer and stylis came to the rescue. They automated the whole process so that developers wouldn't have to think about vendor prefixing anymore.
Strategy Shift
In the following years a lot has happened in the industry and browser vendors eventually shifted away from vendor prefixes. The web became more stable and the CSS specification has been split into several modules that are all actively developed by the CSSWG. That shift allowed for progressive enhancement and browser vendors started to introduce new properties directly, sometimes behind feature flags before shipping it publicly.
Also, many browsers adapted WebKit made alignment and cross-browser compatibility even easier in general as there simply are less browser engines in the first place.
Today
Now that we know what vendor prefixes are, why they exist and how they are used, we still don't know if they are still required 2024.
The answer is: It depends (Surprise, Surprise). Generally speaking, most vendor prefixes are not required anymore, but depending on what browsers we aim to support, we might still need a very small subset of them.
For example, if we want to support every browser version back to the start of 2020, here are the properties that still need to be prefixed:
- text-emphasis, text-emphasis-position, text-emphasis-style, text-emphasis-color
- box-decoration-break
- mask, mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite, mask-border, mask-border-source, mask-border-mode, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, mask-type
- appearance
- user-select
- backdrop-filter
- clip-path
- hyphens
- text-orientation
- tab-size
- font-kerning
- text-size-adjust
- text-decoration-style, text-decoration-skip, text-decoration-line, text-decoration-color
Note: Besides tab-size, which requires a -moz- prefix, all of them only need the -webkit- prefix.
Next to those properties, a handful of values require the -webkit- prefix. Namely filter, cross-fade, image-set, min-content and max-content.
Am I missing properties or values here? Please reach out and I will update the list accordingly!
Conclusion
It's only a matter of time until the last vendor prefix can be dropped. Chances are that most of your apps already run without most of the once required prefixes.
However, it's still too soon to drop them entirely. Also, if you happen to support older browser versions, make sure to account for that and configure your tooling accordingly. Even if we support 95% of all used browsers, 5% of our users might have a bad experience simply due to that.
