jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Constructeur de regle CSS @scope

Generez des regles CSS @scope pour styliser des sous-arbres DOM sans BEM ni CSS Modules.

Chargement de l'outil...

Qu'est-ce que Constructeur de regle CSS @scope ?

La regle @scope CSS (Baseline 2025, Chrome 118+) limite les styles a un sous-arbre DOM sans BEM ni Shadow DOM. Supporte une limite superieure (racine) et inferieure (limite) optionnelle. Les styles scopes ont une specificite plus faible.

Réponse rapide

Styles limites a un sous-arbre DOM avec @scope. Chrome 118+, Safari 17.4+, Firefox 128+.

Last updated: 2026-06-02

Limites

  • Ne cree pas d'isolation z-index ou de compteurs.
  • Selecteurs trop larges peuvent affecter les performances.
  • Les regles sont ignorees dans les navigateurs non supportes.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Entrez le selecteur racine du scope.
  2. Ajoutez optionnellement une limite inferieure.
  3. Ecrivez les regles CSS dans le bloc @scope.
  4. Copiez le CSS genere.

A quoi il sert

  • Isoler les styles de widgets sans BEM.
  • Appliquer des styles differents selon la section.
  • Restreindre les styles d'embeds tiers.

Cas d'usage

Exemples concrets

Exemple

Widget avec styles isoles

@scope (.sidebar) { a { color: #555; } } pour des styles limites a .sidebar.

Exemple

Styles avec limite inferieure

@scope (.card) to (.card-inner) pour eviter les conflits dans les cartes imbriquees.

Erreurs frequentes

  • Ignorer que les regles scopees ont une specificite plus faible.
  • Croire que @scope cree un nouveau contexte d'empilement.
  • Selecteur racine trop large (div, *).

Vérification

  1. Appliquez @scope, verifiez que les styles ne s'appliquent qu'au sous-arbre.
  2. Ajoutez une regle globale, verifiez qu'elle prevaut.

FAQ

Questions sur Constructeur de regle CSS @scope

Difference avec Shadow DOM?

@scope limite la correspondance des selecteurs sans isoler z-index, compteurs ou heritage.

Remplace BEM?

Reduit le besoin mais ne remplace pas entierement pour les composants profondement imbriques.

@scope imbrique?

Supportee. Une regle interne est evaluee par rapport a la racine du scope externe.

Support navigateur?

Chrome 118+, Safari 17.4+, Firefox 128+. >90% de l'utilisation mondiale.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi