Guida alle specifiche CSS

  • CSS
  • Gabriele Romanato

Le specifiche CSS, secondo quanto affermano i loro autori, sono state scritte tenendo presenti due categorie di lettori: autori e sviluppatori. Gli autori possono trovarvi utili riferimenti per scrivere documenti efficienti, attraenti ed accessibili, mentre gli sviluppatori possono studiare gli utili dettagli tecnici per creare programmi utente conformi. Il problema maggiore delle specifiche è che spesso i dettagli tecnici interessano sia gli autori che gli sviluppatori: infatti è solo conoscendo tali dettagli che gli autori possono risolvere alcuni problemi inerenti il layout dei loro documenti. In questo articolo prenderemo come riferimento la revisione 2.1 delle specifiche CSS. Per un confronto con la versione 2, si consulti la traduzione italiana delle medesime.

Organizzazione delle specifiche

Le specifiche sono organizzate nelle seguenti sezioni:

Sezione 2: Introduzione ai CSS 2.1
L'introduzione comprende un breve tutorial sui CSS 2.1 e una discussione sui principi del loro design.
Sezioni 3-20: Manuale di riferimento CSS 2.1
Questo manuale illustra la struttura dei CSS 2.1 (sintassi, proprietà, valori) e i requisiti richiesti ai programmi utente per la conformità.
Appendici
Le appendici contengono informazioni sulle proprietà acustiche (non normative), un foglio di stile d'esempio per l'HTML 4, i cambiamenti rispetto ai CSS 2, la grammatica dei CSS 2.1, un elenco di riferimenti normativi e non normativi e due indici: uno per le proprietà e uno analitico.

Definizioni delle proprietà CSS

Ogni proprietà CSS inizia con un sommario informativo simile al seguente:

'nome-proprietà'
Valore: valori validi e sintassi
Iniziale: valore iniziale
Si applica a: elementi a cui si applica la proprietà
Ereditata: indica se la proprietà è ereditata
Percentuali: indica come vengono interpretati i valori in percentuale
Media: gruppi di media a cui si applica la proprietà
Valore calcolato: come calcolare questo valore

Valore

Questa parte specifica l'insieme di valori validi per la proprietà il cui nome è 'nome-proprietà'. Vi sono vari tipi di valori:

  1. parole chiave (auto, disc, ecc.)
  2. tipi di dati fondamentali che compaiono tra "<" e ">" (<length>, <percentage>, ecc.)
  3. tipi che hanno lo stesso insieme di valori delle proprietà con cui condividono lo stesso nome (<'border-width'>, <'background-attachment'>, ecc.). In tal caso il tipo di valore è il nome della proprietà (virgolette incluse) compreso tra "<" e ">" (<'border-width'>). Questo tipo non comprende il valore 'inherit'.
  4. valori che non condividono lo stesso nome della proprietà. In questo caso il nome appare tra "<" e ">", come in <border-width>. Si noti la differenza tra <border-width> e <'border-width'>: il secondo è definito nei termini del primo.

Altri termini nelle specifiche sono parole chiave (red) che devono ricorrere senza virgolette, così come lo slash (/) e la virgola (,). I valori possono essere ordinati come segue:

  • Diverse parole consecutive indicano che esse devono comparire tutte nell'ordine dato.
  • Una barra (|) separa due o più alternative. Può ricorrerne solo una.
  • Una doppia barra (||) separa due o più opzioni. Può ricorrerne solo una, in qualsiasi ordine.
  • Le parentesi quadre ([ ]) servono per il raggruppamento.

La consecutività ha la precedenza sulla doppia barra, e la doppia barra sulla barra. Le righe che seguono si equivalgono:

a b | c || d e
[a b] | [c || [d e]]

Ogni tipo, parola chiave o gruppo tra parentesi quadre può essere seguito da uno dei seguenti modificatori:

  • Un asterisco (*) indica che il precedente tipo, parola o gruppo ricorre zero o più volte.
  • Un più indica che il precedente tipo, parola o gruppo ricorre una o più volte.
  • Un punto interrogativo (?) indica che il precedente tipo, parola o gruppo è facoltativo.
  • Una coppia di numeri in parentesi graffe ({A, B}) indica che il precedente tipo, parola o gruppo ricorre almeno A volte e al massimo B volte.

Esempi:

Valore: N | NW | NE
Valore: [&lt;length&gt; | thick | thin] {1,4}
Valore: [&lt;family-name&gt; ,]* &lt;family-name&gt;
Valore: &lt;uri&gt;? &lt;color&gt; [/&lt;color&gt;]?
Valore: &lt;uri&gt; || &lt;color&gt;

I tipi di valore sono specificati in termini di token. Gli spazi tra i valori sono ammessi e in molti casi sono necessari. Per esempio il valore '1em2em' verrebbe letto dal parser come un singolo token DIMEN con il numero '1' e l'identificatore 'em2em', che è un'unità non valida. In questo caso è necessario uno spazio tra '1em' e '2em'.

Iniziale

Questa parte specifica il valore iniziale della proprietà. Se la proprietà viene ereditata, questo è il valore dato all'elemento radice dell'albero del documento.

Si applica a

Questa parte elenca gli elementi a cui si applica la proprietà.

Ereditata

Questa parte indica se il valore della proprietà viene ereditato da un elemento antenato.

Valori in percentuale

Questa parte indica come devono essere interpretate le percentuali. Se vi è "N/A" significa che la proprietà non accetta valori in percentuale.

Gruppi di media

Questa parte indica i gruppi di media a cui si applica la proprietà.

Valore calcolato

Questa parte descrive il valore calcolato per la proprietà.

Proprietà abbreviate

Alcune proprietà sono abbreviate, nel senso che permettono agli autori di specificare i valori di diverse proprietà con una sola proprietà Per esempio la proprietà 'font' inmposta in una volta le proprietà 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' e 'font-family'. Così il seguente codice:


h1 {
	font-weight: bold;
	font-size: 2em;
	line-height: 1;
	font-family: Arial, sans-serif;
	font-variant: normal;
	font-style: normal;
}

si riscrive come:


h1 {font: bold 2em/1 Arial, sans-serif;}

In questo esempio 'font-variant' e 'font-style' assumono i loro valori iniziali.

Torna su