4 Sintassi CSS2 e tipi di dati fondamentali

Sommario

4.1 Sintassi

Questa sezione descrive una grammatica (e regole di analisi [parsing] compatibili nel futuro) comune ad ogni versione dei CSS (compresi i CSS2). Future versioni dei CSS aderiranno a questa sintassi profonda, sebbene possano aggiungervi restrizioni sintattiche aggiuntive.

Queste descrizioni sono normative. Esse sono inoltre completate dalle regole di grammatica normativa esposte nell'Appendice D.

4.1.1 Tokenizzazione [formalizzazione]

Tutti i livelli dei CSS -- livello 1, livello 2, e tutti i livelli futuri -- usano la medesima sintassi profonda. Questo consente ai programmi utente [user-agents] di analizzare [to parse] (ma non di comprendere appieno) i fogli di stile scritti su livelli di CSS che non esistevano al momento in cui i programmi utente [user-agents] furono creati. Gli sviluppatori possono usare questa caratteristica per creare fogli di stile che funzionino con i programmi utente [user-agents] più vecchi, sfruttando al contempo le possibilità dei più recenti livelli dei CSS.

A livello lessicale, i fogli di stile CSS consistono in una sequenza di token [formalmente, ogni componente o parte indivisibile di un'espressione viene chiamato token] L'elenco di token per i CSS2 è quello che segue. Le definizioni usano espressioni regolari Lex-style [basato sullo stile di un analizzatore lessicale] I codici ottali fanno riferimento a ISO 10646 ([ISO10646]). Come in Lex, in caso di selezioni multiple, la selezione più lunga determina il token.
Token Definizione

IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO <!--
CDC -->
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM ogni altro carattere non selezionato dalle precedenti regole

Le macro nelle parentesi graffe di sopra ({}) sono definite come segue:
Macro Definizione

ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [a-zA-Z]|{nonascii}|{escape}
nonascii[^\0-\177]
unicode \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape {unicode}|\\[ -~\200-\4177777]
nmchar [a-z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*\.[0-9]+
string {string1}|{string2}
string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*

Sotto vi è la sintassi profonda dei CSS. Le sezioni che seguono descrivono come usarla. L'Appendice D descrive una grammatica più restrittiva, la quale è più prossima al linguaggio dei CSS di livello 2.

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

I token COMMENT non ricorrono nella grammatica (per mantenerla leggibile), ma ciascun numero di questi token può apparire ovunque fra gli altri token.

Il token S nella grammatica di sopra sta per spazio bianco. Solo i caratteri "spazio" (Unicode code 32), "tab" (9), "avanzamento di riga" [line feed] (10), "ritorno di carrello" (13), e "avanzamento di pagina" [form feed] (12) possono ricorrere nello spazio bianco. Altri caratteri simili allo spazio, come lo "spazio em" (8195) e lo "spazio ideografico" (12288), non sono mai parte dello spazio bianco.

4.1.2 Parole chiave

Le parole chiave hanno la forma di identificatori. Le parole chiave non devono essere posizionate fra virgolette ("..." o '...'). Così,

red

è una parola chiave, ma

"red"
non lo è. (È una stringa.) Altri esempi non validi:

Esempi(o) non valido(i):

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3 Caratteri e forma maiuscola/minuscola

Le seguenti regole sono sempre vincolanti:

4.1.4 Asserzioni

Un foglio di stile CSS, per ogni versione dei CSS, consiste di un elenco di asserzioni (si veda la grammatica di sopra). Ci sono due tipi di asserzioni: regole-a [at-rules] e insiemi di regole Ci può essere dello spazio bianco intorno alle asserzioni.

In queste specifiche, le espressioni "immediatamente prima" o "immediatamente dopo" significano senza intervento di spazio bianco o commenti.

4.1.5 Regole-a [at-rules]

Le regole-a [at-rules] iniziano con una parola chiave-a [at-keyword], un carattere '@' seguito immediatamente da un identificatore (for example, '@import', '@page').

Una regola-a [at-rule] consiste di tutto ciò che si trova fino al punto e virgola (;) incluso, o fino al vicino blocco, qualunque cosa venga per prima. Un programma utente [user-agent] che incontra una regola-a [at-rule] non riconosciuta deve ignorare l'intera regola-a [at-rule] e continuare ad analizzare [parsing] il codice che segue.

I programmi utente [user-agents] CSS2 devono ignorare qualsiasi regola '@import' che ricorra all'interno di un blocco o che non preceda tutti gli insiemi di regole.

Esempi(o) non validi(o):

Si supponga, ad esempio, che un analizzatore [parser, un componenente software che analizza la conformità del codice alla sintassi standard] CSS2 incontri questo foglio di stile:

@import "subs.css";
H1 { color: blue }
@import "list.css";

Il secondo '@import' non è valido secondo i CSS2. L'analizzatore [parser] CSS2 ignora l'intera regola-a [at-rule], riducendo effettivamente il foglio di stile a:

@import "subs.css";
H1 { color: blue }

Esempi(o) non valido:

Nel seguente esempio, la seconda regola '@import' non è valida, poichè ricorre all'interno di un blocco '@media':

@import "subs.css";
@media print {
  @import "print-main.css";
  BODY { font-size: 10pt }
}
H1 {color: blue }

4.1.6 Blocchi

Un blocco inizia con una parentesi graffa destra ({) e finisce con la corrispondente parentesi graffa sinistra (}). Fra di esse può esservi qualunque carattere, ma le parentesi tonde (( )), quadre ([ ]) e graffe ({ }) devono sempre ricorrere in coppie corrispondenti e devono essere annidate. Le singole virgolette (') e le doppie (") devono anch'esse ricorrere in coppie corrispondenti, e i caratteri posti fra di esse sono analizzati [parsed] come una stringa. Si veda la Tokenizzazione [formalizzazione] sopracitata per la definizione di stringa.

Esempi(o) non validi(o):

Ecco un esempio di blocco. Si noti che la parentesi graffa destra fra le doppie virgolette non trova riscontro nella parentesi graffa di apertuta del blocco, e che la seconda virgoletta singola è un carattere di escape, sicchè non trova riscontro nella prima virgoletta singola:

{ causta: "}" + ({7} * '\'') }

Si noti che la regola di sopra non è un valido CSS2, ma è ancora un blocco come definito sopra.

4.1.7 Insiemi di regole, blocchi di dichiarazione e selettori

Un insieme di regole (chiamato anche "regola" [rule]) consiste di un selettore seguito da un blocco di dichiarazione.

Un blocco di dichiarazione (chiamato anche blocco-{} [{}-block] nel testo che segue) inizia con una parentesi graffa sinistra ({) e finisce con la corrispondente parentesi graffa destra (}). Fra di esse deve esservi un elenco di zero o più dichiarazioni separate da un punto e virgola (;).

Il selettore (si veda anche la sezione sui selettori) consiste di tutto ciò che è compreso fino alla (ma non inclusa) prima parentesi graffa sinistra ({). Un selettore va sempre insieme con un blocco-{} [{}-block]. Quando un programma utente [user-agent] non può analizzare [parse] il selettore (ossia non č un valido CSS2), deve ignorare anche il blocco-{} [{}-block].

I CSS2 attribuiscono un significato speciale alla virgola (,) nei selettori. Tuttavia, poichè non sappiamo se la virgola possa acquisire altri significati nelle future versioni dei CSS, l'intera asserzione dovrebbe essere ignorata se vi è un qualche errore nel selettore, anche se il resto del selettore può apparire conforme nei CSS2.

Esempi(o) non validi(o):

Ad esempio, poichè il carattere "&" non è un token valido in un selettore CSS2, un programma utente [user-agent] CSS2 deve ignorare tutta la seconda riga, e non impostare il colore di H3 sul rosso:

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

Esempi(o):

Ecco un esempio più complesso. Le prime due coppie di parentesi graffe sono all'interno di una stringa, e non indicano la fine del selettore. Questa è una valida asserzione CSS2.

P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 Dichiarazioni e proprietà

Una dichiarazione può essere sia vuota o consistere in una proprietà, seguita dai due punti (:), seguiti da un valore. Attorno a ciascuno di essi può esservi uno spazio bianco.

A causa del modo in cui i selettori lavorano, dichiarazioni multiple per lo stesso selettore possono essere organizzate in gruppi separati dal punto e virgola (;).

Esempi(o):

Così le seguenti regole:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

sono equivalenti a:

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Una proprietà è un identificatore [identifier]. Ogni carattere può ricorrere nel valore, ma parentesi tonde ("( )"), quadre ("[ ]"), graffe ("{ }"), virgolette singole (') e doppie virgolette (") devono essere in coppie corrispondenti, e ai punti e virgola che non si trovano nelle stringhe si deve applicare l'escape. Parentesi tonde, quadre e graffe possono essere annidate. All'interno delle virgolette, i caratteri sono analizzati [parsed] come una stringa.

La sintassi dei valori è specificata separatamente per ogni proprietà, ma in ogni caso i valori sono costituiti da identificatori, stringhe, numeri, lunghezze, percentuali, URI, colori, angoli, tempi, e frequenze.

Un programma utente [user-agent] deve ignorare una dichiarazione con un nome di proprietà non valido o un valore non valido. Ogni proprietà CSS2 ha le sue restrizioni sintattiche e semantiche sui valori che può accettare.

Esempi(o) non validi(o):

Per esempio, si supponga che un analizzatore [parser] CSS2 incontri questo foglio di stile:

H1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
P { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

La seconda dichiarazione sulla prima riga ha il valore non valido di '12pt'. La seconda dichiarazione sulla seconda riga contiene una proprietà non definita 'font-vendor'. L'analizzatore [parser] CSS2 ignorerà queste dichiarazioni, riducendo effettivamente il foglio di stile a:

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

4.1.9 Commenti

I commenti iniziano con i caratteri "/*" e terminano con i caratteri "*/". Possono ricorrere ovunque fra i token, e il loro contenuto non ha influenza sulla resa [rendering]. Non possono essere annidati.

I CSS permettono anche i delimitatori di commento SGML ("<!--" e "-->") in determinate posizioni, ma essi non delimitano i commenti CSS. Sono permessi affinchè le regole di stile che appaiono nel sorgente di un documento HTML (nell'elemento STYLE) possano essere nascoste ai programmi utente [user-agents] precedenti all'HTML 3.2. Si vedano le specifiche HTML 4.0 ([HTML40]) per ulteriori informazioni.

4.2 Regole per gestire errori grammaticali [parsing errors]

In alcuni casi, i programmi utente [user-agents] devono ignorare parte di un foglio di stile non valido. Queste specifiche definiscono ignorare intendendo con questo che il programma utente [user-agent] analizza [parses] la parte non valida (per trovare il suo inizio e la sua fine ), ma si comporta come se non ci fosse stata.

Per assicurare che nuove proprietà e nuovi valori per proprietà esistenti possano essere aggiunti in futuro, si richiede che i programmi utente [user-agents] obbediscano alle seguenti regole quando incontrano i seguenti scenari:

4.3 Valori

4.3.1 Numeri interi e numeri reali

Alcuni tipi di valore possono avere valori interi (indicati da <integer>) o valori di numeri reali (indicati da <number>). I numeri reali e interi sono specificati solo in notazione decimale. Un <integer> consiste di una o più cifre da "0" a "9". Un <number> può anche essere un <integer>, o può essere zero o più cifre seguite da un punto (.) seguito da una o più cifre. Sia i numeri interi che reali possono essere preceduti da un "-" o "+" per indicare il segno.

Si noti che molte proprietà che ammettono un numero intero o reale come valore restringono in qualche misura il valore, spesso ad un valore non-negativo.

4.3.2 Lunghezze

Le lunghezze si riferiscono a misurazioni orizzontali o verticali.

Il formato di un valore di lunghezza (indicato da <length> in queste specifiche) è un carattere col segno opzionale ('+' o '-', con '+' che è di default) immediatamente seguito da un <number> (con o senza un punto decimale) immediatamente seguito da un indetificatore di unità (ossia px, deg, ecc.). Dopo la lunghezza '0', l'identificatore di unità è opzionale.

Alcune proprietà ammettono valori di lunghezza negativi, ma questo può complicare il modello di formattazione e possono esservi limiti nell'implementazione specifica. Se un valore di lunghezza negativo non può essere supportato, dovrebbe essere convertito nel valore più prossimo che può essere supportato.

Ci sono due tipi di unità di lunghezza : relative ed assolute. Le unità di lunghezza relativa specificano una lunghezza relativa ad un'altra proprietà di lunghezza. I fogli di stile che usano unità relative scaleranno più facilmente da un media ad un altro (per esempio, da un display di computer ad una stampante laser).

Unità relative sono:

Esempi(o):

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

L'unità 'em' è uguale al valore computato della proprietà 'font-size' dell'elemento sul quale è usata. L'eccezione avviene quando 'em' ricorre nel valore della stessa proprietà 'font-size', nel qual caso fa riferimento alla grandezza del font [carattere] dell'elemento genitore. Può essere usata per la misurazione orizzontale o verticale. (Questa unità è a volte chiamata anche ampiezza-quadrato [quad-width] nei testi tipografici.)

L'unità 'ex' è definita dalla 'x-height' del font [carattere]. La x-height è così chiamata perchè è spesso uguale all'altezza della "x" minuscola. Comunque, un 'ex' è definito anche per i font [insiemi di caratteri] che non contengono una "x".

Esempi(o):

La regola:

H1 { line-height: 1.2em }

sta a significare che l'altezza di riga [line height] degli elementi H1 sarà del 20% più grande della dimensione del font [carattere] degli elementi H1. D'altra parte:

H1 { font-size: 1.2em }

sta a significare che la dimensione del font [carattere] degli elementi H1 sarà del 20% più grande della dimensione del font [carattere] ereditata dagli elementi H1.

Quando vengono specificati per l'elemento radice [root] dell' albero del documento [document tree] (per esempio "HTML" nell'HTML), 'em' ed 'ex' si riferiscono al valore iniziale della proprietà.

Le unità pixel sono relative alla risoluzione del dispositivo di visualizzazione [viewing device], ossia, molto spesso, il display di un computer. Se la densità dei pixel del dispositivo di output [output device] è molto diversa da quella di un tipico display di computer, il programma utente [user-agent] dovrebbe ridimensionare [rescale] i valori dei pixel. Si raccomanda che il pixel di riferimento [reference pixel] sia l'angolo visivo di un pixel su un dispositivo con la densità di 90dpi ed una distanza dal lettore della lunghezza di un braccio. Per una lunghezza calcolata del braccio di 28 pollici [inches. misura lineare inglese pari a 2,54 centimetri], l'angolo visivo è perciò di circa 0.0227 gradi.

Per la lettura alla lunghezza di un braccio, 1px così corrisponde a circa 0.28 mm (1/90  di pollice ). Quando è stampato su una stampante laser, ossia per una lettura ad un pò meno della lunghezza di un braccio, (55 cm, 21 pollici), 1px è circa 0.21 mm. Su una stampante a 300 dpi [dots-per-inch], questa misura si può arrotondare fino a 3 punti [dots] (0.25 mm); su una stampante a 600 dpi, può essere arrotondata a 5 punti [dots].

Le due immagini sotto illustrano l'effetto della distanza di visualizzazione [viewing distance] sulla grandezza di un pixel e l'effetto della risoluzione del dispositivo. Nella prima immagine, una distanza di lettura di 71 cm (28 pollici ) risulta di un px di 0.28 mm, mentre una distanza di lettura di 3.5 m (12 piedi [feet, da "foot" misura inglese pari a 30,48 centimetri]) richiede un px di 1.4 mm.

Mostra come i pixel diventino più grandi con l'aumentare della distanza   [D]

Nella seconda immagine, un'area di 1px per 1px è coperta da un singolo punto [dot] in un dispositivo a bassa risoluzione (uno schermo di computer), mentre la medesima area è coperta da 16 punti [dots] in un dispositivo a più alta risoluzione (come una stampante laser da 400 dpi).

Mostra come ci vogliano più pixel di un dispositivo (punti)
per coprire un'area di 1px per 1px su un dispositivo ad alta risoluzione piuttosto che su uno a
bassa risoluzione   [D]

Gli elementi figli non ereditano i valori relativi specificati per il loro genitore; essi (generalmente) ereditano il valore computato.

Esempi(o):

Nelle regole seguenti, valore computato 'text-indent' degli elementi H1 sarà di 36pt, non di 45pt, se H1 è un figlio dell'elemento BODY.

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* i.e., 36pt */
}
H1 { font-size: 15pt }

Le unità di misura assolute sono utili solo quando le proprietà fisiche del medium di output sono conosciute. Le unità assolute sono:

Esempi(o):

H1 { margin: 0.5in }      /* inches  */
H2 { line-height: 3cm }   /* centimeters */
H3 { word-spacing: 4mm }  /* millimeters */
H4 { font-size: 12pt }    /* points */
H4 { font-size: 1pc }     /* picas */

Nei casi in cui la misura specificata non può essere supportata, i programmi utente [user-agents] devono usare un valore attuale che la approssimi.

4.3.3 Percentuali

Il formato di un valore percentuale (indicato da <percentage> in queste specifiche) è un segno opzionale ('+' o '-', con '+' che è di default) immediatamente seguito da un <number> immediatamente seguito da '%'.

I valori di percentuale sono sempre relativi ad un altro valore, per esempio una lunghezza. Ogni proprietà che ammette percentuali definisce anche il valore a cui la percentuale si riferisce. Il valore può essere quello di un'altra proprietà per lo stesso elemento, una proprietà per un elemento antenato, o un valore del contesto di formattazione (per esempio la larghezza di un blocco contenitore). Quando un valore di percentuale è impostato per una proprietà dell'elemento radice [root] e la percentuale è definita come riferentesi al valore ereditato di qualche proprietà, il il valore risultante è la percentuale del valore iniziale di quella proprietà.

Esempi(o):

Poichè gli elementi figli (generalmente) ereditano i valori computati del loro genitore, nel seguente esempio i figli dell'elemento P erediteranno un valore di 12pt per 'line-height', non il valore percentuale (120%):

P { font-size: 10pt }
P { line-height: 120% }  /* 120% of 'font-size' */

4.3.4 URL + URN = URI

URL (Uniform Resource Locator, si veda [RFC1738] e [RFC1808]) forniscono l'indirizzo di una risorsa sul Web. Un nuovo modo di identificare le risorse è chiamato URN (Uniform Resource Name). Tutti insieme vengono chiamati URI (Uniform Resource Identifiers, si veda [URI]). Queste specifiche usano il termine URI.

I valori URI in queste specifiche sono indicati da <uri>. La notazione funzionale usata per designare gli URI nei valori delle proprietà è "url()", come in:

Esempi(o):

BODY { background: url("http://www.bg.com/pinkish.gif") }

Il formato di un valore URI è 'url(' seguito da un opzionale spazio bianco seguito da un opzionale carattere di virgoletta singola (') o di doppie virgolette (") seguito dall'URI stesso, seguito da un opzionale carattere di virgoletta singola (') o di doppie virgolette (") seguito da un opzionale spazio bianco seguito da ')'. I due caratteri di citazione devono essere gli stessi.

Esempi(o):

Un esempio senza virgolette:

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Alle parentesi, virgole, caratteri di spazio bianco, alle singole virgolette (') e doppie virgolette (") che compaiono in un URI deve essere applicato un'escape con un backslash: '\(', '\)', '\,'.

A seconda del tipo di URI, puņ anche essere possibile scrivere i precedenti caratteri come escape di URI (dove "(" = %28, ")" = %29, ecc.) come descritto in [URI].

Per creare fogli di stile modulari che non siano dipendenti dalla locazione assoluta di una risorsa, gli autori possono usare URI relativi. Gli URI relativi (come definito in [RFC1808]) sono risolti in URL completi usando un URI di base. RFC 1808, sezione 3, definisce l'algoritmo normativo per questo processo. Per i fogli di stile CSS, l'URI di base è quello del foglio di stile, non quello del documento sorgente.

Esempi(o)

Per esempio, si supponga che la seguente regola:

BODY { background: url("yellow") }

sia allocata in un foglio di stile designato dall'URI:

http://www.myorg.org/style/basic.css

Lo sfondo del BODY del documento sorgente sarà ricoperto con qualunque immagine descritta dalla risorsa designata dall'URI

http://www.myorg.org/style/yellow

I programmi utente [user-agent] possono differire nel modo con cui gestiscono gli URI che designano risorse non disponibili o inapplicabili.

4.3.5 Contatori

I contatori sono indicati da identificatori [identifier(s)] (si vedano le proprietà 'counter-increment' e 'counter-reset' ). Per far riferimento al valore di un contatore, viene usata la notazione 'counter(<identifier>)' o 'counter(<identifier>, <list-style-type>)'. Lo stile di default è 'decimal'.

Per far riferimento ad una sequenza di contatori annidati dello stesso nome, la notazione è 'counters(<identifier>, <string>)' o 'counters(<identifier>, <string>, <list-style-type>)'. Si veda "Contatori annidati ed ambito di applicazione" nel capitolo sul contenuto generato.

Nei CSS2, i valori dei contatori possono essere restituiti solo dalla proprietà 'content'. Si noti che 'none' è un possibile <list-style-type>: 'counter(x, none)' produce una stringa vuota.

Esempi(o):

Ecco un foglio di stile che numera i paragrafi (P) per ogni capitolo (H1). I paragrafi sono numerati con numerali romani, seguiti da un punto e da uno spazio:

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

I contatori che non sono nell'ambito di applicazione [scope] di ciascun 'counter-reset', si suppone che siano stati reimpostati a 0 da un 'counter-reset' sull'elemento radice [root].

4.3.6 Colori

Un <color> è anch'esso una parola chiave o una specifica numerica RGB.

L'elenco delle parole chiave per i nomi dei colori è: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow. Questi 16 colors sono definiti nell'HTML 4.0 ([HTML40]). In aggiunta a queste parole chiave per i colori, gli utenti possono specificare parole chiave che corrispondono ai colori usati da taluni oggetti nell'ambiente dell'utente. Si prega di consultare la sezione sui colori di sistema per ulteriori informazioni.

Esempi(o):

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Il modello di colore RGB è usato nelle specifiche numeriche del colore. Questi esempi specificano tutti lo stesso colore:

Esempi(o):

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

Il formato di un valore RGB nella notazione esadecimale è un '#' immediatamente seguito da tre o sei caratteri esadecimali. La notazione RGB a tre cifre (#rgb) è convertita nella forma a sei cifre (#rrggbb) duplicando le cifre, non aggiungendo gli zeri. Per esempio, #fb0 si espande in #ffbb00. Questo assicura che il bianco [white] (#ffffff) possa essere specificato con la breve notazione (#fff) e rimuove ogni dipendenza dalla profondità di colore del display.

Il formato di un valore RGB nella notazione funzionale è 'rgb(' seguito da un elenco di tre valori numerici separati dalla virgola (o tre valori interi o tre valori percentuali) seguito da ')'. Il valore intero 255 corrisponde a 100%, e a F o FF nella notazione esadecimale: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Caratteri di spazio bianco sono ammessi intorno ai valori numerici.

Tutti i colori RGB sono specificati nello spazio di colore SRGB (si veda [SRGB]). I programmi utente [user-agent] possono differire nella fedeltà con cui rappresentano questi colori, ma usare SRGB fornisce un'univoca e obiettivamente misurabile definizione di ciò che il colore dovrebbe essere, il che può essere messo in relazione con gli standard internazionali (si veda [COLORIMETRY]).

I programmi utente [user-agent] conformi possono limitare i loro tentativi di visualizzare il colore eseguendo su di essi una correzione di gamma. SRGB specifica un gamma di visualizzazione di 2.2 sotto specificate condizioni di visualizzazione. I programmi utente [user-agent] dovrebbero aggiustare i colori dati nei CSS in modo tale che, in combinazione con la gamma di visualizzazione "naturale" di un dispositivo di output, venga prodotta un'effettiva gamma di visualizzazione di 2.2. Si veda la sezione sulla correzione di gamma per ulteriori dettagli. Si noti che solo i colori specificati nei CSS ne sono interessati; per esempio ci si aspetta che le immagini rechino la propria informazione di colore.

Il valori al di fuori dello spettro [gamut] del dispositivo dovrebbero essere ridimensionati [clipped, lett. "ritagliati"]: i valori di rosso, verde e blu devono essere cambiati per ricadere entro il raggio supportato dal dispositivo. Per un tipico monitor CRT, il cui spettro di dispositivo è lo stesso di SRGB, le tre regole di sotto sono equivalenti:

Esempi(o):

EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */
EM { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

Altri dispositivi, come le stampanti, hanno differenti spettri per SRGB; alcuni colori al di fuori del raggio SRGB di 0..255 saranno rappresentabili (entro lo spettro del dispositivo), mentre altri colori all'interno del raggio SRGB di 0..255 sranno al di fuori dello spettro del dispositivo e saranno così ridimensionati.

Note. Quantunque i colori possono aggiungere significative quantità di informazione ai documenti e renderli più leggibili, si consideri che alcune combinazioni di colori possono causare problemi agli utenti con cecità ai colori. Se usate un'immagine di sfondo o impostate il colore di sfondo, siete pregati di conseguenza di armonizzare [to adjust, lett. "aggiustare, adattare"] i colori di primo piano.

4.3.7 Angoli

I valori di angolo (indicati da <angle> nel testo) sono usati con i fogli di stile acustici.

Il loro formato è un segno opzionale ('+' o '-', con '+' che è di default) immediatamente seguito da un <number> immediatamente seguito da un identificatore di unità dell'angolo.

Identificatori dell'unità dell'angolo sono:

I valori dell'angolo possono essere negativi. Dovrebbero essere normalizzati nel raggio di 0-360deg dal programma utente [user-agent]. Per esempio, -10deg e 350deg sono equivalenti.

Per esempio, un angolo retto è '90deg' o '100grad' o '1.570796326794897rad'.

4.3.8 Tempi

I valori di tempo (indicati da <time> nel testo) sono usati con i fogli di stile acustici.

Il loro formato è un <number> immediatamente seguito da un identificatore di unità di tempo.

Identificatori di unità di tempo sono:

I valori di tempo non possono essere negativi.

4.3.9 Frequenze

I valori di frequenza (indicati da <frequency> nel testo) sono usati con i fogli di stile acustici.

Il loro formato è un <number> immediatamente seguito da un'identificatore di unità di frequenza.

Identificatori di unità di frequenza sono:

I valori di frequenza non possono essere negativi.

Per esempio, 200Hz (o 200hz) è un suono di basso, e 6kHz (o 6khz) è un suono di soprano.

4.3.10 Stringhe

Le stringhe possono essere scritte sia con doppie virgolette che con virgolette singole. Le doppie virgolette non possono ricorrere all'interno di doppie virgolette, a meno che non venga applicato l'escape (come '\"' o come '\22'). Cosa analoga per le singole virgolette ("\'" or "\27").

Esempi(o):

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

Una stringa non può contenere direttamente una nuova riga. Per includere una nuova riga in una stringa, si usi l'escape "\A" (A esadecimale è il carattere di avanzamento di riga in Unicode, ma rappresenta la nozione generica di "nuova riga" nei CSS). Si veda la proprietà 'content' per un esempio.

È possibile dividere le stringhe su più righe, per ragioni estetiche o per altri motivi, ma in tal caso alla stessa nuova riga va applicato un escape con un backslash (\). Per esempio, i seguenti due selettori sono esattamente la stessa cosa:

Esempi(o):

A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}

4.4 Rappresentazione di un documento CSS

Un foglio di stile CSS è una sequenza di caratteri dell'Universal Character Set (si veda [ISO10646]). Per la trasmissione e la memorizzazione, questi caratteri devono essere codificati con una codifica di caratteri che supporti l'insieme dei caratteri disponibili in US-ASCII (per esempio, ISO 8859-x, SHIFT JIS, ecc.). Per una buona introduzione agli insiemi di caratteri e alle codifiche di caratteri, si prega di consultare le specifiche HTML 4.0 ([HTML40], capitolo 5), si vedano anche le specifiche XML 1.0 ([XML10], sezioni 2.2 e 4.3.3, e l'Appendice F.

Quando un foglio di stile è inserito in un altro documento, come nell'elemento STYLE o nell'attributo "style" dell'HTML, il foglio di stile condivide la codifica di caratteri dell'intero documento.

Quando un foglio di stile risiede in un file separato, i programmi utente [user-agent] devono osservare le seguenti priorità nel determinare la codifica dei caratteri di un documento (dalla priorità più alta alla più bassa):

  1. Un parametro HTTP "charset" in un campo "Content-Type".
  2. La regola-a [at-rule] @charset.
  3. I meccanismi del linguaggio del documento di riferimento (per esempio, in HTML, l'attributo "charset" dell'elemento LINK).

Al massimo una regola @charset può apparire in un foglio di stile esterno -- non deve apparire in un foglio di stile incorporato -- e deve apparire all'inizio del documento, non preceduto da altri caratteri . Dopo "@charset", gli autori specificano il nome di una codifica di caratteri. Il nome deve essere un nome di un insieme di caratteri come descritto nel registro IANA (Si veda [IANA]. Si veda anche [CHARSETS] per un elenco completo di insiemi di caratteri). Per esempio:

Esempi(o):

@charset "ISO-8859-1";

Queste specifiche non impongono quali codifiche di caratteri un programma utente [user-agent] debba supportare.

Si noti che l'affidarsi al costrutto @charset pone teoricamente un problema, poichè non vi è informazione a priori [latino. lett. "in primo luogo"] su come è codificato. In pratica, tuttavia, le codifiche largamente in uso su Internet sono basate su ASCII, UTF-16, UCS-4, o (raramente) su EBCDIC. Questo significa che in generale i valori del byte iniziale di un documento permetono al programma utente [user-agent] di individuare [to detect] la famiglia di codifica attendibile, che fornisce informazioni sufficienti a decodificare la regola @charset, che a sua volta determina l'esatta codifica dei caratteri.

4.4.1 Come riferirsi a caratteri non rappresentati all'interno di una codifica di caratteri

Un foglio di stile può dover far riferimento a caratteri che non possono essere rappresentati nella codifica di caratteri in uso. Questi caratteri devono essere rappresentati con escape riferentesi ai caratteri ISO 10646. Questi escape assolvono al medesimo scopo dei riferimenti numerici ai caratteri nei documenti HTML o XML (si veda [HTML40], capitoli 5 e 25).

Il meccanismo di escape del carattere dovrebbe essere usato quando solo pochi caratteri devono essere rappresentati in questo modo. Se la maggior parte [del contenuto] di un documento richiede l'applicazione di escape, gli autori dovrebbero codificarlo con una codifica più appropriata (per esempio, se il documento contiene molti caratteri del Greco, gli autori potrebbero usare "ISO-8859-7" o "UTF-8").

Programmi processori [processors] intermedi che usano una diversa codifica di caratteri possono tradurre queste sequenze con escape in sequenze di byte di quella codifica. Programmi processori intermedi non devono, d'altro canto, alterare le sequenze di escape che cancellino il significato speciale di un carattere ASCII.

I programmi utente [user-agent] conformi devono correlare correttamente in Unicode tutti i caratteri in ogni codifica di caratteri che riconoscono (o devono comportarsi come se l'avessero fatto).

Per esempio, un documento trasmesso come ISO-8859-1 (Latin-1) non può contenere direttamente lettere greche: "κουρος" (Greco: "kouros" ["giovane", sostantivo]) deve essere scritto come "\3BA\3BF\3C5\3C1\3BF\3C2".

Nota. In HTML 4.0, i riferimenti numerici ai caratteri sono interpretati nei valori dell'attributo "style" ma non nel contenuto dell'elemento STYLE. A causa di questa asimmetria, raccomandiamo che gli autori usino il meccanismo CSS di escape dei caratteri piuttosto che i riferimenti numerici ai caratteri sia per l'attributo "style" che per l'elemento STYLE. Per esempio, raccomandiamo:

<SPAN style="voice-family: D\FC rst">...</SPAN>

piuttosto che:

<SPAN style="voice-family: D&#252;rst">...</SPAN>