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.
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.
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.
Time to Rethink Vendor Prefixes in CSS
Reviewed by Aamir Pathan