Before you all come after me with pitchforks raised, allow me to clarify: For all intents and purposes, most vendor prefixes for commonly used attributes are useless. Contrary to a lot of teachings, vendor prefixes are only necessary for specific attributes, and you’d be surprised how small that list of attributes actually is. In order to understand why most modern vendor prefixes are useless, however, we first must understand the point of a vendor prefix.
Why vendor prefixes?
Folks who cram their CSS document full of vendor prefixed attributes undoubtedly don’t understand the original point of prefixes. Vendor prefixes were initially developed as a way for browsers to implement early support for items in the CSS spec. By prefixing an attribute with “-moz-“, or any other prefix, the browser can implement support before the spec has been finalized. Then, once the attribute has been finalized, browsers can add support for the finalized property by not using a prefix, and still maintain support for old sites that utilized the prefixed version.
Prefixing is a method of progressive enhancement, and has been since its conception. Unfortunately, improper teachings have lead many people to use prefixes as a kludge more than a progressive tool.
A kludge you say?
Indeed. Now that the majority of modern day attributes are widely supported and finalized, the need for vendor prefixes for a lot of common elements has dropped. This means that by adding prefixed lines to your files, all you’re doing is adding unnecessary bytes to your document. Through proper education, we can help establish a better web by removing these unnecessary lines from our documents.
So, which vendor prefixes are unnecessary?
While a lot of prefixes have become dated and useless in modern design, it’s important to note that not all have. Prefixes still serve the same purpose of adding progressive features before full support is released, however in today’s day and age, a lot of them have become outdated. Here’s the attributes you no longer need to use prefixes for:
- border-radius
- box-shadow
- text-shadow
- border-image
Which ones are necessary?
- CSS Transitions
- CSS 3D Transforms
- CSS Animations
- CSS Gradients
- Box Sizing
- CSS Calc
- CSS Transforms
- Flexbox
- Columns
Note that while all of these attributes require vendor prefixes, not all of them require every prefix to be used. A lot of these properties can get away with just using the webkit prefix and no others. Here’s a pretty comprehensive list of which prefixes should be used and when: http://css3.bradshawenterprises.com/which-vendor-prefixes-are-needed/.
In conclusion, as a web designer, you should be following best practices to create a more sustainable web. With this in mind, I urge you to learn when to use which prefixes, and start slimming down your file sizes on all your sites. Doing away with outdated code will create easier to read Stylesheets for people everywhere. If I missed anything, feel free to contribute in the comments!
No Comments Yet.
Be the first to leave a comment on this article!