CSS nesting relaxed syntax update
Nesting element tag names
- In the latest update to Chrome (version 120), the CSS nesting feature now allows for nesting bare element tag names.
- This means that you can now nest element tag names inside other element tag names, making your CSS code more concise and readable.
What changed to allow this nesting?
- The ability to nest bare element tag names was made possible through the efforts of Chrome engineers and the CSS Working Group, as well as feedback from the community.
- Initially, there was doubt about whether the CSS parser could differentiate between a tag name and a property name, as the parser does not have the ability to look ahead.
- To address this, the original spec used the symbol ">" to indicate that what follows is a nested selector, rather than a regular CSS property and value.
- However, an engineer discovered that when the parser failed to parse the nested selector as a property, it could be restarted in a mode that assumed a selector instead of a property. This allowed the parser to recognize the nesting and resume parsing accordingly.
- This approach proved to be fast and reliable enough to be included in the syntax, leading to the update in Chrome 120.