Per reimpostare una sezione di una pagina di cui curi il codice, usa un reset CSS mirato per il markup controllato, Shadow DOM per gli stili di componenti isolati oppure un iframe per un documento separato. Questa guida mostra come scegliere e visualizzare in anteprima il risultato su un Mac.

Di che tipo di reset ha bisogno la tua sezione?

L’attività del lettore è specifica: dare a un pannello di anteprima annidato una propria tipografia, spaziatura e grafica astratta, preservando l’aspetto della pagina circostante. Devi avere accesso ai file sorgente della pagina e l’autorizzazione per modificarli.

Scegli il confine prima di scegliere la dichiarazione di reset. I valori delle proprietà CSS, la portata dei selettori e le risorse del documento sono aspetti diversi. La seguente guida decisionale combina il comportamento documentato dei reset CSS, di Shadow DOM e degli iframe.

Il tuo requisito Scelta pratica Condizione da considerare
Rimuovere stili selezionati dal normale markup annidato Dichiarazioni mirate oppure all I selettori esterni possono ancora corrispondere agli elementi della sezione.
Tenere separati i selettori interni da quelli della pagina Shadow DOM con una base interna esplicita I valori ereditati richiedono comunque attenzione.
Dare alla sezione un proprio documento e una propria configurazione dei fogli di stile Un iframe Dimensioni e risorse richiedono una configurazione separata.

Per un piccolo pannello di anteprima creato da te, Shadow DOM è un utile punto di partenza. Offre un confine per i selettori senza richiedere un secondo file HTML. Se devi solo rimuovere un bordo o cambiare il carattere di un titolo, le dichiarazioni esplicite sono più semplici che introdurre un confine tra componenti.

Perché all: revert non reimposta completamente una sezione annidata?

La scorciatoia all modifica le proprietà degli elementi a cui corrisponde. Esclude le proprietà personalizzate, direction e unicode-bidi. Non crea un documento separato né impedisce ad altri selettori di corrispondere a quegli elementi. Riferimento MDN a all

Anche le parole chiave di reset producono basi diverse. initial usa il valore iniziale definito dalle specifiche per ciascuna proprietà. unset eredita le proprietà che normalmente vengono ereditate e inizializza le altre. In un foglio di stile dell’autore, revert riporta la proprietà interessata a uno stato precedente agli stili dell’autore; i valori ereditati possono comunque provenire dall’elemento genitore. CSS Cascading and Inheritance Level 5

Per esempio, reimpostare il colore di una sezione non rimuove una dichiarazione di colore che corrisponde direttamente a un paragrafo al suo interno. MDN mostra proprio questa distinzione: il paragrafo mantiene il colore assegnato direttamente anche quando il genitore usa revert. Un reset applicato a un contenitore è quindi insufficiente quando l’aspetto indesiderato dipende da selettori discendenti. Esempio MDN del reset sul genitore

Applicare un reset a tutti i discendenti ne amplia la portata, ma rimuove anche layout e formattazione utili. Con all: initial, si perde persino la normale visualizzazione a blocchi di un elemento divisione nel browser, a meno che non venga ripristinata. Usa un reset del genere solo se puoi ricostruire intenzionalmente la presentazione necessaria. Esempio di reset di un widget nelle specifiche

revert-layer ha un altro scopo: riportare una proprietà a uno stato precedente attraverso i livelli della cascata. È utile quando il problema riguarda un livello specifico di stili, ma non stabilisce un confine tra componenti. Ripristino dei livelli della cascata CSS

Crea sul tuo Mac un pannello di anteprima autonomo

Questo esempio completo crea un’interfaccia esterna scura e un pannello interno chiaro con etichette sintetiche e due forme CSS originali. È tutto inline: non servono download, pacchetti, caratteri esterni o file immagine.

In TextEdit, scegli File > New, quindi Format > Make Plain Text. Incolla l’esempio completo qui sotto, salvalo come section-reset.html e, se richiesto, scegli Use .html. Questi sono i passaggi documentati da Apple per creare un file HTML. Usare documenti HTML in TextEdit sul 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>

Apri il file salvato nel browser del Mac. Il risultato previsto è un pannello chiaro con un titolo in maiuscole e minuscole e un paragrafo senza bordo. Al di fuori del pannello, il titolo resta in maiuscolo e blu, mentre i paragrafi conservano i bordi a sinistra. Sono i risultati previsti dall’esempio, non misurazioni riportate di test nei browser.

Lo script collega una shadow root all’elemento host, inizialmente vuoto, e crea il pannello al suo interno. Il foglio di stile appartiene allo shadow tree, quindi i suoi normali selettori per titoli e paragrafi si applicano internamente. I normali selettori per titoli e paragrafi del documento non raggiungono quegli elementi interni. Questo segue il modello documentato da MDN per lo stile di Shadow DOM.

La classe .panel interna fornisce la seconda parte della soluzione: una base esplicita. I confini Shadow separano la corrispondenza dei selettori, mentre l’ereditarietà continua a operare attraverso l’albero degli elementi renderizzato. Reimpostare il contenitore interno impedisce che il carattere serif e la spaziatura tra lettere dell’area circostante diventino la normale base ereditata. La specifica CSS Shadow attuale descrive questo modello di ereditarietà; è ancora una bozza dell’editor. CSS Shadow Module Level 1

Cosa può ancora attraversare o influenzare il confine?

L’host resta un elemento del documento circostante. Le regole della pagina possono modificarne il margine, la larghezza o la visualizzazione, e un elemento antenato determina comunque quanto spazio riceve il pannello. Gestisci il posizionamento dell’host nel foglio di stile della pagina e l’aspetto interno del pannello nel suo foglio di stile Shadow. Questa divisione segue la distinzione documentata tra uno shadow host e il suo albero interno. Guida agli ambiti CSS

Anche le proprietà personalizzate richiedono un contratto esplicito. all non le azzera. Questo esempio non usa proprietà personalizzate ereditate, quindi una variabile esterna non può cambiare i colori scelti tramite un riferimento var(). Se in seguito introduci variabili di tema, definisci quali nomi accetta il componente e fornisci valori predefiniti interni. Esclusioni del reset documentate da MDN

Tieni i nuovi contenuti del pannello all’interno della shadow root se vuoi mantenere lo stesso confine per i selettori. I contenuti assegnati tramite slot hanno relazioni di stile diverse perché provengono dal light tree; aggiungere slot modifica le ipotesi alla base di questo esempio. Spiegazione di CSS Shadow sugli slot e le relazioni tra alberi

Shadow DOM non è neppure un comando per reimpostare le risorse. L’esempio evita del tutto le dipendenze da risorse. Se il requisito prevede un documento HTML separato con riferimenti ai propri fogli di stile, usa l’approccio con iframe descritto qui sotto.

Quando dovresti usare un iframe?

Un iframe incorpora un altro documento. È quindi adatto a un’anteprima con stile indipendente, la cui configurazione del documento deve essere separata dalla pagina circostante. Lo standard HTML definisce src per una risorsa referenziata e srcdoc per un documento inline. Standard HTML: l’elemento iframe

Per una configurazione locale con due file, crea un secondo file HTML completo chiamato panel.html contenente il pannello e il relativo foglio di stile. Sostituisci l’host e il relativo script con un iframe che fa riferimento a quel file. Quanto segue è un frammento da integrare, non un documento autonomo:

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

I nomi dei file qui sono nomi di esempio locali. Prima di usare il frammento, fornisci il secondo file effettivo. Le dimensioni esterne del frame dipendono dalla pagina che lo contiene; la pagina incorporata fornisce la presentazione interna. Considera 280px un’altezza iniziale indicativa e verifica i contenuti più lunghi invece di presumere che entrino.

Se scegli srcdoc, ricorda che gli URL relativi delle risorse vengono risolti rispetto all’URL della pagina che incorpora il documento. Il contenuto inline del documento non ottiene quindi automaticamente una base indipendente per le risorse. MDN documenta inoltre che, se srcdoc non è supportato, si usa come alternativa src. Riferimento MDN agli attributi di iframe

Verifica la compatibilità e diagnostica gli stili imprevisti

MDN indica che sia attachShadow() di base sia la proprietà all sono ampiamente disponibili nei browser da gennaio 2020. Questo non garantisce la compatibilità di tutte le opzioni più recenti di queste funzionalità. Questo esempio usa la modalità di base open e mantiene visibile un messaggio di ripiego quando Shadow DOM non è disponibile. MDN: attachShadow(), MDN: all

@scope è un altro metodo supportato per limitare l’ambito di applicazione di un insieme di selettori, ma non interrompe l’ereditarietà né impedisce alle regole globali non correlate di raggiungere il sottoalbero. MDN indica che è diventato recentemente disponibile nei browser attuali da marzo 2026, con limiti nei browser più vecchi. Usalo quando l’organizzazione dei selettori soddisfa il requisito; mantieni Shadow DOM o un frame quando servono i rispettivi confini. MDN: @scope

Dopo aver modificato l’esempio, segui questa sequenza diagnostica:

  1. Se il file mostra il testo sorgente, verifica che l’estensione salvata sia .html e aprilo nel browser.
  2. Se il messaggio di ripiego resta visibile, verifica che JavaScript sia in esecuzione e che il browser supporti attachShadow().
  3. Se il pannello ha un aspetto errato, verifica che il suo contenuto sia stato aggiunto alla shadow root, poi controlla la base interna e il foglio di stile.
  4. Se l’interfaccia circostante cambia, controlla le modifiche al foglio di stile del documento e alle regole dell’host.
  5. Se il contenuto non entra più, verifica le dimensioni dell’host o del frame prima di modificare la tipografia.

Scegli il confine più piccolo che soddisfa l’esigenza: CSS mirato per una correzione controllata, Shadow DOM con una base definita per un pannello isolato oppure un iframe per un documento separato. Mantieni espliciti il posizionamento, lo stile interno e i riferimenti alle risorse, così la sezione può cambiare senza dover riprogettare le aree circostanti.

Fonti