Using Prefix free to handle browser vendors prefix with ease

Introduction

As a front-end developer, you should prioritize building all browser-compatible applications/solutions. Browser vendor compatibility should be taken into 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 with all browsers.

What are CSS Vendor Prefixes

CSS vendor prefixes are strings relating to specific browsers. They are used 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 come first in any order while the standard CSS property at the last.

The standard property should be at the bottom because of the CSS specificity rule. The browser checks to see the property it’s compatible 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 are 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 style attribute) won’t work in IE and Firefox < 3.6. Properties as well in Firefox < 3.6. Conclusion

Conclusion

In this article, we have learned the use of prefix-free and its limitations.

Worry less about browser compatibility issues, write your beautiful CSS codes, sit back, relax and let prefix-free handle compatible issues for you.

Attribution

https://projects.verou.me/prefixfree/

https://www.lifewire.com/css-vendor-prefixes-3466867