Day 68: cascade layers and browser support

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Cascade layers are one of the most interesting and useful additions to CSS recently. It will change the way we write CSS, how we use selectors, naming conventions, and probably also more things that I can’t think of right now.

If you’re as excited about using cascade layers as I am, you have to consider browser support before you get started.

Browser support

All major desktop browsers started supporting cascade layers between February and April 2022, but your users might use an older version of Safari, IE11, or one of the mobile browsers that doesn’t support it yet.

cascade layers on caniuse.com
Browser support: Chrome, Edge since version 99, Safari iOS/macOS 15.4, Firefox 97, Opera 86, Chrome for Android/Android Browser 108, Samsung Internet 18, Firefox for Android 107, Opera Mobile 72.

Feature queries

When you use cascade layers in a browser that doesn’t support them, styles in your layers will be ignored entirely. Only unlayered styles will be applied. I was trying to figure out a way to serve styles only to browsers that don’t support layers in order to provide some kind of basic fallback styling for them, but I had no luck.

There is a @supports feature in CSS that will allow us to test for support of @layer and other at-rules, but the feature itself has no support in any browser yet.

@supports at-rule(@layer) {
  /* code applied for browsers with layer support */
}

@supports not at-rule(@layer) {
  /* fallback applied for browsers without layer support */
}

Polyfill

If you want to use cascade layers today, your best option is to use this PostCSS polyfill. Miriam Suzanne explains how to use it and how it works in Cascade Layers – There's a Polyfill for That!

npm install postcss @csstools/postcss-cascade-layers --save-dev
const postcss = require('postcss');
const postcssCascadeLayers = require('@csstools/postcss-cascade-layers');

postcss([
  postcssCascadeLayers(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

See on CodePen

Further reading

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS