CSS  »  Articoli  »  Mondo CSS 

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à.

Altri articoli

Altre guide

Altre newsletter