Creare un CSS di base

Ogni progetto ha una sua storia e un suo sviluppo, ma per quanto riguarda i CSS, c’è un piccolo sottoinsieme che spesso ci ritroviamo ad utilizzare e copia-incollare di progetto in progetto, una sorta di foglio di stile di base.

Poter disporre di un CSS di base è fondamentale per diversi motivi:

• Ci fa risparmiare tempo di codifica, per lo meno per i tratti comuni a tutti i siti
• Ci libera dall’imbarazzo della pagina bianca in cui spesso si scontrano designer e sviluppatori
• Ci garantisce una buona consistenza stilistica
• Ci offre una solida base tipografica per le nostre pagine web

Si tratta ovviamente di uno di quelli strumenti di natura molto personale per ogni web designer, e potrà variare di progetto in progetto, ma prendere confidenza con il suo processo di sviluppo non può far altro che semplificare il lavoro iniziale, di qualsiasi natura esso sia.

In questo articolo proseguiremo il percorso iniziato con Armonizzare lo spazio bianco per definire quali sono gli elementi comuni per un CSS di base, focalizzando l’attenzione sul processo della loro definizione. Cominciamo subito.

Gli elementi essenziali

Per poter definire al meglio il nostro CSS di base il punto di partenza è porci una semplice domanda, ovvero: Quali sono gli elementi comuni ad ogni pagina web? Quali le proprietà e dichiarazioni così ricorrenti da essere sempre presenti? La risposta è piuttosto semplice. Ogni progetto necessita soprattutto di una solida base tipografica, ovvero:

• Tipografia: testo principale della pagina e titoli
• Line-height sugli elementi principali
• Spazio bianco, ovvero margini e padding

Siamo pronti per procedere con lo sviluppo del nostro CSS di base, il cui effetto è consultabile nell’esempio che accompagna l’articolo.

Dimensionare il font di base

Sviluppando una pagina web, definire la tipografia di base è una delle prime cose da fare, se non la prima. Ora non vorrei entrare nel merito del dimensionamento fisso (ovvero in pixel) contro relativo (ovvero percentuali e/o em), una delle questioni senza dubbio più discusse nel web design. Personalmente, propendo per il dimensionamento relativo per un semplice fatto: è una scelta più attenta all’utente piuttosto che al design.

Sostanzialmente ci sono due misure del font-size di base ormai universalmente riconosciute dai webdesigner. La prima è 76%, che risulta da uno studio di Owen Briggs: a questa misura corrisponde un font di circa 12px, con il testo medio impostato dal browser. È possibile consultare la resa di tale valore su questa pagina di esempio.

L’alternativa è il testo dimensionato a una misura pari alle dimensioni del font-size del browser, così da avere un font size all’incirca di 16px con testo medio impostato. Per far ciò, è importante specificare il valore del font-size pari a 100.01%, come si è fatto nell’esempio.

Il motivo di tale valore anche in questo caso è storico, ed è documentato in CSS: getting into good coding habits, di cui vale la pena riportare un passaggio tradotto:

Questo strano valore (100.01%) per il font-size compensa diversi bug dei browser. Primo, impostare una misura del font-size in percentuale (invece che in em) elimina un problema di IE con il ridimensionamento dei font. Inoltre alcune versioni di Opera renderanno un font size del 100% troppo piccolo se confrontato con gli altri browser. Safari, d’altra parte, ha un problema con il font-size del 101%. Il miglior suggerimento attuale di usare 100.01% per questa proprietà.

Un altro valore piuttosto diffuso per il font-size del body è 62.5%, a cui corrisponde circa un font di 10px impostato con carattere medio sul browser. La mia opinione è che si tratta di un font davvero troppo piccolo, e può andar bene solo per alcune sezioni di pagina ma non come misura di default di un sito intero.

Definire la grandezza dei titoli

Una volta stabilito il font-size del body procediamo a definire i titoli: la grandezza con cui vengono resi di default rispetto al corpo del testo varia da brower a browser, ed è quindi importante quindi livellare le differenze di resa. Ecco le regole CSS dell’esempio finora:

C’è da evidenziare che l’em relativo al font-size esprime un fattore moltiplicativo: per esempio per gli h1 un font-size di 2.4em indica un font-size grande 2.4 volte quello del font-size del suo contenitore. Salvo ridefinizioni di testo sui div di pagina, i titoli h1 saranno quindi grandi 2.4 volte il font-size del body. Stesso discorso per i titoli di livello inferiore, che si sono definiti in modo da avere una diminuzione progressiva ed esprimere così visivamente la loro “gerarchia” all’interno della pagina.

Da notare infine che le regole per i titoli appena viste possono andar bene anche nel caso in cui si decidesse di impostare una misura del font-size del body in pixel anzichè relativa.

Il line-height

Altro aspetto fondamentale per una pagina web è il line-height, di cui abbiamo parlato non molto tempo fa nell’articolo Capire e usare il line-height in cui si sono affrontati aspetti teorici e pratici di questa proprietà.

Da una parte può essere pratico e veloce specificare il line-height combinandolo con la dichiarazione del font sul body in questo modo:

Ma è pur vero che quello che vorremmo è che la dichiarazione non avesse effetto su tutti gli elementi di pagina. Per quanto riguarda i titoli ad esempio, questi sono costituiti il più delle volte da una sola linea di testo oppure in caso contrario un line-height pari ad un valore accettabile su sezioni di testo normali (come 1.5 nel codice sopra) si rivela poco adeguato.

Il line-height interviene di riflesso sull’altezza degli elementi di pagina, e per i titoli è in grado quindi di generare spazi verticali aggiuntivi il più delle volte indesiderati.

Le soluzioni a questo punto sono due. La prima è definire il line-height per tutta la pagina, per poi specificare un line-height inferiore per i titoli (per esempio 1.2):

L’alternativa è specificare il line-height solo per gli elementi principali della pagina, come ho fatto nell’esempio:

Il CSS di base completo

La costruzione del nostro CSS di base dell’esempio sta volgendo al termine. Non ci resta a questo punto che controllare margini e padding degli elementi principali di pagina: per questa parte rimando all’articolo Armonizzare lo spazio bianco. Vediamo quindi il CSS dell’esempio per intero:

Conclusioni

In questo articolo abbiamo visto brevemente la realizzazione di un CSS di base, che può costutuire un valido starter kit per i vostri progetti. Come ho detto in apertura, racchiude aspetti da considerare in ogni occasione, ma la sua realizzazione può risultare molto soggettiva e variare di caso in caso. È comunque importante capire i meccanismi alla base del suo sviluppo e in particolare i concetti essenziali tali da poter disporre di un solido punto di partenza.

Gli esempi dell’articolo sono disponibili per il download. Alla prossima.