Time to Rethink Vendor Prefixes in CSS

The -webkit- prefix is now so dominant across CSS on the web that some websites fail to work properly without it. While this is clearly a sign of less than ideal practices by developers over the past few years, it has led to quite an unfortunate but almost necessary move by Mozilla. By either Firefox 46 or 47 (released either in April or May 2016), Mozilla plan to implement support for a series of non-standard -webkit- prefixes to improve Firefox’s compatibility with a -webkit prefixed (and often mobile) web.

This is not a new idea, Microsoft Edge supports a series of -webkit- prefixes too to ensure compatibility.Opera already began implementing -webkit- prefixes in 2012 and have since moved to the WebKit based Blink engine.

The W3C and browser vendors did not intend for vendor prefixes to be used on production websites:

“Official W3C policy states that you shouldn’t really use experimental properties in production code, but people do, as they want to make sites look cool and keep on the cutting edge.” – W3C page on optimizing content for different browsers

However, developers everywhere wanted to use them to access the latest features as soon as they could. While prefixes have caused a bit of a mess with WebKit’s dominance, I think they succeeded in helping the web move forward quite rapidly.

The approach by Mozilla and Microsoft is likely to be harmless to most websites. Most websites online will have already included -moz- prefixes or will find that the updates by Mozilla improve their website compatibility with no action required. As professional web developers though, we do need to be thorough and understand that there are outlier results that may occur on some designs. You may already know which of your creations could break with this update.

Developers, it is clearly time to rethink your approach to prefixes and test those websites.

The Prefixes Involved

There are a range of -webkit- prefixes Mozilla might look to include. From what I’ve gathered, Mozilla aren’t looking to match Edge’s list of supported -webkit- prefixes, as not all of these are likely to be necessary to ensure Mozilla’s Gecko layout engine compatibility with the broader web.

The prefixes Mozilla is likely to approach according to their wiki page on Compatibility/Mobile/Non Standard Compatibility includes the following:

• -webkit-flexbox
• -webkit- prefixed gradients
• -webkit-transforms
• -webkit-transitions
• -webkit-appearance
• -webkit-background-clip
• -webkit-device-pixel-ratio
• -webkit-animation
• -webkit-border*

Some other features may be impacted too such as @-webkit-keyframes.

Cross Browser Testing Will Be Crucial

If you are a web developer out there who left out -moz- prefixes to avoid the need to test newer CSS features on Firefox — let’s assume you were on a tight deadline and the client forced your hand — you are going to need to retest that site in Firefox 46 or 47. These versions of Firefox will be out in either in April or May, so you have a bit of time to plan ahead.

To test your website before these changes reach Firefox 46/47, you can access the current state of the change in Firefox Nightly via the layout.css.prefixes.webkit preference in about:config. It should be set to true by default if you have the latest Nightly version installed. Not all of the -webkit-prefix changes are in Firefox Nightly just yet, however this is the place to test how your website looks so far. I would wait until about March before testing with Firefox Nightly too thoroughly.

On a more urgent note, Microsoft Edge is already interpreting and displaying -webkit- prefixes in this way. This means that any WebKit specific styles you have within your sites could already be displaying in a browser you were not expecting them to. If you have not already done so, get yourself access to Microsoft Edge in Windows 10 and test those websites!

Vendor Prefixes Are Fading

Luckily, it appears vendor prefixes are fading away as browser teams look for better solutions. The Chrome/Blink team have adjusted their approach:

“Going forward, instead of enabling a feature by default with a vendor prefix, we will instead keep the (unprefixed) feature behind the “enable experimental web platform features” flag in about:flags until the feature is ready to be enabled by default.” – The Chrome/Blink team

The Firefox team are also on their way to a similar approach:

“For what it’s worth, the current trend inside Mozilla is […] avoiding vendor prefixes by either turning things off before shipping or shipping them unprefixed if they’re stable enough. At least
as a general policy; specific cases might merit exceptions.” – Boris from Mozilla

Microsoft Edge aims to remove support for prefixes altogether:

“Microsoft is also getting rid [of] vendor prefixes for Edge. This means that in order for developers to take advantage of special HTML5 or CSS features, they won’t have to use a specific Edge prefix. Instead, they can just code to web standards.” – Mashable

No More Graceful Degradation By Prefixes

This movement away from vendor prefixes means one thing — graceful degradation via vendor prefixing is clearly not the way to go.

Using vendor prefixes to target a specific browser (e.g. something specific just for Chrome) was not the intention of vendor prefixing; the recommendation was always for developers to use all available vendor prefixes (from -webkit- to -o-). If you are using features that rely on prefixed properties and you used prefixes to gracefully degrade your design on other browsers, this won’t work anymore.