Archivio > Categoria: Design

La proprietà “display” nei CSS

Ultima modifica: Giovedì 12 Febbraio 2009, 01:44

I CSS sono uno strumento potente, poiché permettono un pieno controllo sugli elementi della pagina. Questa è una cosa che, più o meno, sappiamo tutti. Quello che non sappiamo è che i fogli di stile sono caratterizzati da una vasta gamma di proprietà e valori, alcune delle quali sono spesso poco conosciute.

Qualche giorno fa ho deciso di approfondire la questione, studiando cause ed effetti di tutti i valori possibili per la proprietà CSS display. Dopo alcuni giorni di lavoro (e di pausa), ho finalmente completato la pagina di analisi e verifica della proprietà display.

Il documento prende in esame ogni tipo di valore possibile. Vengono tralasciati i parametri block, inline e none, poiché largamente utilizzati. Premesso questo, il test analizza le altre nove possibilità.

Per ogni voce c’è una spiegazione (spesso tradotta da fonti esterne), seguita da una lista di browser compatibili e da un esempio dove è possibile vedere la proprietà in azione.

A piè di pagina ho inserito una lista di fonti dalle quali ho preso spunto man mano che procedevo col lavoro, che spero possa essere utile per chi ha intenzione di approfondire ulteriormente l’argomento.

Nota: La pagina è abbastanza datata e necessita di alcune correzioni. Spero di applicarle al più presto.

Vai alla pagina d’esperimento CSS: La proprietà display.

Discuti [1]. Pubblicato giovedì 01 giugno 2006 e archiviato in , .

L’arte della tipografia

Scegliere il giusto carattere, le giuste dimensioni, le giuste misure per il testo di una pagina web non è assolutamente facile: in gioco ci sono tanti parametri, portati dagli utenti che ci visitano, e tante regole da rispettare, per ottenere dei buoni risultati nel campo della leggibilità.

Abbiamo gli strumenti per ridare alla tipografia il suo vero ruolo all’interno della sfera del design.

Come specificato in un ottimo articolo sull’anatomia dei caratteri web, il foglio stampato ed il layout web non hanno nulla in comune, nemmeno la rappresentazione dei colori (additiva per i monitor, sottrattiva per il supporto cartaceo). Questo genera alcune differenze, specialmente per quello che riguarda la famiglia di caratteri da utilizzare.

La tipologia di caratteri Serif (cioè, con grazie) è quella maggiormente utilizzata nella stampa: ogni tratto termina con piccole linee ed eleganti decorazioni che accompagnano l’occhio nella lettura del testo (es. Times New Roman, Georgia, Garamond). Appartengono invece alla famiglia Sans Serif (senza grazie) tutti quei caratteri privi di questi fronzoli (es. Verdana, Arial, Helvetica).

Su foglio, l’impatto di quest’ultimi agli occhi del lettore non è certo dei migliori: lo scarso contrasto e la semplicità delle lettere rendono il testo decisamente monotono e noioso. Tuttavia, su un monitor, questi fattori non devono essere tenuti troppo in considerazione. Le dimensioni relativamente piccole adottate dagli sviluppatori e il sempre più frequente utilizzo della smussatura (detta anti-alias), fa sì che la famiglia Serif risulti scomoda per la lettura: tutte le linee e le curve poste sulle estremità di ogni lettera diventano puntini fastidiosi che possono rendere incomprensibili le parole o sfocare eccessivamente i testi (specialmente se l’effetto smussato è attivo).

A riguardo vi rimando ad un altro breve articolo sulla scelta della giusta famiglia di caratteri.

Una volta deciso il font da utilizzare, bisogna tener conto di alcuni importanti fattori essenziali per dare al testo una buona leggibilità: interlinea (line height), spazio fra le lettere e le parole (letter spacing e white space), allineamento (horizontal alignement), dimensioni del testo (font size), eccetera. E’ qua che entra in gioco, quindi, webtypography.net, un’interessante trascrizione online dell’omonimo libro di Robert Bringhurst dedicato alllo studio della tipografia, dove vengono illustrate tutte le proprietà CSS per realizzare testi piacevoli da leggere e le tecniche utili per focalizzare e mantenere l’attenzione sui contenuti.

Discuti [5]. Pubblicato martedì 16 maggio 2006 e archiviato in , .


Paginatura: