Was ist CSS @scope Regel-Builder?
Die CSS @scope-At-Regel ermöglicht Entwicklern die Definition einer Grenze für Style-Regeln, die ihre Wirkung auf einen bestimmten DOM-Teilbaum beschränkt. Dies löst das klassische CSS-Scoping-Problem ohne BEM, CSS Modules oder Shadow DOM. Die @scope-Regel nimmt einen oberen Grenzselektor (den Scope-Root, erforderlich) und einen optionalen unteren Grenzselektor (die Scope-Limit, optional). Styles innerhalb von @scope treten nicht aus dem Teilbaum aus, und Styles außerhalb von @scope überschreiben keine gescopten Regeln ohne absichtlichen Selektor-Match. Gescopte Regeln haben eine niedrigere Spezifität als nicht gescopte globale Regeln, was Überschreibungen vorhersagbar und absichtlich macht.
Kurze Antwort
CSS @scope beschränkt Style-Regeln auf einen DOM-Teilbaum und verhindert Stil-Austritte ohne BEM oder Shadow DOM. Konfigurieren Sie eine obere Grenze (Scope-Root) und optional eine untere Grenze (Scope-Limit). Gescopte Regeln haben niedrigere Spezifität als nicht gescopte Regeln für vorhersagbare Überschreibungen. Chrome 118+, Safari 17.4+, Firefox 128+ (Baseline 2025).
Last updated: 2026-06-02
Einschränkungen
- @scope erzeugt keinen neuen Stacking-Kontext, keine z-Index-Isolierung und kein Containment - es beschränkt nur den Selektor-Match. Eigenschaften wie z-index, CSS-Counter und Custom Properties interagieren weiterhin über Scope-Grenzen hinweg.
- Übermäßig breite Scope-Root-Selektoren (wie eine gemeinsame Klasse, die an vielen Stellen verwendet wird) können unerwartete Style-Anwendungen verursachen. Jede @scope-Regel wird für jedes Element ausgewertet, das dem Scope-Root entspricht, sodass komplexe Scope-Bäume die Leistung auf Seiten mit vielen DOM-Elementen beeinträchtigen können.
- In Browsern, die @scope nicht unterstützen, werden die Regeln innerhalb der At-Regel vollständig ignoriert, nicht ent-scoped. Wenn breite Browserunterstützung erforderlich ist, duplizieren Sie die gescopten Regeln als nicht gescopte Regeln außerhalb des @scope-Blocks als Fallback.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Geben Sie den Scope-Root-Selektor ein - das Element, das die obere Grenze definiert. Alle Style-Regeln innerhalb des @scope-Blocks gelten nur innerhalb des Teilbaums dieses Elements.
- Fügen Sie optional einen Scope-Limit-Selektor hinzu - die untere Grenze, die beschränkt, wie tief die gescopten Styles angewendet werden. Style-Regeln gelten nicht für Elemente innerhalb der Scope-Limit oder tiefer.
- Schreiben Sie die CSS-Style-Regeln innerhalb des @scope-Blocks mit standardmäßiger CSS-Syntax. Diese Regeln haben eine niedrigere Spezifität als nicht gescopte globale Regeln, die auf dieselben Elemente abzielen.
- Kopieren Sie das generierte @scope-CSS und fügen Sie es in Ihr Stylesheet ein. Platzieren Sie @scope-Regeln nach globalen Standardwerten, aber vor komponentenspezifischen Überschreibungen für die vorhersagbarste Kaskade.
Wofür du es nutzen kannst
- Begrenzen Sie Widget-Styles auf ihr Container-Element, sodass sie nicht in den Rest der Seite austreten, wodurch die Notwendigkeit von BEM-Klassennamen für jedes Element entfällt.
- Wenden Sie verschiedene Link-Styles innerhalb einer Seitenleiste gegenüber dem Hauptinhaltsbereich an, ohne Selektoren mit höherer Spezifität oder !important zu schreiben.
- Beschränken Sie Drittanbieter-Embed-Styles auf ihren Wrapper-div, sodass das interne CSS des Embeds das umgebende Seitenlayout nicht beeinflusst.