Usa CSS con ambito limitato al componente per controllare quali elementi vengono raggiunti da una regola e un foglio di stile condiviso per riutilizzare le regole in più pagine. Per un piccolo progetto HTML sul tuo Mac, puoi combinare entrambe le soluzioni; scegli come organizzare i file in base a ciò che devi spostare e mantenere.

Questa guida illustra come applicare stili a una pagina locale che contiene una scheda quadrata con angoli arrotondati e una nota separata. L’obiettivo è mantenere prevedibile l’aspetto della scheda e poi decidere se il relativo CSS debba trovarsi all’interno della pagina o in un file riutilizzabile. Le etichette e la forma sono fittizie e l’esempio non richiede framework né risorse scaricate.

Cosa stai scegliendo esattamente?

Le decisioni sono due: dove risiede il CSS e quali elementi seleziona. Un foglio di stile incorporato si trova nell’elemento style di un documento HTML. Un foglio di stile esterno è una risorsa separata collegata con link, usando rel="stylesheet" e un percorso href. Questi sono i meccanismi HTML per fornire CSS; nessuna delle due soluzioni crea automaticamente un confine di componente per i selettori ordinari. Standard HTML: l’elemento style, MDN: elemento link per risorse esterne.

Il CSS nativo @scope aggiunge un confine di selezione. Si identifica un elemento radice, poi si scrivono regole che si applicano all’interno del relativo sottoalbero. Può rendere utili selettori brevi quando il documento circostante contiene elementi simili. La documentazione di Chrome distingue inoltre l’ambito nativo dagli strumenti che riscrivono i selettori usando classi o attributi generati. Questi strumenti costituiscono un prerequisito aggiuntivo quando un esempio di componente dipende da essi. Limita la portata dei selettori con la regola CSS @scope.

Per questo compito, usa il seguente supporto decisionale. È una raccomandazione editoriale basata sui meccanismi documentati, non un requisito del browser.

Il tuo obiettivo immediato Soluzione suggerita Cosa deve accompagnarla
Tenere una piccola pagina in un unico file Incorpora il CSS in un elemento style HTML, più eventuali risorse referenziate separatamente
Mantenere la stessa scheda su più pagine Usa un foglio di stile esterno con classi dedicate al componente Ogni pagina HTML e il CSS condiviso
Usare selettori più brevi all’interno di un sottoalbero definito Aggiungi regole @scope con radice esplicita, incorporate o esterne CSS e markup contenente la radice corrispondente
Supportare browser con compatibilità incerta per l’ambito Mantieni gli stili essenziali in normali regole di classe HTML e il foglio di stile che contiene tali regole

“Portatile” deve quindi avere un significato concreto. È pratico poter spostare da solo un singolo file HTML. Anche una cartella che contiene HTML e CSS può essere portatile, purché i percorsi continuino a risolversi. Un componente riutilizzabile richiede un terzo tipo di portabilità: la destinazione deve conservare gli agganci nel markup previsti dai suoi selettori.

Crea un esempio funzionante con due file sul tuo Mac

Crea una cartella chiamata form-study. Al suo interno, salva due file di testo semplice chiamati index.html e shared.css. Se usi TextEdit, scegli File > Nuovo, poi Formato > Converti in testo semplice prima di incollare il codice. Per il file HTML, Apple documenta il salvataggio con l’estensione .html e la scelta di Usa .html quando richiesto. Verifica che il nome effettivo del foglio di stile sia shared.css, senza un suffisso .txt aggiunto. Lavorare con i documenti HTML in TextEdit sul Mac.

Salva questo documento HTML completo come index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Salva questo foglio di stile completo come shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Apri index.html in Safari o in un altro browser desktop. Il risultato previsto è una scheda bianca con bordo e un quadrato blu dagli angoli arrotondati, seguita da una nota senza bordo. Il collegamento al foglio di stile segue lo schema documentato da MDN: l’HTML indica la risorsa CSS tramite href su un link al foglio di stile. MDN: inclusione di un foglio di stile.

