How css uses cascading layers
The editor will share with you how css uses cascading layers. I hope you will get something after reading this article. Let's discuss it together.
Layer by layer 1. Basic concept
Cascading gives us more ability to manage the "cascading" part of CSS. Currently, there are several factors that determine which styles will be applied in CSS code, including the masses of selectors and the order in which they appear. Cascading allows us to effectively group (or "layer") CSS. The code in the lower order layer will take precedence over the code in the higher level, even if the selector in the higher layer has a higher weight.
two。 Usage
Let's look at the basic use of cascading layers:
/ * create layers in order * / @ layer reset, base, theme;/* add CSS to each layer * / @ layer reset {} @ layer base {h2.title {font-size: 5remt;} @ layer theme {H2 {font-size: 3remt;}}
The CSS font size declaration in the theme layer overrides the font size declaration in the base layer, although the latter selector has a higher weight.
3. Current state
The latest version of Firefox already supports cascading and can be enabled using flag in Chrome and Edge (cascading is fully supported in the Chrome 99 version). It seems that all major browsers are using this specification, so I hope to get more widespread support as soon as possible.
After reading this article, I believe you have a certain understanding of "how css uses cascading layers". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
