What we did
This month we looked at @layers a new concept in CSS which is now supported by the major browsers. To quote from the MDN Web Docs
The @layer CSS at-rule declares a cascade layer. Rules within a
cascade layer cascade together, giving more control over the cascade
to web developers.
I had found this YouTube by Una Kravets which described the basic concept with this CodePen example.
Then we looked at the MDN site @ layers and worked through how layers were meant to work.
Layers help you control the cascade. Like other @ rules you add the css commands to the layer and if the layer is applied those rules kick in. Here’s an example from Una
@layer typography { a { color: green; /* styles *all* links */ } }Most layers have names although you can have one without a name. The order in which the layers appear determents the priority or application of the layer. So, we have three layers say, theme, layout, utilities with three different sets of rules defined in each. The last one is the layer that wins. You can also set the priority by listing the named layers like this example; @layer theme, layout, utilities; Here we have named three layers
Now you can simply change the order to determine the priority. Remember that the last is first so if you swapped layout and utilities layout would be applied. It is easier than having to move a whole block of layer code to change the order.
I think the most important thing to remember is a specific code eg p {color: lime;} would override the any change you may place in the layer.
@layer special {
.para {
color: grey;
}
.item {
color: red;
}
}
The HTML code
<div class="box"><p >Hello, world!</p>
</div>
<div class="item">
<p class="para" >Test paragraph</p>
I am displayed in <code>color: </code>red because the <code>special</code> layer comes after the <code >base</code>layer.
My green border, font-size, and padding come from the <code>base</code> layer.</div>
Result
As you can see even though I gave the test paragraph a class inside the special layer the style definition for p remains dominant.
Here are some links;
Una has links at the bottom to other articles on Layers and here is one from Smashing Magazine.
Steve South
Web Design leader
Next month is Easter so we will meet again on the 21st May.