L’esempio assegna deliberatamente alla scheda un titolo con una propria classe. In questo modo la relazione tra stile e elemento risulta evidente senza richiedere l’ambito nativo. Lo sfondo della pagina e il carattere sono impostazioni predefinite del documento; il bordo della scheda, il colore del titolo e la forma appartengono alla scheda. Mantieni questa distinzione quando estrai regole riutilizzabili: una pagina di destinazione potrebbe volere la scheda senza adottare lo sfondo o la larghezza di questa pagina.

Per condividere il design, crea una seconda pagina HTML nella stessa cartella e usa lo stesso link al foglio di stile. Entrambe le pagine faranno quindi riferimento a un unico file CSS. Considera le modifiche a quel file come modifiche che riguardano ogni pagina che lo collega; dopo aver cambiato una regola condivisa, controlla tutte le pagine.

Quando è utile il CSS nativo con ambito?

Usa @scope quando un componente contiene diversi elementi che traggono vantaggio da selettori locali semplici, soprattutto se serve un limite inferiore esplicito attorno al contenuto annidato. La specifica CSS Cascading and Inheritance definisce un ambito tramite una radice e, facoltativamente, elementi limite. La radice è inclusa; gli elementi limite e i loro discendenti sono esclusi dalle corrispondenze delle regole con ambito. Questa specifica è una bozza di lavoro. CSS Cascading and Inheritance Level 6: definizione degli ambiti degli stili.

Per un piccolo esperimento, aggiungi il seguente frammento facoltativo a shared.css. Usa il markup di esempio esistente e modifica l’aspetto del paragrafo della scheda:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

In un browser compatibile, il paragrafo all’interno della scheda riceve uno sfondo chiaro e una spaziatura interna. Il paragrafo della nota rimane fuori dall’ambito di questa regola. Il CSS continua a trovarsi nel file condiviso: ambito e condivisione possono coesistere.

Se in seguito aggiungi una regione annidata con la classe nested-sample, potresti sostituire quel frammento facoltativo con questo. È un esempio di limite; la pagina originale non contiene ancora una regione annidata di questo tipo.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Il limite esclude la regione annidata dalle corrispondenze di questi selettori. Non crea un isolamento completo degli stili: proprietà ereditate come color e font-family possono comunque superare il limite dell’ambito. Tieni presente questa distinzione quando un elemento annidato continua ad assomigliare al genitore. MDN: descrizione di @scope.

Una radice esplicita come .shape-card rende chiara anche la dipendenza quando il CSS viene spostato tra file. Il documento di destinazione deve contenere un elemento con quella classe. Spostare solo il foglio di stile non fornisce il markup necessario.

Quali sono i limiti di compatibilità dei browser?

Attualmente MDN indica @scope come Baseline 2026, disponibile da poco nelle versioni più recenti dei browser a partire da marzo 2026. I browser più vecchi potrebbero non supportarlo. Il fatto che tu abbia un Mac sulla scrivania non indica quali funzionalità CSS supporti il browser installato; controlla le informazioni di compatibilità per le versioni che intendi usare. MDN: compatibilità di @scope nei browser.

Se devi considerare i browser più vecchi, mantieni gli stili essenziali della scheda nelle normali regole di classe qui sopra. Il trattamento facoltativo del paragrafo con ambito può rimanere un miglioramento aggiuntivo. La gestione degli errori CSS consente ai browser di scartare i contenuti non supportati continuando a elaborare il CSS valido; la presenza di un foglio di stile, quindi, non implica che tutte le sue regole siano state applicate. MDN: gestione degli errori CSS.

Per applicare lo stesso trattamento al paragrafo senza @scope, assegna al paragrafo della scheda una classe dedicata, ad esempio shape-card__caption, poi seleziona quella classe in una regola ordinaria. Serve un aggancio nel markup, ma il risultato non dipende dall’ambito nativo.

