Wednesday, September 28, 2022
HomeCSSA Useful Use For Cascade Layers

A Useful Use For Cascade Layers


I used to be simply making ready a demo for an upcoming speak and it abruptly occurred to me that cascade layers can be an ideal answer to an issue I used to be having.

For any aspect of stay coding, I wish to meticulously put together my demos to stop any moments of friction on the day. I wished to use a bunch of default kinds to a grid of playing cards in this container queries demo, however I wished these kinds to look on the backside of the stylesheet, in order that when it got here to stay coding the demo I might write all of the related code on the high, and the viewers might simply deal with the structure kinds I’d be discussing. Nonetheless, there have been a number of kinds that consequently wouldn’t be utilized, as they’d have been overridden by these additional down. For instance, on the high of the CSS file I need to apply a container question that will lead to a horizontal card structure:

.grid__item-wrapper {
container: card / inline-size;
}

@container card (inline-size > 24em) {
.card {
flex-direction: row;
}

.card img {
width: 40%;
flex: 1 1 auto;
}
}

However additional down within the stylesheet I used to be setting a flex path of column on the cardboard:

.card {
show: flex;
flex-direction: column;
}

Container queries themselves don’t improve specificity. I might write the next, and the physique would all the time be blue:

@container structure (inline-size > 40em) {
physique {
background: crimson;
}
}

physique {
background: blue;
}

I might improve the specificity of the selector on the high of the file, however I didn’t like my probabilities of remembering to do this within the midst of a stay coding session! Cascade Layers are an ideal answer. We will specify the order of layers on the high of the file:

@layer common, structure;

Then put our related kinds inside them:

@layer structure {
/* Solely the kinds related to the demo go on this layer */
.grid__item-wrapper {
container: card / inline-size;
}

@container card (inline-size > 24em) {
.card {
flex-direction: row;
}

.card img {
width: 40%;
flex: 1 1 auto;
}
}
}

@layer common {
/* CSS reset and common kinds not related to the demo go right here */
}

This implies the kinds within the common layer might be utilized first, regardless of being under these within the structure layer.

Container queries demo of a grid of cards in Codepen showing the order in which layers are applied in the CSS panel

Right here’s the complete demo:

See the Pen
Container queries + cascade layers
by Michelle Barker (@michellebarker)
on CodePen.

Browser assist

I used to be stunned by how widespread browser assist already is for Cascade Layers — over 87% of browsers worldwide now assist them. However, evidently, an utility that depends on Cascade Layers wouldn’t fare properly in browsers that don’t assist them. Fortunately there’s a PostCSS polyfill (which I haven’t tried out but).

Caveats

The one disadvantage to utilizing Cascade Layers right here is that it appears to outcome within the container queries polyfill not working. It’s not a giant deal for me on this occasion as I’ll be utilizing Chrome, however working the demo in Firefox means you received’t see the container queries in motion. I’ve filed a problem.

Assets

Discover out extra about Cascade Layers however studying this complete information by Miriam Suzanne, or watch Bramus’s video from CSS Day.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments