Pour réinitialiser une section d’une page que vous créez, utilisez une réinitialisation CSS ciblée pour le balisage contrôlé, le Shadow DOM pour isoler les styles d’un composant, ou une iframe pour un document distinct. Ce guide explique comment choisir une méthode et prévisualiser le résultat sur un Mac.

De quel type de réinitialisation votre section a-t-elle besoin ?

La tâche du lecteur est précise : donner à un panneau d’aperçu imbriqué sa propre typographie, son espacement et ses formes abstraites, tout en préservant l’apparence de la page qui l’entoure. Vous devez avoir accès aux fichiers source de la page et être autorisé à les modifier.

Choisissez la limite avant de choisir la déclaration de réinitialisation. Les valeurs des propriétés CSS, la portée des sélecteurs et les ressources du document sont des questions différentes. Le guide de décision suivant rassemble le comportement documenté des réinitialisations CSS, du Shadow DOM et des cadres intégrés.

Votre besoin Choix pratique Limite à garder à l’esprit
Supprimer certains styles d’un balisage imbriqué ordinaire Déclarations ciblées ou all Les sélecteurs externes peuvent toujours correspondre aux éléments de la section.
Séparer les sélecteurs internes des sélecteurs de la page Shadow DOM avec une base interne explicite Les valeurs héritées doivent toujours être prises en compte.
Donner à la section son propre document et ses propres feuilles de style Une iframe Ses dimensions et ses ressources doivent être configurées séparément.

Pour un petit panneau d’aperçu que vous créez, le Shadow DOM constitue un bon point de départ. Il fournit une limite pour les sélecteurs sans nécessiter de second fichier HTML. Si vous avez seulement besoin de supprimer une bordure ou de modifier la police d’un titre, des déclarations explicites sont plus simples que l’ajout d’une limite de composant.

Pourquoi all: revert ne réinitialise-t-il pas complètement une section imbriquée ?

La propriété raccourcie all modifie les propriétés des éléments auxquels elle correspond. Elle exclut les propriétés personnalisées, direction et unicode-bidi. Elle ne crée pas un document distinct et n’empêche pas d’autres sélecteurs de correspondre à ces éléments. Référence MDN de all

Les mots-clés de réinitialisation produisent aussi des bases différentes. initial utilise la valeur initiale définie dans la spécification pour chaque propriété. unset hérite des propriétés qui héritent normalement et initialise les autres. Dans une feuille de style d’auteur, revert rétablit la propriété concernée au-delà des styles d’auteur ; des valeurs héritées peuvent toujours provenir du parent. CSS Cascading and Inheritance Level 5

Par exemple, réinitialiser la couleur d’une section ne supprime pas une déclaration de couleur qui cible directement un paragraphe à l’intérieur. MDN illustre exactement cette distinction : le paragraphe conserve la couleur qui lui est directement attribuée même lorsque le parent utilise revert. Une réinitialisation sur un conteneur est donc insuffisante lorsque des sélecteurs descendants sont à l’origine de l’apparence indésirable. Exemple MDN de réinitialisation du parent

Appliquer une réinitialisation à chaque descendant étend sa portée, mais supprime aussi des éléments de mise en page et de mise en forme utiles. Avec all: initial, même l’affichage en bloc habituel du navigateur pour un élément division disparaît si vous ne le rétablissez pas. N’utilisez une telle réinitialisation que si vous pouvez reconstruire délibérément la présentation nécessaire. Exemple de réinitialisation de widget dans la spécification

revert-layer sert à autre chose : rétablir une propriété en remontant les couches de la cascade. Cette option est utile lorsque le problème vient d’une couche de styles particulière, mais elle ne crée pas de limite de composant. Rétablissement des couches de la cascade CSS

Créer un panneau d’aperçu autonome sur votre Mac

Cet exemple complet crée une interface environnante sombre et un panneau imbriqué clair contenant des libellés fictifs et deux formes CSS originales. Tout est intégré : aucun téléchargement, paquet, police externe ni fichier image n’est nécessaire.

