Explore the powerful @scope feature in CSS through this comprehensive 26-minute video tutorial. Learn why @scope is useful, how it fits into the cascade, and potential issues to watch out for. Discover how to avoid specificity problems, stop scope at specific elements, use selector lists, and understand the difference between & and :scope. Gain insights on inheritance, inline style blocks, and browser support for this new CSS feature. Follow along with timestamps and helpful links to enhance your understanding of @scope and improve your CSS skills.
Overview
Syllabus
- Introduction
- Why you might want scope in the first place
- Avoiding this issue using @scope
- Why this solves the problem - scope proximity
- Specificity still matters
- CSS Demystified
- Stop running into specificity issues thanks to scope
- Stop the scope at a specific element or elements
- You can have selector lists if you need to target several elements
- The difference between & and :scope
- Things will still inherit!
- Using inline style blocks
- Browser support
Taught by
Kevin Powell
