Questa pagina mette una cosa accanto all’altra: il frammento di codice e quello che il browser ne ricava. È una guida pratica per chi progetta e per chi costruisce le pagine.
Il controllo Anteprima tema permette di scegliere Sistema, Chiaro o Scuro. Chiaro e Scuro forzano la palette anche quando il browser usa una preferenza diversa; Sistema la ripristina. Gli esempi di codice e la resa seguono la stessa scelta.
Nel sistema più recente non usiamo classi per dire al CSS “questa è una card” o “questo testo è viola”. Gli elementi HTML raccontano già buona parte della struttura. Quando serve dichiarare un ruolo specifico, aggiungiamo un attributo data-*, per esempio data-layout="home-cover".
La scelta è nata dal desiderio di tenere i contenuti puliti e leggibili: il Markdown racconta, il template dà forma alla struttura, il CSS riconosce elementi e relazioni. Il passaggio è in corso, non concluso: il sito conserva componenti più vecchi che usano classi. La regola per il codice nuovo è non aggiungerne quando semantica e attributi descrittivi bastano.
<h1>Scivolare di nuovo</h1>
<p>Appunti per continuare a pensare.</p>
<p><a href="#">Un collegamento nel testo.</a></p>
<blockquote>Una frase resta in margine.</blockquote>Appunti per continuare a pensare.
Una frase resta in margine.
IM Fell English dà carattere ai titoli, Alegreya porta la voce della lettura e Oswald governa navigazione e metadati. Gli elementi stabiliscono la gerarchia; i token dei font ne definiscono la materia.
<figure data-layout="home-cover">
<img src="/assets/illustrations/home-banana-v1.jpg"
alt="Una banana matura.">
</figure>
data-layout nomina una funzione prevista. La stessa regola per la figura vale ovunque compaia l’immagine; il Markdown parla dell’immagine, non dei suoi margini.
<section>
<article>
<h3>Una banana evoca la caduta</h3>
<p>Un’icona, una scena, un significato.</p>
</article>
</section>APPUNTI · LINGUAGGIO
Un’icona, una scena, un significato.
WORK · RICERCA
Un sistema di scelte che diventa leggibile.
Il browser vede una sezione che contiene articoli. La relazione tra genitore e figli dà un confine alla griglia. Non serve una classe per disegnare un riquadro a forma di card.
<div data-comments-root>
<div data-comments-bar>
<span data-comments-label>Nota a margine</span>
<button data-comments-toggle>Nascondi le note</button>
</div>
<article data-comment>
<p data-comment-meta>Ada · 4 novembre</p>
<p data-comment-body>La banana è già una storia.</p>
</article>
</div>Ada · 4 novembre
La banana è già una storia.
I nomi data-* sono agganci per gli stili e per JavaScript. Questa miniatura non ha un endpoint API: il pulsante mostra il componente, non è un controllo attivo.
:root {
--ink: #241d22;
--bg: #fbfafb;
--link: #790b78;
--red: #b3132b;
}
@media (prefers-color-scheme: dark) {
:root {
--ink: #f1edef;
--bg: #1b1c20;
--link: #e15bd7;
--red: #ff4057;
}
}
Il tema sostituisce i token condivisi seguendo la preferenza del dispositivo. Le immagini conservano colori e materia originali.
Questo inventario deriva dalle pagine del blog generate. Ogni voce è un elemento HTML reale: il suo ruolo visivo nasce dal significato, dalla posizione e, quando serve, da un attributo descrittivo data-*.
htmlheadtitlemetalinkscriptbodyDefiniscono il documento e ne caricano metadati, stili e comportamenti. La maggior parte non compare nella pagina visibile.
headernavmainsectionarticleasidefooterdivGli elementi semantici descrivono il compito di ogni regione. div raggruppa contenuti quando non serve un significato più specifico.
h1h2h3pablockquotecitestrongemsmallspanbrtimehrI titoli organizzano la gerarchia; gli altri elementi indicano paragrafi, citazioni, enfasi, date e pause.
ulolliul raccoglie elementi senza ordine, ol indica una sequenza e li rappresenta ogni voce.
figurepicturesourceimgiframepicture e source scelgono il file adatto allo schermo; figure dà all’immagine un posto nel racconto.
formfieldsetlegendlabelinputtextareabuttonRaccolgono campi correlati, li rendono comprensibili e permettono di inviare un messaggio o cambiare vista.
svgpathsvg contiene disegni scalabili; path ne descrive le forme.
Gli stili seguono tre indizi:
h1, p, figure, blockquote, article.data-layout, data-post-flow, data-card-kind o altri attributi data-* quando il solo elemento non basta.Un attributo data-* deve descrivere una funzione stabile, non una decorazione temporanea. data-layout="home-cover" dice quale comportamento d’impaginazione serve all’immagine; data-purple o data-big descriverebbero invece una decisione visiva isolata, da risolvere nel CSS.
Gli stessi attributi possono collegare JavaScript e markup. Nel componente delle note, per esempio, data-comments-list identifica la lista da aggiornare quando arriva la risposta dell’API. Il testo inserito viene trattato come testo semplice, non come HTML.
La direzione 08 usa tre famiglie, ognuna con una voce distinta: IM Fell English per titoli e accenti, Alegreya per il testo di lettura e le citazioni, Oswald per navigazione, etichette e metadati. I font sono serviti da assets/fonts/, senza richieste a servizi esterni. Le licenze SIL Open Font License sono incluse accanto ai file.
I token all’inizio di assets/style.css danno nomi alle decisioni condivise:
--ink, --bg e --behind definiscono testo e superfici;--red identifica gli accenti editoriali; --link identifica link e azioni cliccabili. Il viola resta così riconoscibile come invito all’interazione, mentre il rosso sottolinea il contenuto;--display, --reading e --interface assegnano le tre famiglie tipografiche;--base-font e --h1-size regolano le scale fluide;--col stabilisce la misura massima del contenuto.Il tema scuro sostituisce i colori dei token tramite prefers-color-scheme. Non filtra le immagini: foto e illustrazioni conservano i colori e la materia con cui sono state scelte.
Il layout di un’immagine è dichiarato con data-layout; i valori e la sintassi Markdown sono documentati in requirements/immagini-layout.md. Una foto d’apertura conserva il proprio rapporto, una galleria segue la sequenza del racconto e le tavole Work mantengono la carta originale.
Le note a margine usano attributi come data-comments-root, data-comments-list e data-form-toggle. Il template le inserisce nel flusso dell’articolo; JavaScript carica e invia le note; assets/xmpp-discussion.css stabilisce filetti, tipografia e controlli. Il lettore può chiudere l’intero flusso delle note o aprire il modulo quando vuole intervenire.
section senza verificare tutte le sezioni interessate.data-* e documenta le eccezioni.assets/style.css contiene ancora regole storiche oltre al sistema 08. La posizione di una regola nella cascata conta: quando una pagina appare diversa dal previsto, trova prima quale selettore la governa e da dove arriva. Aggiungere un override in fondo senza ricostruire quel percorso rende il codice più difficile da leggere la volta successiva.
requirements/direzione-visiva.md — principi editoriali e composizione.requirements/implementazione-direzione-editoriale-commenti.md — template, CSS e flusso delle note.requirements/immagini-layout.md — ruoli, varianti e ottimizzazione delle immagini.La sezione Gli elementi HTML del blog elenca gli elementi trovati nelle pagine generate: è un inventario del markup effettivamente pubblicato, non una lista teorica.