Cascade layers are an exciting new addition to the CSS specification. A newly
released polyfill now provides even greater browser support for thefeature.
What are cascade layers and why is everyone so excited aboutthem?
This year, a number of new additions to the CSS specification have been
announced. Cascade layers are one of the most anticipated – and rightfullyso.
If you have ever struggled with conflicting CSS selectors, tried making sense of
CSS from various sources, or used !important one too many times, you are
either really excited about layers or you are about tobe.
In a nutshell, layers allow us to define explicit containers of specificity so
that we have precise control over CSS styles and their priority without relying
on confusing and conflictinghacks.
If you are new to cascade layers, “A Complete Guide to CSS Cascade Layers” by
Miriam Suzanne on
CSS-Tricks
is amust-read.
This description from W3 also sums up
the power of layers especiallywell:
“Authors can create layers to
represent element defaults,
third-party libraries, themes,
components, overrides, and other
styling concerns – and are able to
re-order the cascade of layers in an explicit way, without altering
selectors or specificity within each
layer, or relying on source-order to
resolve conflicts acrosslayers.”
If you want to play around with layers and see how exactly they work, check out
this CodePen to see the at-rule inaction.
If you’re excited to get started but are wondering which browsers actually
support @layer, we have some goodnews.
The latest versions of Chrome, Firefox, and Safari now all support cascade
layers. If you are looking for specific browsers or versions, you can see the
complete browser support breakdown below from
CanIUse.
Miriam Suzanne – the author of the CSS layers specification
and the CSS Tricks guide shared above – also created a CodePen to quickly check
if your current browser supports cascadelayers:
And for the browsers that don’t yet supportlayers?
The recent retirement of IE 11 made for some great jokes and celebration, but
even if you or your users aren’t using IE 11, you might still be hesitant to
incorporate @layer into your CSS in case your users aren’t using the latest
browserversions.
There is some more good news here as well. We at OddBird worked with the fine
folks at PostCSS to build a plugin that provides a polyfill for layers. The
PostCSS Cascade Layers
polyfill is
live now and available as an NPM package! 🚀🎉
If you are curious about how the polyfill works exactly, let’s dive into thedetails.
The plugin starts by parsing a stylesheet, looking for any layer at-rules (i.e.
@layer) and recording the order in which the layer wasdefined.
In this step, the most specific selector is also recorded and with these two
elements, the plugin determines the specificity adjustment for each layer. This
specificity adjustment represents the importance of the layer in relation to
other layers and unlayeredstyles.
Next, the plugin begins the transformation of the CSS. The plugin removes the
layer at-rules and gives the styles encompassed in that particular layer the
appropriate specificity that was determined in the firststep.
During this transformation, the plugin also applies the highest specificity to
unlayered styles, i.e. styles outside of a layer since they have the highestpriority.
What that looks like in practice is something likethis:
The key
principle
behind the polyfill is that increasing the number of selectors is a
browser-compatible way to increase specificity and importance inCSS.
The example above is fairly simple, but if your stylesheet has a number of
layers and highly specific selectors, you can expect the transformation to
leverage a greater number of selectors to accommodate thecomplexity.
The README in the
GitHub
repository for the polyfill illustrates this with atable:
The polyfill handles both named and anonymous layers as well as layers that are
nested within eachother.
One of the highlights of cascade layers is how this at-rule can be used in
conjunction with @import to create a new layer from an input source likeso:
@import'theme.css'layer(utilities);
The plugin also supports this feature since there is an existing PostCSS plugin
for @import that you can leverage. That was an advantage of working within the
PostCSSecosystem.
So…what does the polyfill notdo?
There are some expected limitations of the plugin since it is parsing a
stylesheet and not running in thebrowser.
The two main things that the plugin does not currently handleare:
Layers within media queries: When @layer is inside @media, the layers are
conditionally rendered if the media query is true. It is not possible for this
plugin polyfill to know if that is true when the stylesheet is being parsed so
this is not currentlysupported.
revert-layer: This keyword, as
MDN
explains, is to “rollback styles to the ones specified in previous cascade
layers”. The plugin cannot support this feature since it is not possible in
the build step to know which selectors will apply to any givenelement.
On the bright side, the plugin does look for these elements when parsing the
stylesheet, and will inform authors that they are not currently supported or
handled by theplugin.
These elements are best handled by polyfills in the browser, so keep your eyes
on the OddBird blog to find out when a browser polyfill becomes
available aswell.
Cascade layers are a game changer, and we hope that with this new polyfill
you’re excited and ready to start using them in yourCSS.
Have you already started using cascade layers and/or the new polyfill? Tweet
@OddBird and tell us all about it, especially if
you have feedback, questions, orsuggestions!
Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.
OddBird sponsored Python Web Conference 2023 and sent me to attend. In this article I showcase my favorite talks and activities from this excellent online event, including a list of useful resources for web application security, introductions to new PaaS providers, and a comparison of the most popular Python web frameworks.