Browser support

Support Criteria

Mesh supports the current and previous major releases in the majority of modern browsers, as a minimum. Mesh components may work in older browsers, but we are not actively testing against them. This means that the components may not function as expected, or may not appear as intended. For some older browsers, we may provide functional support, but not visual support.

Functional support means the function of the component is achieved, but the appearance may not duplicate that of other browsers due to a technical limitation.

A supported browser does not mean other browsers and versions will not work, it simply states the browsers we are actively testing against to ensure the essential information and features are available to the user.

Supported Browsers

Mesh Design System currently has the following browserslist configuration:

{
  "browserslist": [
    "defaults",
    "chrome >= 109",
    "firefox >= 116",
    "safari >= 15",
    "iOS >= 15",
    "edge >= 119"
  ]
}

This equates to a global audience coverage of 93.3%, and an Australian audience coverage of 94.5% as at June 2024. See browserslist breakdown

A note on our browserslist configuration

"defaults" is a shortcut for > 0.5%, last 2 versions, Firefox ESR, not dead. It matches recent versions of popular and supported browsers worldwide. The defaults query was thoroughly designed by the Browserslist community. It helps promote best practices and avoid common pitfalls.

The reason we chose to include specific minimum versions of major browsers is to reduce the likelihood of built code changing for a package, without any changes to source code. If we were just using the "defaults" query, we would be at the mercy of the Browserslist community to decide when to drop support for a browser. This could result in a breaking change for a package, without any changes to the source code.

Polyfill

Some browsers cannot natively support certain functionality used by Mesh components. In these cases, a polyfill is required.

As stated by Remy Sharp, who coined the term, polyfill is "a piece of code that provides the technology that you expect the browser to provide natively". In other words, it is code that allows browsers to perform modern functions that are not supported out of the box.

While there is no official polyfill method that we advocate, the following have been used in existing solutions:

• Babel
• core-js

When working in Gatsby or NextJS environments, it is advised to use the official plugins where possible. One thing to note in NextJS environments, you may also need to transpile the Mesh components to work with Next sites.

Report an issue

If you have found a bug in one of the Mesh components, please file a bug report.