Non aggiungere un attributo scoped a un elemento style aspettandoti lo stesso comportamento. L’elenco degli attributi per quell’elemento nello standard HTML attuale non lo include. L’ambito CSS nativo usa la regola @scope. Standard HTML: l’elemento style, MDN: sintassi di @scope.

Come mantieni portatile la pagina?

Per questo esempio, spostare l’intera cartella form-study mantiene la relazione tra index.html e shared.css. Se sposti solo l’HTML, il foglio di stile rimane indietro. Prima di consegnare o riorganizzare una pagina, verifica questo semplice contratto di dipendenze:

  1. Markup: conserva le classi del componente e la struttura richiesta dai suoi selettori.
  2. Foglio di stile: includi il file CSS e mantieni il link HTML diretto alla sua posizione.
  3. Risorse: includi i file referenziati dal CSS, conservandone o aggiornandone i percorsi.
  4. Browser: mantieni un percorso di stile supportato per le versioni del browser che apriranno la pagina.

Il terzo controllo diventa importante quando un componente incorpora caratteri o file decorativi. MDN documenta che gli URL CSS relativi vengono risolti rispetto all’URL del foglio di stile. Spostando le dichiarazioni in un foglio di stile che si trova in un’altra cartella, può quindi cambiare la posizione della risorsa che indicano. MDN: funzione CSS url().

Ad esempio, se un foglio di stile esterno viene spostato dalla cartella del progetto in una sottocartella styles, una dichiarazione diretta a url("assets/tile.png") ora punta dentro styles/assets. Aggiorna il percorso o conserva la struttura di cartelle corrispondente. L’esempio funzionante evita questa dipendenza disegnando la forma interamente con CSS.

Se la priorità è consegnare un singolo file, incorpora il CSS fornito in un elemento style all’interno di head del documento e rimuovi il link al foglio di stile. In questo caso, per l’esempio basta il file HTML. Mantieni gli stessi selettori, incluso l’eventuale blocco @scope con radice esplicita. HTML supporta l’inclusione di un foglio di stile tramite l’elemento style. Standard HTML: l’elemento style.

Verifica la scelta spostando i file e ricaricando la pagina

Crea una copia dell’intera cartella del progetto in un’altra posizione, poi apri nel browser l’HTML copiato. In quella copia, cambia il colore di sfondo della forma in shared.css, salva il file e ricarica la pagina. Il cambiamento visibile verifica che hai modificato il foglio di stile usato dalla pagina copiata.

Poi controlla sia la scheda sia la nota. Il risultato corretto mantiene gli stili della scheda e lascia la nota fuori dalla regola facoltativa con ambito per il paragrafo. Se l’intera pagina perde gli stili, controlla prima il nome del file CSS e il percorso del link. Se manca solo il trattamento facoltativo, verifica il supporto del browser e la radice dell’ambito. Se cambia un elemento non correlato, controlla i selettori che raggiungono elementi al di fuori del componente previsto.

Quando riapri l’HTML in TextEdit, usa File > Apri, poi Mostra opzioni e Ignora comandi RTF se devi visualizzarne il codice sorgente. Apple documenta inoltre l’impostazione Mostra i file HTML come codice HTML anziché come testo formattato per le aperture future. Lavorare con i documenti HTML in TextEdit sul Mac.

Scegli il CSS incorporato se l’obiettivo principale è tenere unita questa piccola pagina. Scegli un foglio di stile condiviso se più pagine devono usare le stesse regole da mantenere. Aggiungi l’ambito nativo dove i suoi confini semplificano tali regole e la compatibilità del browser lo consente. Infine, sposta e riapri i file effettivi: così verifichi le relazioni tra markup, foglio di stile e risorse da cui dipende la soluzione scelta.

Fonti