Wat is CSS @scope Regelbouwer?
De CSS @scope at-rule stelt ontwikkelaars in staat een grens te definiëren voor stijlregels, waardoor hun effect wordt beperkt tot een specifieke DOM-subboom. Dit lost het klassieke CSS-scopingprobleem op zonder BEM, CSS Modules of Shadow DOM. @scope regels hebben een lagere specificiteit dan niet-gescopte globale regels, waardoor overschrijvingen voorspelbaar en intentioneel zijn.
Snel antwoord
CSS @scope beperkt stijlregels tot een DOM-subboom, zonder BEM of Shadow DOM. Configureer een bovenste grens (scope root) en optionele onderste grens (scope limit). Gescopte regels hebben lagere specificiteit. Chrome 118+, Safari 17.4+, Firefox 128+ (Baseline 2025).
Last updated: 2026-06-02
Beperkingen
- @scope creëert geen nieuwe stacking context of z-index-isolatie.
- Te brede scope root-selectoren kunnen onverwachte stijltoepassing veroorzaken.
- In niet-ondersteunde browsers worden @scope-regels volledig genegeerd, niet onge-scoped.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer de scope root-selector in — het element dat de bovenste grens definieert.
- Voeg optioneel een scope limit-selector toe als onderste grens.
- Schrijf de stijlregels in het @scope-blok met standaard CSS-syntax.
- Kopieer de CSS en plaats @scope-regels na globale standaarden voor de meest voorspelbare cascade.
Waarvoor je het kunt gebruiken
- Scope widget-stijlen naar hun container zodat ze niet in de rest van de pagina lekken.
- Pas verschillende linkstijlen toe in de zijbalk versus het hoofdcontentgebied zonder hoge specificiteit.
- Beperk third-party embed-stijlen tot hun wrapper-div.