Dans TextEdit, choisissez Fichier > Nouveau, puis Format > Convertir au format texte. Collez l’exemple complet ci-dessous, enregistrez-le sous le nom section-reset.html et choisissez Utiliser .html si vous y êtes invité. Voici les étapes indiquées par Apple pour créer un fichier HTML. Utiliser des documents HTML dans TextEdit sur Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Section reset demonstration</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      background: #202a36;
      color: #f2f5f8;
      font: 18px/1.6 Georgia, serif;
      letter-spacing: 1px;
    }
    main { max-width: 720px; margin: auto; }
    h2 { color: #bce8ff; text-transform: uppercase; }
    p { border-left: 4px solid #7db5cf; padding-left: 12px; }
    #panel-host { display: block; margin: 24px 0; }
  </style>
</head>
<body>
  <main>
    <h1>Shape workspace</h1>
    <p>Outer label Alpha</p>
    <div id="panel-host">
      <p>Preview unavailable. Use a browser supporting Shadow DOM.</p>
    </div>
    <h2>Outer label Beta</h2>
    <p>This paragraph belongs to the surrounding interface.</p>
  </main>
  <script>
    const host = document.getElementById("panel-host");
    if (typeof host.attachShadow === "function") {
      const root = host.attachShadow({ mode: "open" });
      const style = document.createElement("style");
      style.textContent = `
        .panel {
          all: initial;
          display: block;
          box-sizing: border-box;
          direction: ltr;
          unicode-bidi: normal;
          font: 16px/1.5 system-ui, sans-serif;
          color: #233344;
          background: #f4f7fa;
          padding: 24px;
          border: 2px solid #9db0c1;
          border-radius: 12px;
        }
        h2 { margin: 0 0 12px; font-size: 22px; }
        p { margin: 0 0 16px; }
        .shapes { display: flex; gap: 16px; flex-wrap: wrap; }
        .circle {
          width: 56px; height: 56px;
          border-radius: 50%; background: #386f91;
        }
        .bar {
          width: 104px; height: 56px;
          border-radius: 8px; background: #c98252;
        }
      `;
      const panel = document.createElement("section");
      panel.className = "panel";
      const heading = document.createElement("h2");
      heading.textContent = "Panel Delta";
      const text = document.createElement("p");
      text.textContent = "Circle and rounded bar";
      const shapes = document.createElement("div");
      shapes.className = "shapes";
      shapes.setAttribute("aria-hidden", "true");
      for (const name of ["circle", "bar"]) {
        const shape = document.createElement("div");
        shape.className = name;
        shapes.append(shape);
      }
      panel.append(heading, text, shapes);
      root.append(style, panel);
    }
  </script>
</body>
</html>

Ouvrez le fichier enregistré dans le navigateur de votre Mac. Le résultat attendu est un panneau clair avec un titre en casse mixte et un paragraphe sans bordure. À l’extérieur, le titre reste en majuscules et bleu, et les paragraphes conservent leurs bordures à gauche. Il s’agit des résultats attendus de l’exemple, et non de mesures issues de tests de navigateur rapportés.

Le script attache une racine shadow à l’hôte, qui ne sert qu’à cet effet, puis crée le panneau dans cette racine. Sa feuille de style appartient à l’arbre shadow ; ses sélecteurs ordinaires de titres et de paragraphes s’appliquent donc à l’intérieur. Les sélecteurs ordinaires de titres et de paragraphes du document n’atteignent pas ces éléments internes. Cela suit le modèle de style du Shadow DOM documenté par MDN.

La classe interne .panel fournit la seconde partie de la solution : une base explicite. Les limites du Shadow DOM séparent la correspondance des sélecteurs, tandis que l’héritage continue de fonctionner dans l’arbre des éléments rendus. Réinitialiser le conteneur interne empêche la police à empattement et l’espacement des lettres environnants de devenir sa base d’héritage habituelle. La spécification CSS Shadow actuelle décrit ce modèle d’héritage ; il s’agit toujours d’un projet de l’éditeur. CSS Shadow Module Level 1

Qu’est-ce qui traverse la limite ou peut avoir un effet dessus ?

L’hôte reste un élément du document environnant. Les règles de la page peuvent modifier sa marge, sa largeur ou son affichage, et un ancêtre détermine toujours l’espace dont dispose le panneau. Gérez le positionnement de l’hôte dans la feuille de style de la page et l’apparence interne du panneau dans sa feuille de style shadow. Cette répartition suit la distinction documentée entre un hôte shadow et son arbre interne. Guide sur le scoping CSS

Les propriétés personnalisées nécessitent aussi un contrat explicite. all ne les efface pas. Cet exemple n’utilise aucune propriété personnalisée héritée ; une variable externe ne peut donc pas modifier les couleurs choisies via une référence var(). Si vous ajoutez des variables de thème par la suite, définissez les noms acceptés par le composant et fournissez des valeurs par défaut internes. Exclusions de la réinitialisation selon MDN

Gardez le nouveau contenu du panneau dans la racine shadow si vous souhaitez conserver la même limite pour les sélecteurs. Le contenu distribué par des slots a des relations de style différentes, car il provient de l’arbre léger ; l’ajout de slots modifie les hypothèses de cet exemple. Explication par CSS Shadow des slots et des relations entre arbres

Le Shadow DOM n’est pas non plus une commande de réinitialisation des ressources. Cet exemple évite entièrement les dépendances aux ressources. Si le contrat requis prévoit un document HTML distinct avec ses propres références de feuilles de style, utilisez la méthode des cadres ci-dessous.

Quand faut-il utiliser une iframe ?

Une iframe intègre un autre document. Elle convient donc à un aperçu doté de styles indépendants et dont la configuration du document doit être distincte de celle de la page environnante. La norme HTML définit src pour une ressource référencée et srcdoc pour un document intégré. Norme HTML : l’élément iframe

Pour un ensemble local de deux fichiers, créez un second fichier HTML complet appelé panel.html contenant le panneau et sa feuille de style. Remplacez l’hôte et son script par une iframe qui référence ce fichier. Le code suivant est un fragment d’intégration, pas un document autonome :

<iframe
  title="Shape panel preview"
  src="panel.html"
  style="display:block;width:100%;height:280px;border:0">
</iframe>

Les noms de fichier indiqués ici sont des exemples locaux. Créez le second fichier réel avant d’utiliser ce fragment. Les dimensions externes du cadre relèvent de la page conteneur ; la page intégrée définit sa présentation interne. Considérez 280px comme une hauteur de départ indicative et vérifiez le comportement avec du contenu plus long au lieu de supposer qu’il tiendra.

Si vous choisissez plutôt srcdoc, gardez à l’esprit que les URL de ressources relatives sont résolues par rapport à l’URL de la page intégrante. Le contenu d’un document intégré n’a donc pas automatiquement une base de ressources indépendante. MDN indique aussi que si srcdoc n’est pas pris en charge, src sert de repli. Référence MDN des attributs iframe

Vérifier la compatibilité et diagnostiquer les styles inattendus

MDN indique que attachShadow() de base et la propriété all sont largement pris en charge par les navigateurs depuis janvier 2020. Cela ne garantit pas la prise en charge de toutes les options plus récentes de ces fonctionnalités. Cet exemple utilise le mode open de base et conserve un message de repli visible lorsque le Shadow DOM n’est pas disponible. MDN : attachShadow(), MDN : all

@scope est une autre méthode prise en charge pour limiter la zone d’application d’un ensemble de sélecteurs, mais elle n’arrête pas l’héritage et n’empêche pas les règles globales sans rapport d’entrer dans le sous-arbre. MDN indique que cette fonctionnalité est largement disponible dans les navigateurs actuels depuis mars 2026, mais que les anciens navigateurs présentent des limites. Utilisez-la lorsque l’organisation des sélecteurs répond au besoin ; conservez le Shadow DOM ou un cadre si vous avez besoin de leurs limites respectives. MDN : @scope

Après avoir modifié l’exemple, suivez cette procédure de diagnostic :

  1. Si le fichier affiche le texte source, vérifiez que son extension est .html et ouvrez-le dans le navigateur.
  2. Si le message de repli reste affiché, vérifiez que JavaScript s’exécute et que le navigateur prend en charge attachShadow().
  3. Si le panneau ne s’affiche pas correctement, vérifiez que son contenu a été ajouté à la racine shadow, puis examinez sa base interne et sa feuille de style.
  4. Si l’interface environnante change, vérifiez les modifications apportées à la feuille de style du document et aux règles de l’hôte.
  5. Si le contenu ne tient plus, vérifiez les dimensions de l’hôte ou du cadre avant de modifier la typographie.

Choisissez la limite la plus simple qui répond au besoin : CSS ciblé pour une correction contrôlée, Shadow DOM avec une base définie pour un panneau isolé, ou iframe pour un document distinct. Définissez explicitement le positionnement, les styles internes et les références aux ressources afin que la section puisse évoluer sans nécessiter de refonte de son environnement.

Sources