How to ensure cross-browser styles using PostCSS

Ensuring cross-browser compatibility will dramatically improve your user experience

Some browsers rely on vendor prefixes such as -webkit- in order to support modern CSS Properties.

At the time of writing, we need this in order to support the mask property, which is used to be able to apply color to SVG icons using CSS. The mask property is used for arrow, checkmark and circle icons throughout Inkline.

PostCSS Installation

1 Install dependencies

The most popular plugin for ensuring cross-browser styles compatibility is postcss together with postcss-preset-env.

npm install --save-dev postcss postcss-preset-env

2 Configure the plugin

Next, create a new file called postcss.config.js and add the following:

module.exports = {
    plugins: {
        'postcss-preset-env': {}
    }
};

3 Enjoy cross-browser compatible styles

That’s it! If you’re using Vite.js, Vue.js CLI, or Nuxt.js, the integration is done automatically for you. You can now enjoy cross-browser styles compatibility with appropriate vendor prefixes.

For other installations, check the Official Documentation to see how to integrate PostCSS with your development environment.