CSS prefixes are a relic from a bygone age.

Developers once manually typed out code like:

.round {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;
}

This arduous experience was automated away by the popular build-tool Autoprefixer.

“This is a project that I hope will die.” — Andrey Sitnik, creator of Autoprefixer

As part of the standardisation process, browsers need to test unstable new features and gather developer feedback. Today, developers can try features before they’re fully standardized by enabling experimental feature flags in the settings of their web browser, or by using a browser like Chrome Canary, Firefox Nightly or Safari Technology Preview. There’s no incentive to use these features on a production website because they won’t work for your users (other than the 0.0001% who have turned on the feature flag.) In the earlier days of the web, vendor prefixes were used as a way for browsers to try out experimental features. Developers started using these prefixes on user-facing production websites, and the browser folks belatedly realised that they were a bad idea.

Around 2016, browsers stopped using vendor prefixes for new CSS properties and started to remove the need for prefixes for many older CSS properties that previously required them. This has been a gradual and slow process as browsers have unprefixed CSS properties one property at a time. Here’s a tweet from back in 2019:

Browser teams have been *removing* support for prefixes. Much of the -moz stuff is long gone. Opera’s rendering engine is gone. Plus, there are no new prefixed properties & haven’t been for years.

— Jen Simmons (@jensimmons) January 14, 2019

I like to keep my build process as minimal as possible. Like many people, I ditched Sass. Could Autoprefixer be another dependency made unnecessary by the progress of the modern web? In 2013, the year Autoprefixer was released, 53 CSS features required prefixing. What’s the situation now?

Which CSS properties still require a prefix?

• backdrop-filter
• user-select
• initial-letter
• text-decoration (sort of)
• text-stroke
• text-fill-color
• line-clamp
• background-clip: text (temporarily)
• mask (temporarily)

backdrop-filter, user-select and initial-letter still require a -webkit- prefix in Safari.

Safari supports text-decoration-color, text-decoration-line and text-decoration-style without a prefix. The text-decoration property is meant to work as a shorthand for all three. In Safari, however, text-decoration can only set text-decoration-line. text-decoration: underline; works. text-decoration: underline orange wavy; doesn’t. -webkit-text-decoration works correctly when setting all three properties.

text-stroke and text-fill-color have never been successfully standardised, but -webkit-text-stroke and -webkit-text-fill-color work in every browser.

Similarly, line-clamp has still not been been standardised. There is currently no line-clamp property implemented in any browser, only -webkit-line-clamp, which only works in conjunction with two other prefixed non-standard properties:

.clamp {  
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

You might as well type that out by hand as there will never be a standardised non-prefixed version of box-orient or display: box. Chrome looks set on implementing an improved non-prefixed line-clamp, which won’t rely on setting any other esoteric obsolete properties.

background-clip: text and mask still require a prefix for Samsung Internet, but that browser will catch up with Chromium in a forthcoming version.