Your browser sucks.

Don't rely on lagging browser support, use the latest CSS features now.

Introducing Panaxeo Tech Tips. Our new monthly section with tips from our Club-Frontend members and more!

New CSS features are appearing rapidly, and browser support always lags behind. For example, the new CSS nesting. We’ve always wanted it, but no browser supports it right now.

Fortunately, there’s an easy solution. PostCSS Preset Env.

First, what’s PostCSS? It's a popular CSS transforming tool. It uses plugins to modify readability, add style linter, older browser support, etc. Tools like Vite or Next.js come with PostCSS out of the box, so in most cases, you don’t have to worry about it.

PostCSS Preset Env is a PostCSS plugin that converts modern CSS into older versions that browsers understand.

To use PostCSS Preset Env, install it as a dev dependency.

npm i -D postcss-preset-env

Next, modify postcss.config.js to include PostCSS Preset Env plugin. Optionally, you can specify the stage parameter which determines which CSS features to polyfill based on stability. Stage 0 is experimental, stage 4 is stable. Stage 2 is the default. To use CSS nesting, we will use stage 1.

postcss.config.js:

module.exports = {

	plugins: [

    	require('postcss-preset-env')({ stage: 1 })

	],

};

That’s all the configuration you need, easy! You can now use the latest CSS features. Let’s try it on the CSS nesting and ‘color()’ function.

article {

  padding: 0.5rem;

  & h1 {

    color: color(sRGB 0.1 0.35 0.85);

  }

}

Becomes:

article {

  padding: 0.5rem;

}

article h1 {

  color: rgb(25,89,217);

}

That’s all there is to it! Found this little tip useful?
Maybe you’ve got some questions of your own, or maybe there’s a tip you’d like to share.
Let us know, our #club-frontend would love to hear it!