Per visualizzare percorsi di sezione completi come 1.2.1, annida elenchi ordinati e usa CSS counters() per unire i livelli. Questo tutorial crea un file HTML locale su un Mac, mantiene l’ordine della struttura e mostra come controllare la numerazione dopo le modifiche.

Come funziona la numerazione del percorso completo?

Un percorso di sezione completo registra la posizione di un elemento a ogni livello. Per esempio, 1.2.1 indica il primo elemento all’interno del secondo elemento figlio del primo elemento di primo livello. CSS mette a disposizione counters() proprio per combinare i valori dei contatori annidati, leggendo dal contatore più esterno a quello più interno e inserendo il separatore scelto. MDN: funzione CSS counters()

Per questo esercizio, la struttura è un elenco ordinato con rami annidati. Non è un indice generato automaticamente a partire da intestazioni che si trovano altrove nel documento. HTML definisce gli elementi di un elenco ordinato secondo l’ordine nell’albero, quindi mantieni l’ordine del codice sorgente uguale all’ordine di lettura previsto. Standard HTML: elemento ol

L’esempio usa tre regole: crea un contatore in ogni elenco interessato, incrementalo per ogni elemento e visualizza il percorso combinato prima dell’etichetta dell’elemento. Segue lo schema documentato da MDN per i contatori annidati, limitando i selettori a questa struttura. MDN: usare i contatori CSS

Crea il file della struttura sul Mac

Ti servono TextEdit e un browser come Safari. L’esempio completo include il proprio foglio di stile e contenuti di esempio fittizi; non richiede pacchetti, strumenti di compilazione o JavaScript.

  1. Apri TextEdit e scegli File > Nuovo.
  2. Scegli Formato > Converti in testo semplice.
  3. Incolla l’esempio completo qui sotto.
  4. Scegli File > Salva, assegna al file il nome outline.html e salvalo in un posto comodo, per esempio sulla Scrivania.
  5. Se TextEdit ti chiede quale estensione usare, scegli Usa .html.

Apple documenta questa procedura in testo semplice per creare file HTML in TextEdit. Apple: lavorare con documenti HTML in TextEdit sul Mac

Di seguito trovi un documento completo. Copia il contenuto del blocco di codice, senza le righe dei delimitatori Markdown.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Apri Safari, poi trascina outline.html dal Finder in una finestra di Safari. Usa TextEdit per modificare il codice sorgente e Safari per esaminare la struttura visualizzata. Dopo ogni modifica, salva il file e ricarica la pagina nel browser.

Mantieni TextEdit in modalità di modifica del codice

Quando riapri il file, potresti vedere il contenuto formattato invece del codice sorgente. Apple documenta due opzioni: usa File > Apri, fai clic su Mostra opzioni e seleziona Ignora comandi di testo ricco; oppure attiva Visualizza i file HTML come codice HTML anziché come testo formattato in TextEdit > Impostazioni > Apertura e salvataggio. Apple: lavorare con documenti HTML in TextEdit sul Mac

Confronta i percorsi completi con l’esempio

Di seguito è riportata la struttura che dovrebbe essere visibile. Le etichette sono segnaposto neutri; i numeri dipendono dalle loro posizioni.

1 Nodo A
  1.1 Nodo B
  1.2 Nodo C
    1.2.1 Nodo D
    1.2.2 Nodo E
  1.3 Nodo F
2 Nodo G
  2.1 Nodo H
3 Nodo I

Questo esempio verifica tre transizioni distinte. Nodo D avvia un terzo livello sotto Nodo C. Nodo F riprende il secondo livello dopo la fine di quel ramo. Nodo G riprende il primo livello e il suo primo elemento figlio inizia con 2.1. Una visita deterministica dell’albero di esempio ha confermato questi percorsi attesi; durante la preparazione l’esempio non è stato visualizzato in un browser.

Perché ogni regola CSS è importante

Il ripristino si applica sia a .outline sia a .outline ol. Ogni elenco annidato ha bisogno di una nuova istanza di outline-section; ripristinare solo l’elenco esterno non creerebbe un conteggio separato per ogni livello. Incrementando il contatore per ogni elemento dell’elenco, avanza l’istanza corrente. MDN: usare i contatori CSS

La regola di visualizzazione usa counters(outline-section, "."). La funzione al plurale raccoglie tutte le istanze attive con quel nome. Sostituirla con la forma singolare counter(outline-section) mostrerebbe solo il valore del livello corrente, facendo apparire un elemento annidato come 1 invece che con il suo percorso completo. MDN: funzione CSS counters()

L’esempio rimuove i marcatori nativi degli elenchi, perché fornisce prefissi propri. Ogni elenco ha anche role="list": MDN documenta che Safari potrebbe altrimenti omettere dagli alberi di accessibilità gli elenchi con stile list-style-type: none. Mantieni quell’attributo quando aggiungi un altro elenco annidato. MDN: proprietà CSS list-style-type

