VTEX browser support is split in two contexts: storefront and admin areas.
For storefronts, we strive to support all major browsers all the way to IE 11:
# Browserslist example (date 2020-01-29)
IE 11
Edge 17+
Safari 8+
Chrome 77+
Firefox 70+
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| IE11, Edge | last 10 versions | last 10 versions | last 4 versions |
Note: even though we support older browsers such as IE 11 and Safari 8, the layout may slightly vary due to CSS browser support.
For admin areas, the main targets are evergreen browsers, such as Firefox, Chrome, the new Edge, etc:
# Browserslist example (date 2020-01-29)
Edge 17+
Safari 12.1
Chrome 77+
Firefox 70+
IE / Edge |
Firefox |
Chrome |
Safari |
|---|---|---|---|
| Edge | last 10 versions | last 10 versions | last 2 versions |
It's usually in a dev's heart the desire to use the newest Javascript feature or a new fancy CSS property, such as display: grid, position: sticky, Map(), Set(), etc. However, browser support and cross-browser compatibility are the first concerns that have to come to the developer's mind. Make sure to always check MDN and Can I Use for the current support of the desired functionality.
If the functionality is not well supported and yet it's needed for some important reason, a polyfill or ponyfill can help solving the problem. Keep in mind that polyfills add extra weight to the store assets and not always perform as good as their native implementations.
A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.
To be possible to write and use modern Javascript and CSS features while supporting all the way to IE 11, some polyfills are automatically added only to VTEX IO stores:
Array.from()Array.prototype.fill()Array.prototype.find()Array.prototype.findIndex()Array.prototype.includes()fetch()Function.nameIntersectionObserver()Intl.~locale.${locale}Map()Number.isInteger()Number.isNaN()Object.assign()Object.entries()Object.keys()Object.values()Promise()Set()String.prototype.endsWith()String.prototype.includes()String.prototype.startsWith()Symbol()URL()WeakMap()