CoreMedia supports and tests the bricks and themes provided by the Frontend Workspace for the latest version of the following browsers:

For more information about the environments CoreMedia supports, please check the Supported Environments PDF from the documentation.

Browserslist Settings

When bundling a theme, the browserslist setting of its package.json is taken into account. All example themes (see: Section 6.1, “Example Themes”) have set the browserslist according to our supported environments:

    "browserslist": [
    "last 1 Chrome version",
    "last 1 Firefox version",
    "last 1 Edge version",
    "Explorer >= 11"
    ]
  

In the build process of the theme the browserslist is taken into account for bundled CSS and JavaScript using Webpack loaders. This will affect the generated output so the corresponding asset can be parsed by browsers that did not (fully) support certain language constructs.

CSS is transformed using the postcss-loader in the loader chain for SCSS files (see Chapter 4, Workspace Concept). The autoprefixer plugin is used that takes the browserslist configuration into account. This means that you don't need to add any browser specific prefixes to your SCSS code and it will also remove browser specific prefixes that are not needed (for example, when embedding third-party code that you probably do not want to customize to add or remove prefixes).

The transformation of JavaScript is similar. In this case the babel-loader is used in the loader chain for JS files (see Chapter 4, Workspace Concept) which supports a browserslist configuration via a Babel preset called babel-preset-env. This means you can write JavaScript in your theme using new ECMAScript syntax and to a certain extent also features and the code is transpiled down to a proper language level when the theme is build so every browser matching the configuration is supported.

You can adjust the settings to your needs. If no setting is provided, it will fall back to the browserslist default. For more information about browserslist and its configuration see: github.com/ai/browserslist.

Caution

Changing the browserslist configuration does not mean that the theme now out-of-the-box supports all browsers that match the given expressions. It only makes sure that the node modules affected by this configuration (see above) will transform the corresponding asset to a common language level that all browsers support.

autoprefixer will not add any feature support to browsers. For example if you want to enable support for flexbox you will need to add a proper JavaScript polyfill.

babel-preset-env will also add some polyfills to add browsers support for a specific feature but this will not cover every feature (for example, a polyfill for Promises is not added in the currently used version). You still need to test the theme in the added browsers and probably need to add polyfills accordingly for features the transpiler does not handle out of the box.