Modifica la struttura senza comprometterne l’organizzazione

Inserisci ogni <ol> annidato all’interno del <li> a cui appartiene il ramo. Per esempio, Nodo C contiene il proprio elenco figlio prima del tag di chiusura </li> di Nodo C. Un elenco annidato non deve essere un figlio diretto di un altro elenco ordinato. MDN: elemento HTML per gli elenchi ordinati

Per una verifica pratica, aggiungi un nuovo elemento subito prima di Nodo C. Il suo nuovo percorso dovrebbe essere 1.2; Nodo C dovrebbe diventare 1.3; e Nodo D e Nodo E dovrebbero diventare rispettivamente 1.3.1 e 1.3.2. Nodo G dovrebbe rimanere 2. Questi cambiamenti attesi derivano dalla gerarchia dell’esempio e permettono di verificare che la numerazione segua la struttura dei rami.

Per spostare un ramo, sposta l’intero elemento dell’elenco a cui appartiene, compresi gli elenchi annidati e il tag di chiusura. Se sposti solo l’etichetta, i suoi elementi figli rimangono al loro posto. Per creare un quarto livello, ripeti la struttura dell’elenco annidato esistente all’interno dell’elemento appropriato; non digitare un numero aggiuntivo nell’etichetta.

Mantieni un solo elenco figlio per ramo se i suoi elementi devono formare un’unica sequenza continua. In questa implementazione, creare un altro elenco figlio allo stesso livello ne crea una nuova istanza del contatore, quindi la numerazione locale riparte da capo. L’esempio di MDN mostra questo ripristino con elenchi annidati separati sotto lo stesso elemento. MDN: usare i contatori CSS

Diagnostica la numerazione errata nell’ordine giusto

Inizia dalla struttura, poi passa alle regole dei contatori e infine alla presentazione. Modificare il rientro non può riparare un livello di annidamento mancante.

Cosa vedi Cosa controllare Correzione per questo esempio
Ogni elemento annidato mostra un solo numero La funzione in content Usa la forma plurale counters() con il punto come separatore.
Ogni elemento fratello inizia da 1 Il selettore di ripristino Applica il ripristino agli elenchi, non a ogni elemento.
Accanto ai percorsi completi compaiono numeri nativi La regola per gli elenchi Applica list-style-type: none agli elenchi esterni e annidati.
Un ramo ha un prefisso inatteso La posizione dell’elenco annidato Mantieni l’elenco figlio all’interno dell’elemento a cui appartiene.
Un altro elenco altrove riceve dei prefissi L’ambito del selettore del contatore Mantieni il prefisso .outline nelle regole.

Controlla anche se un elemento è stato nascosto. Le operazioni sui contatori CSS non vengono eseguite sugli elementi che non generano un riquadro, compresi quelli con display: none. Al contrario, visibility: hidden genera comunque un riquadro e può quindi influire sul conteggio. Scegli consapevolmente se un elemento omesso debba occupare una posizione. W3C: contatori negli elementi che non generano riquadri

E per i numeri iniziali personalizzati?

Questo esempio usa intenzionalmente un contatore personalizzato che parte da zero e viene incrementato fino a uno. Attributi HTML come start, reversed e value di un elemento dell’elenco controllano la numerazione nativa degli elenchi ordinati; le regole personalizzate outline-section mostrate qui non leggono questi attributi. Aggiungere solo start="4" non fa quindi iniziare il prefisso visualizzato in questo esempio da 4. Standard HTML: elenchi ordinati ed elementi degli elenchi

Se hai bisogno di una numerazione discontinua o di rami in ordine decrescente, stabiliscilo prima di adattare questo foglio di stile. Mantieni il percorso visualizzato coerente con i valori previsti per l’elenco ordinato, anziché aggiungere attributi ignorati dalla visualizzazione personalizzata.

Decidi se i numeri sono presentazione o contenuto del documento

I prefissi di questo tutorial sono contenuti generati dal CSS. Sono adatti a una struttura visuale, ma i riferimenti essenziali richiedono qualche considerazione in più: MDN osserva che i contenuti aggiunti tramite ::before non sono sempre disponibili agli screen reader. Aggiungere role="list" preserva il riconoscimento dell’elenco; non garantisce che venga pronunciato ogni percorso generato. MDN: pseudo-elemento CSS ::before

Se un percorso completo deve far parte del testo effettivo, per esempio in un’esportazione in testo semplice, includilo come testo nel documento oppure generalo durante l’esportazione. Questo cambia le modalità di manutenzione: le modifiche dovranno aggiornare anche i percorsi salvati. Non fare affidamento su un prefisso visivo per fornire testo essenziale in tutti i formati di output.

Per una struttura visuale locale, concludi controllando i nove percorsi di esempio, inserendo un elemento fratello e verificando che il ramo interessato venga rinumerato come previsto. Dopo aver superato questi controlli nel browser, sostituisci le etichette fittizie mantenendo l’annidamento e l’ordine del codice sorgente.

Fonti