It’s 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.

Continue reading %It’s Time to Rethink Vendor Prefixes in CSS%

by Patrick Catanzariti via SitePoint