Semplicemente

Un approfondimento sulle unità di misura e i valori nelle regole CSS

Con CSS, le misure di lunghezze possono essere espresse con valori numerici positivi o negativi. Esistono proprietà che non ammettono un valore negativo e, nel caso il designer lo inserisse, il browser dovrà ignorarlo.

Il valore numerico della lunghezza deve sempre essere seguito dall'abbreviazione dell'unità di misura scelta, con l'eccezione del valore 0, il quale è evidentemente indipendente dall'unità di misura.

Le unità di misura di lunghezze sono classificabili secondo due categorie: relative e assolute.

Unità di misura relative

Le unità di misura relative esprimono lunghezze calcolate in relazione ad altre. Consideriamo il seguente foglio di stile:

1. p {
2. font-size: 10px;
3. margin-bottom: 1.2em;
4. }

Il valore della proprietà margin-bottom è espresso in em, un'unità di misura relativa. Ma relativa a cosa? Al valore della proprietà font-size, in questo caso 10px. Il risultato, quindi, è che il margine inferiore dei paragrafi è pari a 1,2 moltiplicato 10px: 12px.

Esistono tre unità di misura relative: em, ex e px.

L'unità em

Nella tipografia elettronica possiamo considerare l'em come il box che contiene il carattere e la cui altezza è calcolata considerando anche i segni diacritici come accenti, ascendenti (per esempio il prolungamento verso l'alto della b) e discendenti (per esempio il prolungamento verso il basso della lettera p).

Chiaramente caratteri diversi hanno "em" differenti. Per esempio il carattere Trebuchet ha un em più ampio del carattere Verdana.

Come abbiamo visto i valori espressi in em sono calcolati in relazione a quello della proprietà font-size dell'elemento in questione. Quando la proprietà font-size stessa è espressa in em, il valore si relaziona a quello dell'elemento genitore (o antenato).

Se è specificata per una proprietà che influenza l'elemento radice del linguaggio di marcatura, il valore è relativo a quello predefinito per quella data proprietà.

L'unità ex

Si riferisce all'altezza della lettera x minuscola di un carattere, denominata x-height.

Data l'elevata variabilità tra font differenti e la difficoltà nel calcolo i browser spesso la approssimano a 0.5em. E' un'unità a dire il vero quasi mai utilizzata.

L'unità px (pixel)

L'unità pixel, al contrario di ciò che comunemente si pensa, è relativa. Questo perché la dimensione del pixel dipende alla risoluzione del dispositivo di visualizzazione.

Alla massima risoluzione la dimensione fisica di un pixel è identica alla grandezza del punto più piccolo che lo schermo può rappresentare. Se la risoluzione è impostata a un valore inferiore a quello massimo, l'area di 1px per 1px corrisponderà, al contrario, ad un insieme di punti sullo schermo (sarà quindi più "grande").

La risoluzione di un monitor si calcola misurando la larghezza in pollici dell'area di visualizzazione e dividendo per essa il numero di pixel orizzontali: per esempio 1280 pixel/13,3 pollici = 96,2 pixel per pollice. A 1024 x 768 la risoluzione è 1024 pixel / 13,3 pollici = 77 pixel per pollice. Per approfondire consiglio di leggere l'illuminante articolo di Mauro Boscarol.

Unità di misura assolute

Le unità di misura assolute specificano una lunghezza fissa fisicamente misurabile. Queste unità sono utili unicamente quando le proprietà fisiche del dispositivo di output sono note. Esse sono:

• Pollici, in (1 pollice = 2.54 cm)
• Centimetri, cm (1 centimetro = 0,394 pollici)
• Millimetri, mm (10 millimetri = 1 centimetro; 1 centimetro = 0.0394 pollici; 25.4 millimetri = 1 pollice)
• Punti, pt (1 punto = 1/72 pollici oppure 72 punti = 1 pollice)
• Pica, pc (1 pica = 12 punti; 6 pica = 1 pollice)

I punti e i pica sono unità di misura utilizzate in tipografia. Le unità di misura assolute non devono essere mai utilizzate per dimensionare contenuti visualizzati a schermo. Mentre i punti, per esempio, sono indicati per dimensionare i caratteri nei fogli di stile per la stampa.

Misure in percentuale

Le dimensioni definite in percentuale (%) sono relative a un altro valore che dipende dalla proprietà alla quale si applicano.

1. #menu { width: 20%; }

Nella regola precedente è assegnato un valore in percentuale alla proprietà width. Quando si assegna un valore in percentuale a questa proprietà esso è relativo alla larghezza del blocco contenitore (vedremo in un articolo successivo cosa si intende per "blocco contenitore" di un elemento).

Nel caso, invece, di una regola come: p { font-size: 10px; line-height: 150%; }, il valore della proprietà line-heght è relativo a quello di font-size.

Nelle specifiche CSS, per ogni proprietà che ammette valori in percentuale è specificato anche a quale altro valore sono relative.

Colori

La specifica CSS 2.1 indica 17 parole chiave per la definizione dei colori. Esistono altri due metodi numerici:

• La notazione funzionale numerica o percentuale.
• La notazione esadecimale.

Le seguenti regole definiscono lo stesso colore nelle diverse notazioni possibili:

1. p { color: red; }
2. p { color: #f00; }
3. p { color: #ff0000; }
4. p { color: rgb(255,0,0); }
5. p { color: rgb(100%, 0%, 0%); }

Il valore red è una delle parole chiave e definisce il colore rosso. Le righe 2 e 3 impostano lo stesso colore ma in notazione esadecimale. Quando lettere e numeri sono identici a coppie, come nel valore #ff0000, è possibile abbreviarlo in una tripletta: #f00. Gli ultimi due valori (righe 4 e 5) sono espressi in notazione funzionale. La numerica (riga 4) definisce i valori rgb in un range numerico da 0 a 255. La percentuale utilizza un range da 0% a 100%. La notazione funzionale è particolarmente familiare a chi utilizza software grafici.

Contribuisci alla serie di articoli Introduzione ai CSS

Tag: caratteri, CSS, introduzione ai CSS, Mauro Boscarol, tipografia

Questo articolo è stato inviato Saturday 22 December 2007 alle 20:47 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.