
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Consigli e trucchi per impostare gli elementi di base in un foglio di stile
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:
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.
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:
Siamo pronti per procedere con lo sviluppo del nostro CSS di base, il cui effetto è consultabile nell’esempio che accompagna l’articolo.
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.
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:
body{font: 100.01% Arial, Helvetica, sans-serif}
h1{font-size: 2.4em}
h2{font-size: 1.8em}
h3{font-size: 1.4em}
h4{font-size: 1.2em}
h5{font-size: 1em}
h6{font-size: 0.85em}
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.
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:
body{font: 100.01%/1.5 Arial, Helvetica, sans-serif}
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):
body{font: 100.01%/1.5 Arial, Helvetica, sans-serif}
h1, h2, h3, h4, h5, h6{line-height: 1.2}
L’alternativa è specificare il line-height solo per gli elementi principali della pagina, come ho fatto nell’esempio:
p, blockquote, pre, ol, dl, ul, form {line-height:1.5}
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:
/*stili sul body e tipografia */
body{font: 100.01% Arial, Helvetica, sans-serif}
h1{font-size: 2.4em}
h2{font-size: 1.8em}
h3{font-size: 1.4em}
h4{font-size: 1.2em}
h5{font-size: 1em}
h6{font-size: 0.85em}
/*line-height*/
p, blockquote, pre, ol, dl, ul, form {line-height:1.5}
/* set di base per margini e padding */
html, body{margin: 0;padding: 0}
h1, h2, h3, h4, h5, h6{margin: 0.7em 0 0.2em}
address, blockquote, dl, form,
fieldset, ol, table, p, pre, ul{
margin-top: 0.2em;margin-bottom: 1.2em}
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.
Se vuoi aggiornamenti su Creare un CSS di base inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Quando si parla di codice o di tecnologia, spesso ci si trova in un consesso maschile. Wolfgang Petersen di Intel […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Sebbene si tratti di tecnologie definite da Microsoft, C# ed il framework .NET sono in realtà indipendenti dal sistema operativo. Ecco come utilizzarle su Linux tramite Mono, implementazione open source e cross platform di .NET.
Sviluppo di uno script che, contestualmente alla digitazione dei caratteri, dà suggerimenti sui termini contenuti nella cache
Torniamo sull’argomento a due anni di distanza
L’ambiente di sviluppo di riferimento per sviluppare applicazioni su piattaforme Microsoft. Tutte le novità della nuova versione: dalle Web Form ai nuovi tool per i test