Using Prefix free to handle browser vendors prefix with ease
Introduction
As a frontend developer you should prioritize building all browser compactible applications / solution. Browser vendor compatibility should be put in to consideration. web tool like Can I Use helps you determine if a CSS property is available across all browsers.
In this article you will learn to use a life saving tool that saves you the stress of having to write CSS codes compatible for all browsers.
What are CSS Vendor Prefixes
CSS vendor prefixes are string relating to specific browsers. they are used to to experiment and support new CSS properties before they are fully supported in all browsers.
Common CSS Vendor Prefixes
Common CSS prefixes are listed below;
- Chrome, Safari
-webkit-- Firefox
-moz-- Internet Explorer and Microsoft Edge
-ms-- Old Opera
-o-CSS Vendor Prefixes in use
CSS prefix properties comes first in any order and while the standard CSS property at the last.
The standard property should be at the bottom because of CSS specificity rule. The browser checks to see the property it’s compactible with, if it isn’t available, it falls back to the standard rule.
-moz-transform: translateY(10px);-o-transform: translateY(10px);-ms-transform: translateY(10px);-webkit-transform: translateY(10px);transform: translateY(10px);
Prefix free to the rescue
A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. CDN page
All you need to worry about is writing the standardized version of the CSS property and adding prefix free CDN to your html.
...<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script></body></html>
Prefix free limitations
According to the prefix free docs , below are the limitations.
- Prefixing code in
@import-ed files is not supported - Prefixing cross-origin linked stylesheets is not supported, unless they are CORS-enabled
- Unprefixed linked stylesheets won’t work locally in Chrome and Opera. You can change that for yourself though.
- Unprefixed values in inline styles (in the
styleattribute) won’t work in IE and Firefox < 3.6. Properties as well in Firefox < 3.6.
Conclusion
In this article, we have learnt the use of prefix free and it’s limitations.
Worry less about browser compatibility issues, write your beautiful CSS codes, sit back and relax and let prefix free handle compatible issues for you.
Attribution
