Credits

AutoreGiovanni Buffa

RevisoreRoberto Russo

Grazie aeflux Digital Studio

3

SOMMARIOABOUT ME 6

INTRODUZIONE 7A chi è rivolto 7Convenzioni 8

PREPARIAMO LO ZAINO 9

TESTO 12font-family 12font-size 15font-weight & font-style 17line-height 18font 19color 20text-align 21text-indent 22text-transform 23text-shadow 23letter-spacing 24word-spacing 24

SFONDI 25background-color 25background-image 25background-repeat 27background-position 28background-attachment 29background-size 30background 31

LINK 33

4

text-decoration 34

LISTE 36list-style-type 36list-style-image 37list-style-position 38list-style 38

BOX 39margin 40padding 41border 43border-radius 45width & height 45box-sizing 47box-shadow 48float 49clear 51display 53visibility 54overflow 55position 55z-index 58

PILLOLE DI UTILITÀ 59Commenti 59Puntatore 60SVG & Icon Web Fonts 60Pseudo elementi 62Selettori avanzati 65Viewport 68Gradienti 70Transizioni 71

CONCLUSIONI 73

5

APPENDICE 74Selettori 74

6

ABOUT ME

Esperto di Web Design & Development. Credo nella precisa ottimizzazione delle ar-chitetture e delle interfacce, perché risulta davvero efficace solo ciò che per l’Utente è pienamente accessibile.

Sono docente di progettazione e sviluppo web per conto di diversi enti di formazione professionale.

7

INTRODUZIONEIl titolo di questo piccolo manuale deriva essenzialmente dalla sua natura: non è un trattato, né tantomeno un testo completo ed esauriente. Tuttavia, il mio inten-to è quello di dare uno specchietto sul mondo dei CSS basato essenzialmente sulla mia personale esperienza.

In questo manuale troverai delle pillole e delle spiegazioni sulle maggiori carat-teristiche e proprietà dei CSS. Questo ti potrebbe essere utile in due casi. Se sei alle prime armi, ti potrebbe aiutare a comprendere meglio e con esempi pratici quali sono i passi da compiere per utilizzare e lavorare con CSS. Viceversa, se hai già qualche conoscenza di base, questo manuale ti potrebbe aiutare a ricordare alcune cose o ad affinarne delle altre.

Che tu faccia parte di una o dell’altra categoria, comunque, questo manuale vuo-le essere semplicemente un punto di inizio: starà a te, dopo, approfondire l’argo-mento.

Il termine “sopravvivenza”, invece, deriva dalla stessa natura dei CSS. Fondamen-talmente, essi di basano su di un linguaggio semplice e diretto, con poche com-plessità e poche regole di cui tenere conto. Allo stesso tempo, però, è un linguag-gio duro: impiegarlo nel migliore dei modi richiede molta esperienza e molto lavoro e, soprattutto, molto tempo. Tempo che, in molte occasioni e per molti progetti, manca. Di questo, comunque, parlerò meglio nel prossimo capitolo.

A chi è rivoltoQuesto manuale è rivolto essenzialmente a chi si affaccia per la prima volta al mondo dei CSS. Tuttavia, ci sono alcuni rimandi ad aspetti più complicati e com-plessi utili anche per chi “mastica” già questo linguaggio.

Esso è realizzato principalmente per chi frequenta un mio corso o seminario sull’argomento. Questo è l’intero percorso che di solito seguo durante le lezioni:

8

gli argomenti sono grossomodo quelli presenti in questo manuale.

ConvenzioniLa struttura del manuale non è sequenziale: puoi leggere tutto dall’inizio alla fine, oppure solo le parti che più ti interessano (puoi utilizzare il sommario per andare direttamente all’argomento che desideri affrontare). La suddivisione che ho deciso di applicare si basa su un raggruppamento delle varie proprietà dei CSS:

• Testo; le maggiori proprietà che riguardano la formattazione dei testi.

• Sfondi; l’utilizzo di colori e immagini da applicare come sfondo.

• Link; stili e impostazioni dei collegamenti ipertestuali.

• Liste; le proprietà che possono essere utilizzate con le liste.

• Box; tutto ciò che riguarda i contenitori, sia il classico <div> che i nuovi conte-nitori HTML5.

• Pillole di utilità; alcune proprietà particolari che ti potrebbero essere utili.

Nel manuale riscontrerai anche delle convenzioni tipografiche, utili a farti capire meglio l’ambito in cui stiamo operando rispetto a quel passaggio.

Del testo scritto in questo modo e con questo colore rappresenta del codice CSS.

Del testo, invece, scritto in questo modo e con questo colore verrà utilizzato per mettere in evidenza le parti in HTML.

Quando vedi un’icona come quella a sinistra, significa che ci sono degli esempi allegati: basta cliccarci sopra per visualizzare l’esempio online.

Infine, del testo riquadrato in questo modo è utilizzato per mettere in luce alcuni aspetti fondamentali e critici, o per rimandi ad approfondimenti.

9

PREPARIAMO LO ZAINOCAPITOLO 1

Prima di partire assieme per l’esplorazione di questo misterioso mondo, è bene preparasi al meglio. Ogni accorto esploratore, deve preparare il proprio zaino con le cose che gli serviranno per sopravvivere in un ambiente “ostile”.

Nel nostro caso, dobbiamo preparaci al meglio con alcuni piccoli concetti di base riguardanti HTML e CSS.

Non farò una disamina completa sull’HTML: se stai leggendo questo manuale, do per scontato che tu sappia cosa sia e come utilizzarlo al meglio!

Anzitutto, vediamo come è possibile utilizzare CSS all’interno di un documento HTML. Essenzialmente esistono 3 modalità. Te le elenco in ordine di importanza e di esecuzione:

• stili inline; gli stili vengono applicati direttamente sul tag HTML con l’attributo style=″″

<div style=″color:red; background:#000;″></div>

• stili in <head>; gli stili vengono inseriti all’interno del tag <head> con il tag <style>

<style> div{ color:red; background:#000; }</style>

• stili esterni; gli stili vengono scritti in un file esterno (con estensione .css) e vengono allegati in <head> con il tag <link>

10

<link rel=″stylesheet″ href=″css/style.css″ />

Come scritto poco fa, l’ordine non è casuale! Difatti, queste tre modalità te le ho riportate in modo da farti capire le priorità di esecuzione e applicazione: inline > <style> > <link>.

Assieme alle priorità di esecuzione di CSS, ti ricordo anche la proprietà fonda-mentale di questo linguaggio: la cascata. Il principale vantaggio di CSS è che puoi ridefinire uno stile, se questo stile è conseguente a quanto definito prima.

.red{ color: red;}

.red{ color: #ff0000;}

In questo piccolo esempio il colore reale finale che verrà applicato all’elemento di classe .red sarà il magenta, ossia la seconda definizione. Per capire meglio questo, devi anche tenere conto di un altro fattore: le catene. Più concatenazioni farai per applicare degli stili e maggiore punteggio quella data catena avrà. Non solo, anche gli elementi che utilizzi per formare una catena variano il suo pun-teggio, essi sono: #id > .class > tag. Ad esempio:

h2{}

#column h2{}

Utilizzare degli stili inline fa sì che questi stili non possano in nessun modo essere modificati o sovrascritti da un altro stile. In linea generale, gli stili inline non andrebbero mai utilizzati, se non con l’ausilio di JavaScript per modificare “on the fly” l’aspetto e il comportamento di un elemento.

11

La seconda definizione sovrascriverà la prima, ovviamente solo nel caso ci siano degli <h2> all’interno di #column. Tuttavia, fai attenzione a questo, perché è un aspetto molto importante nel lavorare con i CSS: più lunghe saranno le tue catene e più difficoltà avrai nel poterle modificare. Inoltre, stai attento anche all’uso de-gli #id. Avendo un punteggio molto alto, sarà molto complicato andare a sovra-scrivere uno stile come quello soprastante. Gli #id dovrebbero essere usati per stili specifici o congiuntamente all’utilizzo di JavaScript.Infine attenzione anche alle lunghezze. Una catena di questo tipo:

body.article #comments .comment .comment-name{}

oltre ad essere complicata da capire e da leggere, fa aumentare enormemente il peso del tuo CSS. Nella stragrande maggioranza dei casi, catene di questo tipo possono essere semplicemente ridotte in:

.comment .comment-name{}

o, addirittura, in:

.comment-name{}

Come ultima cosa, ricorda la distinzione fondamentale tra i due tipi di elementi: block e inline. I tipi block hanno sempre larghezza 100%, ossia occupano l’in-tera larghezza messa a disposizione dal proprio genitore. Gli elementi inline, invece, occupano tanto spazio, quanto occupa il loro contenuto. Come vedremo, esistono anche altre tipologie di elementi, ma per il momento è bene che tu abbia a mente e sappia riconoscere questi due.

Ora che abbiamo tutte le attrezzature necessarie e fondamentali, possiamo in-camminarci verso la nostra meta. Gambe in spalla, che la strada è lunga!

Questo dipende molto da te: scegli in modo saggio come chiamare i tuoi elementi e basati solo in parte sul contesto in cui si trovano. Nell’esempio soprastante, quante varianti di commenti pensi che utilizzerai nel tuo sito? Penso una sola… per cui, ha veramente senso una catena lunga?

12

TESTOCAPITOLO 2

La prima realtà con cui avrai a che fare in un documento HTML è il testo: format-tare e decorare il testo è stato il primo compito dei CSS. Di fatto, è possibile modi-ficare la famiglia del testo da utilizzare, oppure il suo colore, con delle semplici direttive nel tuo foglio di stile.

font-familyLa prima manipolazione che puoi fare con i CSS sul testo riguarda il font, ossia il suo carattere. Attenzione però: non puoi usare qualsivoglia carattere (per ora), in quanto non tutti i sistemi operativi possono avere il font che vuoi utilizzare. Ecco, quindi, che sono stati creati dei gruppi di font utilizzabili, i cosiddetti Web Safe Fonts, di cui si ha la quasi certezza, perché disponibili nella grande maggioranza dei sistemi operativi recenti e obsoleti. Te li elenco qui sotto, divisi per tipologia, ossia Serif (con grazie), Sans-Serif (senza grazie) e Monospace (ovvero dotati di larghezza di carattere uguale per tutte le lettere).

SerifGeorgia, serif″Palatino Linotype″, ″Book Antiqua″, Palatino, serif″Times New Roman″, Times, serif

Sans-SerifArial, Helvetica, sans-serif″Arial Black″, Gadget, sans-serif″Comic Sans MS″1, cursive, sans-serifImpact, Charcoal, sans-serif″Lucida Sans Unicode″, ″Lucida Grande″, sans-serifTahoma, Geneva, sans-serif″Trebuchet MS″, Helvetica, sans-serif

1 Lo sappiamo che molti ce l’hanno con lui, povera creatura, ma non è colpa sua, è che l’hanno disegnato così!

13

Verdana, Geneva, sans-serif

Monospace″Courier New″, Courier, monospace″Lucida Console″, Monaco, monospace

Nella lista soprastante puoi notare subito una cosa: sono dichiarati più font per ogni riga. Questo è un accorgimento utile e saggio da osservare ogni volta an-drai a cambiare il carattere alle pagine HTML. L’idea è che, se il primo font non è installato sul computer che sta visualizzando la pagina HTML, allora verrà proposto il secondo. Se anche il secondo non fosse disponibile, allora si passerà a quello successivo; e avanti così, fintantoché non verrà trovato il carattere corri-spondente alla dichiarazione. Nello sfortunatissimo caso in cui il computer non abbia nessuno dei caratteri da te inseriti (probabilmente, quindi, è un computer del giurassico e, a questo punto, non disporre del carattere è l’ultimo dei suoi problemi!), allora grazie all’ultima scelta (serif, sans-serif o monospace), gli indicherai di prendere il primo carattere disponibile appartenente alla relativa famiglia.

Fin qui abbiamo visto la teoria, ma come lo cambiamo effettivamente il carattere alle nostre pagine? Semplice:

p{ font-family: Arial, Helvetica, sans-serif;}

Avrai sicuramente notato anche un’altra cosa esaminando la lista dei font sicuri: alcuni fra di essi presentano dei doppi apici, come ad esempio ″Arial Black″ o ″Trebuchet MS″. I doppi apici (ma possono anche essere singoli) devono essere sempre impiegati quando il nome del carattere è composto da più parole.

Il nome del font è case sensitive: ″Lucida Sans Unicode″ scritto come ″Lucida sans UNICODE″ non produrrebbe alcun risultato.

14

Ma se vuoi utilizzare un carattere di tua scelta, diverso da quelli Web Safe? È pos-sibile? Certo, grazie a CSS3!

Grazie alla direttiva @font-face, è possibile utilizzare un proprio font e ren-derlo disponibile per le tue pagine HTML. Quando un utente visualizzerà la tua pagina, scaricherà e abiliterà temporaneamente quel carattere. In questo modo, potrai così rendere ancor più personale il tuo sito con il carattere che più ti ag-grada!

Tuttavia, il procedimento non è così semplice e immediato rispetto a quanto visto prima per i font Web Safe. La conversione, infatti, del carattere deve essere fatta da un software apposito e, inoltre, devi verificare che il carattere che vuoi utiliz-zare abbia la licenza per essere impiegato sul web. Infine, valuta anche il fatto che il carattere andrà a pesare molto sul caricamento delle pagine2. Tuttavia, per iniziare a “giocare” con i caratteri, ti posso consigliare una visita a Font Squir-rel, sito specializzato dove potrai trovare molti font gratuiti, diversi dei quali già convertiti per essere utilizzati sul web. Ti basterà scaricarli e allegare il CSS che troverai nell’archivio, utilizzando il nome assegnato. Ad esempio, il font Aaargh presenta al suo interno questo CSS.

@font-face { font-family: ′aaarghnormal′; src: url(′Aaargh-webfont.eot′); src: url(′Aaargh-webfont.eot?#iefix′) format(′embedded-ope-ntype′), url(′Aaargh-webfont.woff′) format(′woff′), url(′Aaargh-webfont.ttf′) format(′truetype′), url(′Aaargh-webfont.svg#aaarghnormal′) format(′svg′); font-weight: normal; font-style: normal;}

Puoi leggerlo molto semplicemente in questo modo. Innanzitutto, nella prima riga noterai la direttiva @font-face. Questo significa che tutto ciò che sta al suo

2 In questi casi è utile valutare molti aspetti inerenti alla velocità e alle performance del tuo sito, come ad esempio il caricamento dei font in modo asincrono.

15

interno è una definizione per un nuovo carattere. Per questo motivo, il font-fa-mily utilizzato qui è necessario per definire il nome del carattere. Successiva-mente noterai alcuni src (source): sono i collegamenti ai rispettivi font che tro-verai all’interno della cartella scaricata. Perché ce ne sono molti? Semplice: ogni browser legge un’estensione diversa! Ad esempio, Google Chrome legge i .woff e non sa per nulla cos’è un .ttf. Viceversa, un dispositivo mobile potrebbe leggere un file .svg, e non prendere in cosiderazione i restanti formati.

Una volta allegato questo file CSS, nella definizione del carattere del tuo foglio di stile ti basterà inserire questo:

p{ font-family: ′aaarghnormal′, Arial, Helvetica, sans-serif;}

font-sizeCosì come puoi modificare la famiglia di caratteri, puoi anche modificarne la dimensione.

p{ font-family: Arial, Helvetica, sans-serif; font-size: 1.1em;}

Cosa? em? Cos’è em?Nulla di allarmante!em è una unità di misura utilizzabile sul Web, e sta ad indicare una misura relati-

Valuta bene se utilizzare tutti i formati di font o meno. Su http://caniuse.com/#search=woff puoi vedere come il formato .woff sia correttamente letto dai browser più recenti. Potresti, quindi, utilizzarlo esclusivamente tralasciando tutti gli altri formati.

16

va. Prima di spiegartelo per bene, vediamo quali sono le unità di misura che puoi utilizzare:

• px; l’unità di misura più vecchia e utilizzabile anche in qualsiasi altro contesto di programmazione che preveda la necessità di definire una dimensione;

• %; la grandezza in percentuale, un’ottima definizione di misura, tuttavia essa va usata con una certa cognizione e con un po’ di allenamento… non sempre è sem-plice da impiegare;

• em; un’altra grandezza relativa, come la percentuale, ma essa si basa sulla lar-ghezza della lettere m del carattere in uso (per questo motivo è relativa);

• vw e vh; rappresentano altre grandezze relative, definite da CSS33, si riferiscono questa volta alla grandezza del viewport (di cui parleremo brevemente nel capi-tolo 7 “Pillole di utilità” a pagina 68) e sono delle unità corrispondenti ad 1/100 della larghezza (o altezza) del viewport;

• rem4; evoluzione “spirituale” di em (la sigla sta’ per root em), con l’unica diffe-renza che l’unità base di grandezza non viene presa dal genitore dell’elemento a cui viene applicato, ma dall’elemento root, ossia da <html>.

Come vedi dalla lista soprastante, ci sono due tipologie di misure: fisse e relati-ve… con una leggera predisposizione a quelle relative! Perché questo? Perché le misure relative degradano meglio sulle diverse possibili dimensioni degli scher-mi.Ti faccio un esempio. Poniamo il caso che tu voglia utilizzare, come da imposta-zione grafica del tuo art director, la dimensione del carattere a 13 pixel. Se il tuo target è solo il desktop non avrai grossissimi problemi ad utilizzare i pixel come riferimento. Anche se, a ben pensarci, se qualcuno volesse stampare la tua pagi-na, 13px potrebbero essere un po’ troppo piccoli!5

Tuttavia, quei 13px visualizzati attraverso uno smartphone risulterebbero picco-lissimi… figurati, poi, su dispositivi dotati di schermi ad alta definizione (HiDPI

3 Attenzione che molti browser moderni non supportano ancora queste unità di misura, o sono supportate parzialmente: http://caniuse.com/#search=vh4 In questo caso il supporto è migliore rispetto a vw/vh, tuttavia se ritieni ancora necessario prendere in considerazione Internet Explorer 8 ricordati che non è supportato: http://caniuse.com/#search=rem5 In realtà esistono i CSS fatti apposta per la stampa, nel caso ti stessi chiedendo come risol-vere una tale necessità.

17

e Retina)! Ecco allora che utilizzare una dimensione relativa rende le cose più semplici: 1.1em, o 110% si visualizzeranno in modo eccellente su tutte le configu-razione prese ad esempio (eh sì, anche nella stampa!), in quanto la dimensione non è definita una volta per tutte, ma essa è dipendente dal contesto di visualiz-zazione.

L’accorgimento che ti posso suggerire (e che io utilizzo sempre) è quello di impo-stare una dimensione realtiva a <body> o a <html> (ad esempio in %), a rappre-sentare la dimensione minima del carattere. Ad esempio, un 85% su <body>, lo puoi tradurre in — circa — 13px. Quando poi voglio variare la dimensione, ad esempio di un titolo o di un paragrafo, utilizzo em (in questo esempio, 1em = 85% = 13px), per cui, 1.1em sarebbero circa 14px.

body{font-size: 85%;}

h1{font-size: 3em;}

p.highlight{font-size: 1.2em;}

In questo modo sarai sempre sicuro che la dimensione dell’elemento è relativa al dispositivo e al monitor su cui viene visualizzato e che quindi, nella maggioranza dei casi, non sarà necessario ritoccare o modificare la dimensione del carattere per un dato dispositivo.

font-weight & font-styleAbbiamo visto fin qui il carattere e la sua dimensione, che cosa può mancare ora? Certo, grassetto e corsivo.Grazie a font-weight possiamo impostare il grassetto al nostro carattere o a tag specifici (come succede normalmente con il tag <strong>).

p{ font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-weight: bold;

18

}

font-weight presenta la possibilità di definire se il carattere sia grassetto o meno (bold o normal6) o di definire una dimensione di grassetto più o meno carico con una scala che va da 100 a 900, dove 400 — solitamente — rappresenta il normal e 700 rappresenta il bold7.

Puoi anche definire se il carattere dovrà essere corsivo o meno (il tag di default per il corsivo è <em>).

p{ font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-weight: bold; font-style: italic;}

line-heightCosa manca, ancora, al nostro carattere? Un’interlinea definita: grazie a li-ne-height puoi variare l’interlinea tra le righe dei testi.

p{ font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-weight: bold; font-style: italic;

6 Esistono anche bolder e lighter, che rispettivamente “ingrassano” più di bold e “snelli-scono” più di bold. Attenzione però che questo dipende anche dal carattere in uso.7 Anche qui, dipende dal carattere in uso.

line-height può essere applicato a qualsiasi tag, tuttavia, attenzione, il risultato potrebbe variare molto tra un <div> e un <p>!

19

line-height: 1.5;}

Fermi tutti! 1.5 cosa? No, non è uno sbaglio: per l’interlinea — e solo per l’inter-linea — può non essere definita un’unità di misura. Ma nel caso tu volessi impo-starla, puoi sempre usare px, % o em.Proviamo a capire meglio. Prova ad aprire Microsoft Word o un qualsiasi Word Processor: tra le impostazioni di interlinea, molto probabilmente, noterai le dici-ture 1.0, 1.5, 2.0. Come vedi, anche in questo caso, non viene indicata una precisa unità di misura. Questo significa che esiste la definizione di quanto è 1: impostan-do 1.5, significa 1 volta e mezza l’unita indicata come base.8

fontTutte le proprietà del carattere fin qui viste possono essere ridotte nella short definition font (ossia in una definizione unica che contiene tutte le proprietà di quest’ultimo)

p{ font: italic bold 1.1em/1.5 Arial, Helvetica, sans-serif;}

Non è necessario definire tutte le proprietà in font, tuttavia devi almeno definir-ne la dimensione e la famiglia.

p{ font: 1.1em Arial, Helvetica, sans-serif;}

Tutte le proprietà di font devono, infine, mantenere quest’ordine: font-style font-weight font-size/line-height font-family

8 Nel corso degli anni, ho capito che è meglio non impostare un’unità di misura: in alcuni casi l’aver impostato em o px produceva, infatti, “strane” cose.

20

colorPuoi colorare il tuo carattere come meglio ti aggrada. Prima di vedere la direttiva CSS, tuttavia, mi soffermerò ora sulle varie scale che puoi utilizzare: Così come hai diverse dimensioni per i caratteri, hai anche diverse scale colorimetriche da poter utilizzare.

RGB esadecimaleDi solito quella più utilizzata, presenta la definizione dei 3 canali sotto forma di coppie di valori esadecimali, preceduti dal simbolo #; ad esempio, #000000.

RGBCon rgb() puoi definire la quantità di colore per ogni singolo canale, da 0 a 255; ad esempio, rgb(0,0,0).

RGBAAnalogo a rgb(), con l’eccezione che puoi definire anche il grado di opacità del colore (canale alpha), da 1 a 0; ad esempio, rgba(0,0,0,.5)9.

HSLIn hsl() puoi definire il colore secondo la sua intensità, luminosità e saturazio-ne, con valori da 0 a 100%; ad esempio, hsl(0,0,0).

HSLAAnalogo a hsl(), con l’eccezione che puoi definire anche il grado di opacità del colore (canale alpha), da 1 a 0; ad esempio, hsla(0,0,0,.5).10

Nome coloreAd alcuni colori è stato assegnato un nome universalmente riconosciuto da tutti i browser; ad esempio, Black.11

Come si evince da quanto riportato sopra, per questioni di praticità, la più utiliz-

9 rgba() non è però supportato da tutti i browser: http://caniuse.com/#search=colors10 hsl() e hsla() non sono, però, supportati da tutti i browser: http://caniuse.com/#sear-ch=colors11 Per una lista completa dei nomi dei colori visita http://www.w3schools.com/cssref/css_co-lornames.asp

21

zata è l’esadecimale: vuoi perché è più semplice ricordare 6 valori (piuttosto che il livello di colore in rgb o il nome del colore), vuoi perché i vari tool grafici, come ad esempio Adobe Photoshop, ti danno anche quel codice, facilmente copia-incol-labile direttamente nel tuo codice CSS.La sintassi del colore è, dunque:

strong{ color: #FF0000;}

text-alignÈ possibile allineare il testo secondo i classici formati che sarai senz’altro abitua-to ad usare nei Word Processor: bandiera a sinistra (left), bandiera a destra (right), epitaffio (center) e giustificato (justify).

Per quanto riguarda il giustificato, ricorda che i browser non sono dei software di impaginazione tipografica. Per cui, non c’è la possibilità di spezzare le parole per ottenere gli a capo, rendendo quindi il testo più leggibile. Si formano così delle antiestetiche spaziature fra le parole perché il testo viene “forzato”. Esistono le proprietà di CSS word-break e word-wrap, tuttavia, in questo caso, non viene usato il classico simbolo ′-' per vi-sualizzare la parola spezzata e mandata a capo, rendendo di fatto la lettura molto più complessa, e l’utilizzo della nuova proprietà hypens è ancora troppo limitata. Non solo: in linea generale, il testo giustificato su un moni-

Il codice del colore non è case sensitive; ciò significa che se lo scrivi in ma-iuscolo o in minuscolo non fa’ differenza. Inoltre, se (e solo se!) il codice del colore prevede 6 caratteri uguali — ad esempio #000000 — allora esso può essere ridotto a 3 caratteri per praticità. Per cui, nell’esempio di prima, potrebbe essere scritto #000.

22

p{ text-align: right;}

text-indentOltre all’allineamento, puoi anche indentare il testo di una pagina HTML. L’in-dentazione può essere positiva o negativa e le unità di misura che puoi utilizzare sono sempre le solite: px, % e em.

p.indentend{ text-indent: 100px;}

p.hidden{ text-indent: -100%;}

Perché può essere utile indentare il testo negativamente? Beh, hai mai sentito parlare della vecchia tecnica CSS Image Replacement? Se non ne hai mai sentito parlare, significa che sei troppo giovane (beato te!). Questa tecnica veniva usata verso la fine degli anni ’90 e fino agli inizi degli anni 2000. Essa si basava sull’u-tilizzo di immagini da sostituire al testo. Nel 99,99% dei casi per utilizzare (in modo farlocco!) dei font diversi per titoli e menu.L’idea era questa: nell’HTML si inseriva il testo come doveva essere, mettiamo il caso di un titolo, ad esempio “Chi siamo”. In questo modo — non usando un’im-magine — quel testo risultava indicizzabile senza problemi dai motori di ricerca. Quindi, per personalizzare il titolo, si impostava lo sfondo con l’immagine del testo e il testo reale lo si faceva scomparire con una indentazione negativa.Per tua fortuna oggi abbiamo @font-face!

tor è parecchio difficile da leggere, per cui attenzione!

23

text-transformL’ultima possibilità che più spesso userai sul testo è la trasformazione. Puoi cam-biare la capitalizzazione del testo in diversi modi:

• capitalize; trasforma le prime lettere di ogni parola in maiuscolo;

• uppercase; trasforma tutti i caratteri in maiuscolo;

• lowercase; trasforma tutti i caratteri in minuscolo;

• none; nessuna capitalizzazione, riporta il testo come in originale.

A cosa serve tutto questo? Personalmente, tutti i testi che inserisco nell’HTML li lascio sempre “naturali”, anche se quel dato titolo deve essere poi riportato tut-to in maiuscolo. Questo perché si tratta di testo che andrà indicizzato: a me non piace il testo tutto maiuscolo (nella netiquette, il maiuscolo equivale a gridare) e preferisco, quindi, di gran lunga modificarlo da CSS, lasciando così ai motori di ricerca l’indicizzazione del testo così com’è!

.title{ text-transform: uppercase;}

text-shadowAggiunta con CSS3, text-shadow ti permette di definire un’ombreggiatura al tuo testo12. La proprietà si compone di molte parti.

x-shadowLa posizione dell’ombra rispetto all’asse X, essa può essere anche negativa.

y-shadowLa posizione dell’ombra rispetto all’asse Y, essa può essere anche negativa.

12 Attenzione che text-shadow è supportato solo dai browser più moderni: http://caniuse.com/#search=text-shadow

24

blurla distanza della sfocatura.

colorIl colore dell’ombra.

p{ text-shadow: 2px 2px 4px #ff0000;}

In questo modo, otterrai un paragrafo che avrà l’ombra color magenta spostata verso sinistra e verso il basso di 2px e con 4px di sfocatura.Solo i valori x-shadow e y-shadow sono richiesti: gli altri valori sono opzionali.

letter-spacingQualora ti servisse, puoi anche impostare una spaziatura tra le lettere all’interno di un testo. La spaziatura può essere sia positiva che negativa, tuttavia puoi utiliz-zare solo px come unità di misura.

h1{ letter-spacing: 1px;}

word-spacingAnalogamente alle lettere, puoi impostare una spaziatura tra le parole all’interno di un testo, sia in positivo, che in negativo. Diversamente da letter-spacing, puoi utilizzare anche em, % però no!

h5{ word-spacing: 15px;}

25

SFONDICAPITOLO 3

Come ti accennavo nel capitolo precedente in merito alla (vecchia) tecnica CSS Image Replacement, puoi impostare degli sfondi a qualsiasi tag HTML. Poni solo attenzione sulla tipologia di elementi. Sui block non hai grosse limitazione e pro-blemi, sui tipi inline, invece, c’è sempre qualche accortezza in più da osservare, in quanto non è definita (e definibile) la loro dimensione.

background-colorLa prima cosa che puoi cambiare di uno sfondo è il suo colore. Di default ogni elemento è trasparente. Le tipologie di colore che puoi utilizzare sono quelle che abbiamo già visto per i colori del testo.

.alert{ background-color: #f23b36;}

.success{ background-color: green;}

background-imageOltre al colore, puoi inserire anche un’immagine di sfondo. Per quanto riguarda le immagini, devi tenere in considerazione anzitutto il loro formato e quindi la loro estensione. Usa .jpg solo se l’immagine ha tanti colori o è molto grande,

Usa in modo saggio i colori di sfondo: uno sfondo giallo canarino e dei testi bianchi farebbero “sanguinare” qualsiasi occhio!

26

mentre usa .png se l’immagine deve avere una trasparenza con una resa fo-tografica. Infine, usa .gif se hai un’icona o un’immagine che deve avere una trasparenza, ma che ha pochi colori (in una .gif puoi usare al massimo 256 co-lori)1. Infine, ricordati che con i browser più moderni puoi utilizzare anche .svg (Scalable Vector Graphic), di cui vedremo qualcosa in più nel capitolo 7 “Pillole di utilità” a pagina 60.Un’ulteriore fattore di cui devi tener conto è il peso: devi ridurre e ottimizzare il più possibile un’immagine. Ricordati che più è leggera l’immagine, più rapida-mente verrà scaricata dal browser e, quindi, più velocemente verrà visualizzata2. Purtroppo Adobe Photoshop non basta! L’opzione “Esporta per il web”, presente in tutte le versioni più recenti del noto programma di grafica, da sola non basta. Spesso è necessario utilizzare altri programmi per abbattere ulteriormente i pesi e rendere le tue immagini ancora più leggere.

La sintassi per utilizzare un’immagine come sfondo è la seguente.

div{ background-image: url(images/my_image.png);}

1 E ti prego, non usare per nessuna ragione al mondo .bmp sul Web!2 La velocità di visualizzazione di un sito internet offre una delle maggiori possibilità di un ottenere ranking elevato da parte di Google.

Ricorda, ovviamente, di modificare il percorso dell’immagine secondo la tua gestione e organizzazione del progetto. E ricorda anche che le imma-gini e i file allegati ad un CSS si riferiscono sempre alla posizione del CSS — non alla posizione della pagina HTML — rispetto alla risorsa linkata.

Ultimamente, sono stati creati e rilasciati molti tool e programmi per la compressione e l’ottimizzazione delle immagini. Da questa lista http://perf-tooling.today/tools?q=compression puoi avere una rapida panoramica dei programmi che ti possono essere utili per ottimizzare le tue immagini.

27

Per richiamare immagini, inoltre, puoi utilizzare anche indirizzi assoluti.

div{ background-image: url(http://www.mysite.it/images/my_image.png);}

background-repeatSe hai provato ad impostare un’immagine di sfondo, molto probabilmente ti sarai accorto che essa viene ripetuta per tutta la lunghezza e altezza dell’elemento a cui viene applicata. Questa è una cosa del tutto normale, ed è il funzionamento predefinito di tutti i browser.Logicamente, puoi modificare questo comportamento con la proprietà back-ground-repeat, le cui possibilità sono:

• repeat; impostazione predefinita, ripete lo sfondo in orizzontale e verticale;

• repeat-x; ripete lo sfondo solo in orizzontale;

• repeat-y; ripete lo sfondo solo in verticale;

• no-repeat; non ripete lo sfondo ed inserisce l’immagine solo una volta.

Prendendo l’esempio precedente, se tu volessi inserire l’immagine solo una volta, dovresti scrivere:

div{ background-image: url(images/my_image.png); background-repeat: no-repeat;

Questo significa che, nell’esempio riportato più sopra, il CSS sta allo stesso livello di una cartella chiamata images, al cui interno ci sarà un’immagine .png dal nome my_image. Tutto questo, indipendentemente dal fatto che l’HTML al quale è legato questo CSS si trovi 20 cartelle sopra!

28

}

Questo farebbe inserire l’immagine una sola volta e allineata nel punto di origine predefinito di qualsiasi elemento, ossia in alto a sinistra.Ricorda, infine, che puoi anche specificare un background-color, che verrà ap-plicato solo nel caso ci sia spazio vuoto, esterno all’ingombro dell’immagine.

div{ background-image: url(images/my_image.png); background-color: #ff0000; background-repeat: no-repeat;}

background-positionCome cambiare, quindi, la posizione dell’immagine di sfondo? Grazie alla pro-prietà background-position.

La proprietà si compone di due valori: il primo è per l’asse X (ossia in orizzonta-le), mentre il secondo è per l’asse Y (ossia in verticale). La separazione di questi valori avviene tramite uno spazio.I valori che puoi usare possono essere:

Coppie di valori predefinitePuoi impostare lo sfondo secondo i valori predefiniti: top, right, bottom, left e center. Se usi questo metodo, puoi impostare anche un solo valore; il secondo sarà sempre center.

PercentualeLe percentuali si riferiscono alla dimensione dell’elemento. L’angolo in alto a sinistra è 0% 0%, mentre l’angolo in basso a destra è 100% 100%. Anche qui, se imposti solo un valore, il secondo prenderà automaticamente 50%.

Posizione definitaPuoi impostare lo sfondo secondo una posizione ben definita in pixel. Anche in

29

questo caso, se definisci solo un valore, il secondo sarà 50% o center.

div{ background-image: url(images/my_image.png); background-color: #ff0000; background-repeat: no-repeat; background-position: top center;}

Come hai visto nell’ultimo punto, la definizione della posizione può essere fatta anche con scale diverse. Ad esempio, potresti scrivere:

div{ background-position: 10px bottom;}

div{ background-position: left 20%;}

background-attachmentUn ulteriore impostazione che puoi attribuire alla tua immagine di sfondo, è quella riferita allo scorrere della pagina. Ad esempio, se imposti un’immagine di sfondo per <body>, come si comporterà questa immagine allo scorrimento della pagina? Qui hai due possibilità:

• scroll; impostazione predefinita, l’immagine segue lo scorrere della pagina;

• fixed; l’immagine resta sempre fissa, indipendentemente dallo scorrimento della pagina.

div{ background-image: url(images/my_image.png); background-color: #ff0000; background-repeat: no-repeat;

30

background-position: top center; background-attachment: fixed;}

background-sizeUna novità dei CSS3 è la possibilità di ridimensionare un’immagine applicata allo sfondo.

I valori che puoi attribuire a background-size possono essere delle dimensioni fisse (nel qual caso devi usare delle coppie, proprio come background-posi-tion, e le unità di misura sono sempre le solite), oppure dei valori particolari che ti elenco qui sotto:

• contain; permette di ridimensionare l’immagine in proporzione e di occupare il maggiore dei due spazi (altezza o larghezza) dati dal contenitore.

• cover; scala l’immagine in modo da essere più grande possibile. In questo modo l’intera superficie dell’elemento avrà lo sfondo. Questo significa che alcune parti dell’immagine (quelle eccedenti) verranno tagliate3.

div{ background-image: url(images/my_image.png); background-size: 30px 30px;}

div{

3 contain e cover sono concetti più semplice a vedersi che a spiegarsi: guarda questo esempio e tutto ti sarà più chiaro! Attenzione che entrambi funzionano solo su browser moderni http://caniuse.com/#search=background-size

Non caricare foto più grandi se l’effettiva dimensione che devi utilizzare è più piccola. Questo ti fa caricare dei dati che effettivamente non servono e che, quindi, rallentano solo il caricamento della tua pagina.

31

background-image: url(images/my_image.png); background-size: cover;}

backgroundTutte le proprietà dello sfondo fin qui viste possono essere ridotte nella short definition background:

div{ background: url(images/my_image.png) top center no-repeat fixed #ff0000;}

Diversamente da font, i valori della proprietà background non hanno un ordine prestabilito e, inoltre, non c’è un numero minimo da definire.

Infine, ricordati che grazie ai CSS3 puoi definire in un’unica volta più immagi-ni di sfondo da poter utilizzare. Questa possibilità è molto utile per evitare di aggiungere contenitori nel tuo HTML per impostare più sfondi4. La sintassi è la seguente:

div{ background-image: url(images/first_image.png), url(images/se-cond_image.png), url(images/third_image.png); background-color: #ff0000; background-repeat: no-repeat; background-position: top center, top right, bottom left;}

Logicamente puoi usarla anche sulla short definition, basta che separi i vari background e i posizionamenti o le ripetizioni con una virgola.

4 La possibilità di inserire più sfondi funziona solo sui browser moderni http://caniuse.com/#search=multiple%20background

32

div{ background: url(images/first_image.png), url(images/second_image.png), url(images/third_image.png) top center, top right, bottom lef no-repeat fixed #ff0000;}

33

LINKCAPITOLO 4

I link, assieme ai form, naturalmente, rappresentano la vera forma di interatti-vità che una pagina HTML ti può offrire. Ai link puoi applicare tutti gli stili visti finora, con un’aggiunta: i link presentano anche degli stati.Quando porti il puntatore sopra ad un link, oltre al cambio di icona, potresti notare un qualche altro cambiamento (ad esempio di colore). Oppure, poni atten-zione ad una pagina HTML senza nessuno stile applicato, al cui interno ci siano dei link. Forse qualcuno fra questi lo vedi in viola, piuttosto che in blu, questo succede perché quelli viola li hai già visitati.

Questi stati prendono il nome di pseudo classi (perché non sono delle classi vere e proprie) e vanno definiti con il simbolo dei due punti prima del nome. Vedia-moli nel dettaglio:

• :link; un normale link, non ancora visitato. Solitamente è raro vederlo in qual-che foglio di stile perché equivale, più o meno, ad applicare lo stile direttamente ad <a> (anch’io credo di averlo usato solo un paio di volte!).

• :hover; questo stato avviene quando poniamo il puntatore del mouse sopra ad un link. A differenza di :link, è molto utilizzato, in quanto possiamo variare lo stile del link in tutti i modi possibili. Ricorda solo una cosa: sui dispositivi mobile l’hover sui link non esiste, in quanto non hai un puntatore ma le tue dita! Que-sto significa che, con molta probabilità, questo effetto non verrà visualizzato su dispositivi touch1.

• :focus; simile a :hover, con l’eccezione che l’evento viene richiamato quando si seleziona un link con il tasto “Tabulazione” della tastiera. Questo stato è bene impostarlo sempre, ed è bene che esso sia anche uguale a :hover2.

• :visited; questo stato viene applicato se un link è già stato visitato da parte dell’utente. Anche questo, così come :link, è molto raro vederlo in qualche CSS, anche se buone norme di usabilità dovrebbero indurlo ad utilizzarlo, in quanto potrebbe essere utile per l’utente capire quali pagine ha già visitato.1 Puoi farlo visualizzare solo in due modi: impostando un evento JavaScript per l’hover, oppure impostando una transizione di stato al link.2 Non hai idea di quante persone utilizzino questo metodo per navigare, oltre a chi ha pro-blemi motori e non può utilizzare il mouse.

34

• :active; l’ultimo stato viene richiamato dopo aver fatto clic su un link. Questo, purtroppo, viene visualizzato per un tempo veramente ridotto, ecco perché è an-cora più raro da vedere rispetto a tutti gli altri3.

Un ultimo suggerimento. Ricordati che le pseudo classi si applicano solo ai link, con l’unica eccezione di :hover: questo stato può essere di fatto applicato a qual-siasi elemento!

div:hover{}

text-decorationAnche se questa proprietà farebbe parte dei testi, ho preferito inserirla nella parte dei link, in quanto ha più senso logico. Tutti noi, difatti, siamo abituati a vedere una decorazione sui testi: la sottolineatura dei link. Proprio questa sottoli-neatura è un possibile valore di text-decoration. Vediamone altri:

• underline; sottolineato;

• overline; sopra-lineato;

• line-through; barrato;3 A discapito del nome, non significa che puoi rendere attivo un link se sei all’interno della pagina con quel link!

Se vuoi utilizzare le pseudo classi, ricorda che esse devono essere definite secondo un’ordine particolare, altrimenti qualche stato potrebbe non venir applicato in quanto risulterebbe sovrascritto (per la legge della cascata nei CSS). L’ordine da seguire, è, quindi, il seguente:

a:link{}a:visited{}a:hover,a:focus{}a:active{}

35

• none; nessuna decorazione.

Ad esempio:

a:link{ text-decoration: none;}

a:hover,a:focus{ text-decoration: underline;}

Fino ad un decennio fa esisteva anche un’altra proprietà: blink. Ti lascio immaginare quale fosse la sua caratteristica… Fortunatamente, non viene più presa in considerazione dai browser (e ti prego anche di non usarla).

36

LISTECAPITOLO 5

Arriviamo alla parte di cui tutti i developer (e anche i grafici!) si dimenticano, ma che esiste, ossia le liste1!Sulle liste puoi modificare essenzialmente l’aspetto dei punti di lista e la loro posizione. Inoltre, ricorda che le proprietà del carattere, così come line-height, possono risolverti molti problemi!

list-style-typeLa prima cosa che puoi cambiare è la tipologia di punto di lista. Logicamente puoi cambiare il segno sia alle liste ordinate che non. I possibili valori sono molti, e te li suddivido per le due tipologie di liste.

Liste ordinate2

armenian, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-al-pha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, none.

Liste non ordinatedisc, circle, square, none.

Ad esempio, puoi scrivere:

li{ list-style-type: circle;}

1 In molti progetti dimentico di applicare gli stili alle liste, per cui succede che il testo è for-mattato, mentre le liste sporgono a sinistra e non sono allineate con il resto del testo... Tuttavia ce la sto mettendo tutta per ricordarmelo ad ogni nuovo progetto!2 Non tutte le possibili varianti vengono applicate da tutti browser!

37

list-style-imageQualora non ti piacciano gli stili predefiniti delle liste, puoi utilizzare anche un’immagine per definire il tuo punto di lista.

li{ list-style-image: url(images/bullet_list.gif);}

Attenzione però: in alcuni casi devi stare molto attento a questo. Ad esempio, se imposti un’altezza definita per gli elementi di lista, potresti avere alcuni proble-mi ad utilizzare un’immagine, così come, se hai un’immagine più grande dell’al-tezza del contenuto dell’elemento. Per ovviare a questo, solitamente utilizzo un background-image sull’elemento, oppure con :before posso personalizzarlo al meglio… ma di questo parleremo meglio nel capitolo 7 “Pillole di utilità” a pagi-na 62.

Ricorda, inoltre, di definire anche il list-style-type prima dell’immagine. In questo modo, se un browser non carica le immagini, l’utente potrà capire comun-que che quell’elemento è una lista.

Un esempio potrebbe essere questo:

li{ list-style-type: circle; list-style-image: url(images/bullet_list.gif);}

Ricorda che, sebbene tu possa applicare lo stile di lista anche a <ul> o <ol> e non per forza a <li> solamente, a livello puramente logico non sarebbe corretto: gli stili di lista appartengono ad ogni elemento della lista, non alla lista in sé.

38

list-style-positionL’ultima possibile personalizzazione per liste riguarda la posizione del punto, interno od esterno alla lista. La differenza è che, in quello interno, il testo sarà allineato con il punto, mentre, con quello esterno, il punto è un’elemento indipen-dente dal testo. I due valori, quindi, sono:

• outside; impostazione predefinita, il punto è esterno al testo;

• inside; il punto è all’interno con il testo.

li{ list-style-type: circle; list-style-position: inside;}

list-styleTutte le proprietà delle liste fin qui viste possono essere ridotte nella short defini-tion list-style.

li{ list-style: circle inside url(images/bullet_list.gif);}

Non è necessario definire tutte le proprietà in list-style, tuttavia esse de-vono mantenere quest’ordine: list-style-type list-style-position list-style-image.

39

BOXCAPITOLO 6

Arriviamo alla parte più corposa di tutti i CSS: Box Model e dimensioni. Ti ricor-do, anzitutto, che ogni proprietà che vedremo può essere utilizzata su tutti gli elementi1, non per forza solo su <div> o su elementi di HTML5.

La teoria del Box Model si basa essenzialmente sul fatto che ogni elemento può essere visto come una scatola (o contenitore) al cui interno possiamo inserire un valore, oppure un’altra scatola, al cui interno, a sua volta, può essere inserito un valore oppure un’altra scatola, e via via di questo passo. Ad esempio2:

<section> <article> <header> <h1>This is a title</h1> </header> <p>This is a text.</p> </article></section>

Qui abbiamo utilizzato 5 contenitori: <section>, <article>, <header>, <h1> e <p>. Anche <h1> e <p> li possiamo considerare come contenitori, in quanto con-tengono testo. Visti i tag sotto quest’ottica possiamo definire che ogni “scatola” occupa un determinato spazio.

Anzitutto, come hai potuto vedere dal capito introduttivo, abbiamo almeno due tipologie di elementi: block e inline. La differenza è che i block occupano la larghezza totale disponibile, mentre gli inline occupano quanto occupa il suo contenuto. Questo spazio occupato, quindi, lo possiamo scorporare in questo modo:1 Fanno eccezione alcune proprietà come larghezza o altezza, che possono essere applicate solo ad elementi di tipo block o inline-block.2 Spero che, arrivato a questo punto, tu stia indentando il tuo codice nel modo corretto: una cattiva indentazione si trasforma in una scarsa manutenibilità del tuo codice, e ti fa lavorare il doppio delle ore per capire come funzionano le cose.

40

• margin; rappresentano la distanza che intercorre tra due elementi adiacenti; può essere applicato solo ai tipi block o inline-block;

• padding; una sorta di “bombatura” dell’elemento rispetto al suo contenuto; potresti vederlo come una sorta di margine interno;

• border; rappresenta un’ulteriore bordatura esterna dell’elemento;

Sotto questo punto di vista, possiamo dire che le dimensioni di un qualsivoglia elemento sono rappresentate da: dimensione di un elemento = margin + padding + border.Tieni bene a mente questo assunto perché ti verrà dimostrato tra breve.

marginIl margin rappresenta la distanza che intercorre tra due elementi adiacenti. Anzitutto, va specificato che margin è la short definition: per motivi pratici, pre-ferisco spiegarti questa proprietà partendo da quella generale, in quanto è più semplice e immediata da capire.

I margini utilizzabili sono: sopra (top), destra (right), basso (bottom), sinistra (left). La quantità di valori che puoi attribuire a margin varia da 1 a 4, pensati sempre in senso orario; nello specifico, le quattro possibilità.

Se è definito un solo valore, esso viene applicato per tutti e 4 i margini

header{ margin: 10px;}

Se sono definiti 2 valori, vengono prese le coppie di margini opposti

header{ margin:5px 10px;}

41

Se sono definiti 3 valori, il secondo ed il quarto valore sono uguali

header{ margin:2px 4px 8px;}

Se sono definiti 4 valori, ogni margine viene rappresentato e letto in senso orario, partendo da quello sopra

header{ margin:2px 4px 8px 10px;}

Da queste definizioni puoi ricavare che esistono anche le singole proprietà: mar-gin-top, margin-right, margin-bottom, margin-left.

Le unità di misura che puoi usare per i margini sono sempre le solite, e cioè: px, % e em. Inoltre, ricorda che per i margini puoi impostare anche valori negativi: questo significa che un margine negativo a sinistra, ad esempio, non sposterà l’elemento non verso destra, ma verso sinistra.

.negative{ margin-left: -10px;}

paddingIl padding rappresenta un rientro (una sorta di bombatura verso l’interno) del contenitore rispetto al suo contenuto. L’utilizzo di padding è analogo a quello di

Ricordati che non sempre è utile definire tutti i valori con la short defi-nition: in molti casi, se devi agire unicamente su un unico margine, puoi utilizzare la singola proprietà.

42

margin. Abbiamo quindi una short definition padding con le stesse modalità di margin.

Se è definito un solo valore, esso viene applicato per tutti e 4 i padding

article{ padding: 10px;}

Se sono definiti 2 valori, vengono prese le coppie di padding opposti

article{ padding:5px 10px;}

Se sono definiti 3 valori, il secondo ed il quarto valore sono uguali

article{ padding:2px 4px 8px;}

Se sono definiti 4 valori, ogni padding viene rappresentato e letto in senso orario, partendo da quello sopra

article{ padding:2px 4px 8px 10px;}

Da queste definizioni puoi dedurre che esistono anche le singole proprietà: pad-ding-top, padding-right, padding-bottom, padding-left.

Anche qui vige lo stesso ragionamento di margin: se devi definire un solo padding, puoi usare direttamente la singola proprietà, invece che quella completa. L’unica differenza rispetto a margin è che non puoi usare valori

43

borderA differenza di margin e padding, border necessita di 3 proprietà distinte: dimensione del bordo, tipologia di bordo e colore del bordo. Vediamo queste tre proprietà singolarmente.

La dimensione può essere espressa in px o con valori predefiniti, ossia:

• thin; bordo fino;

• thick; bordo spesso;

• medium; bordo normale;

• none; nessun bordo.

La tipologia di bordo, invece, è la modalità con cui il bordo si presenta all’uten-te. Ne esistono svariati: solid, dotted, dashed, double, groove, ridge, inset, outset, none.

Il valore solid è quello predefinito e crea un bordo di tinta unica.

Per finire, il colore lo puoi esprimere sempre come meglio ti aggrada, allo stesso modo del testo o dello sfondo.

Ricapitolando, quindi, i bordi li puoi esprimere in questo modo:

negativi.

Se vuoi specificare una dimensione fissa, puoi usare solo px come unità: purtroppo le dimensioni relative non sono supportate.

44

.highlight{ border: 3px solid #ff0000;}

Questo significa che tutti e 4 i bordi dell’elemento in questione saranno spessi 3px, pieni (solid) e di colore magenta.

Da ciò puoi ricavare che esistono sia le proprietà per i singoli valori, sia le pro-prietà per i singoli bordi3. Ma andiamo con ordine:

• border-width; rappresenta lo spessore dei bordi;

• border-style; rappresenta lo stile del bordo;

• border-color; rappresenta il colore del bordo.

L’esempio qui sopra, quindi, potrebbe essere riscritto in questo modo:

.highlight{ border-width: 3px; border-style: solid; border-color: #ff0000;}

Questo ti dovrebbe far anche capire che puoi personalizzare spessore, tipologia e colore per ogni singolo bordo:

.highlight{ border-width: 3px 5px; border-style: solid dotted dashed; border-color: #ff0000 black rgb(255, 255, 255) #a1a1a1;}

Da vedere non sarà il massimo, però lo puoi fare!

3 L’ordine di attribuzione dei bordi equivale a quanto visto per margin e padding: parten-do da top e andando in senso orario.

45

Come ultima cosa, ricorda che hai la possibilità di definire le singole proprietà per ogni singolo bordo: border-top-width, border-top-style e bor-der-top-color, border-right-width, border-right-style e border-ri-ght-color, border-bottom-width, border-bottom-style e border-bot-tom-color, border-left-width, border-left-style e border-left-color.

border-radiusUna proprietà a suo tempo richiestissima dai developer è quella che permette di poter impostare una rotondità ai bordi — o per dirla meglio, agli angoli — di un elemento. Con CSS3, quindi, è stata inserita la proprietà border-radius4. I valori che possiamo attribuire sono sempre i soliti, e cioè px, % e em, mentre il funzio-namento è analogo a border, con l’eccezione che in questo caso si prendono in considerazione gli angoli e non i bordi.

.highlight{ background-color: green; border-radius: 5px;}

In quest caso, verrà applicata una rotondità di 5px a tutti e 4 gli angoli di .hi-ghlight. Logicamente, esistono anche le singolo proprietà per ogni angolo: border-top-left-radius, border-top-right-radius, border-bottom-ri-ght-radius, border-bottom-left-radius.

width & heightGli ultimi fattori che concorrono alle dimensioni di un contenitore sono larghez-za (width) e altezza (height).

aside{ width: 300px;

4 border-radius è disponibile solo nei browser più moderni: http://caniuse.com/#search=-border-radius

46

height: 500px;}

Le unità di misura che puoi utilizzare sono sempre le solite: px, % e em. Un piccolo appunto sulla percentuale e l’altezza: scrivere height:100%; non ha nessun sen-so, tranne che in 2 casi (che vedremo tra breve). Questo perché l’altezza di una pagina HTML non è definibile normalmente. Viceversa, scrivere width:100%; ha perfettamente senso, in quando la larghezza di un elemento dipende dalla larghezza del suo genitore.

Quanto fin qui visto ti dovrebbe aver chiarito meglio l’assunto di prima, ossia:

dimensione di un elemento = margin + padding + border

Ti faccio però un altro esempio: poniamo il caso che un <div> debba essere largo 500px, ma che abbia, a destra e a sinistra, un padding di 10px e dei bordi di 5px. Quale sarà la sua larghezza effettiva, quella che imposti con la proprietà width? Semplice: seguendo l’assunto riportato più sopra:

500px = 20px (di padding, a destra ed a sinistra) + 10px (di border, a destra ed a sinistra) + 470px (di contenuto).

Esistono due varianti a width e height: min-width & max-width e min-heigh & max-height. Il min- stà a significare che imposti una dimen-sione minima, sotto la quale non è possibile scendere; max- invece, signi-fica che imposti una dimensione massima oltre la quale non è possibile andare.

aside{ min-width: 150px; min-height: 250px; width: 300px; height: 500px;}

47

Puoi vederla anche da un altro punto di vista:

dimensioni di un elemento = 500px (di contenuto) - 20px (di padding, a de-stra ed a sinistra) - 10px (di border, a destra ed a sinistra)

Riscrivendola con CSS:

aside{ padding: 0 10px; border: 5px solid red; width: 470px; /* 500 - 20 - 10 */}

box-sizingFin qui ti ho mostrato tutte le possibili variabili di cui è composta la dimensione di un elemento. Tuttavia, in alcuni casi potrebbe essere utile escludere i bor-di dall’assunto riportato più sopra. Come fare? Grazie a CSS3 e alla proprietà box-sizing5 puoi fare esattamente questo.

aside{ box-sizing: border-box; padding: 0 10px;

5 box-sizing è supportato da tutti i browser, con l’eccezione del valore padding-box: http://caniuse.com/#search=box-sizing

Pillola di saggezza: come fare una figura rotonda con CSS? Semplice:

.round{ width: 100px; height: 100px; border-radius: 50%;}

48

border: 5px solid red; width: 480px; /* 500 - 20 */}

In questo modo la dimensione dei bordi non concorre più nella definizione della grandezza e, di fatto, puoi non tenerne conto nel calcolo di width. I due possibili valori di box-sizing sono:

• content-box; il funzionamento predefinito di qualsiasi elemento;

• border-box; la dimensione dei bordi è rimossa dal calcolo della grandezza di un elemento.

box-shadowAnalogamente a text-shadow, puoi applicare un’ombreggiatura ad un elemen-to di tipo block grazie a box-shadow6. La sintassi è simile a text-shadow, con alcune eccezioni:

x-shadowLa posizione dell’ombra rispetto all’asse X; può essere anche negativa.

y-shadowLa posizione dell’ombra rispetto all’asse Y; può essere anche negativa.

blurLa distanza della sfocatura.

spreadLa grandezza dell’ombra.

colorIl colore dell’ombra.

6 box-shadow funziona solo sui browser più recenti: http://caniuse.com/#search=box-sha-dow

49

div{ box-shadow: 2px 2px 4px #ff0000;}

Puoi utilizzare anche un particolare valore, inset, per impostare l’ombra all’in-terno dell’elemento e non all’esterno.

div{ box-shadow: inset 2px 2px 4px #ff0000;}

Anche in questo caso, gli unici valori necessari per box-shadow sono x-shadow e y-shadow.

floatArrivato a questo punto, ti assicuro, hai già visto un buon 80% delle caratteristi-che dei CSS e delle maggiori proprietà utilizzabili. Starai sicuramente iniziando già a scrivere codice (vero?). Dopo aver preso un po’ di pratica con la sintassi, molto probabilmente sarai incappato nel tuo primo problema: poniamo il caso tu abbia una parte di contenuto, sulla sinistra, e una barra laterale, sulla destra. Come affiancarli?

La risposta purtroppo non è per nulla banale. Iniziamo con ordine però: molto probabilmente ti ritroverai con dell’HTML simile a questo (te lo semplifico per ragioni di praticità):

<div id=“content”> <section> <article></article> </section>

<aside></aside></div>

50

Visto attraverso le “lenti” dell’HTML, <aside> è conseguente a <section> e, inoltre, entrambi sono degli elementi di tipo block, per cui occupano il 100% del-lo spazio in larghezza. Come fare per affiancarli?Per risolvere questo problema ti viene in aiuto la proprietà float, che permette di far scorrere gli elementi sul fianco, invece che uno sotto l’altro. Tuttavia, non sono degli elementi inline, in quanto puoi attribuire valori di larghezza e altez-za a piacimento.

I valori che puoi dare a float sono:

• left; l’elemento successivo si affianca a sinistra;

• right; l’elemento successivo si affianca a destra;

• none; l’elemento successivo non si affianca.

Per cui, nell’esempio di prima, se scrivi:

section,aside{ float: left;}

otterrai che i due contenitori si affiancano… Con un piccolo problema: il conteni-tore padre #content ha perso la sua altezza, ossia, non è più alto quanto è il suo contenuto. Questa è una cosa del tutto normale, in quanto applicando un float vai ad alterare la normale esecuzione e renderizzazione degli elementi, che nor-malmente sono uno consecutivo all’altro. In questo modo è come se andassi ad aggiungere un livello soprastante al tuo sito.Come risolverla, allora, questa problematica? Ci sono molte vie, te le elenco qui di sotto (alcune di queste le vedremo in modo approfondito da qui in avanti):

• aggiungere un elemento successivo a quelli float con la proprietà clear;

• utilizzare :after con proprietà clear sul contenitore degli elementi float;

• impostare overflow:auto; sul contenitore degli elementi float;

• assegnare al contenitore degli elementi float un’altezza definita.

51

Immagino che tu non sia ancora pienamente soddisfatto della mia spiegazione. È una cosa normale: capire al meglio la proprietà float è (più o meno) capire come convivere con i CSS. Dal lato mio, tuttavia, spiegarti al meglio questa pro-prietà non è per nulla semplice: in molti ci hanno provato ma in pochissimi ci sono riusciti. Per tagliare la testa al toro, leggi questo articolo apparso su Italian A List Apart (la traduzione dall’inglese dell’articolo di Noah Strokes). Vedrai che dopo ti sarà tutto molto più chiaro!

clearCome hai potuto constatare poco fa’, esiste una proprietà particolare che ti per-mette di risolvere l’inconveniente legato all’utilizzare float, e cioè clear.Come suggerisce la parola, clear va a “pulire” gli elementi float e ristabilisce il normale flusso di esecuzione. Ossia, va a ristabilire le normali dimensioni degli elementi.Anche i valori di clear sono molto simili a float:

• left; “pulisce” solo gli elementi che sono stati impostati come float:left;

• right; “pulisce” solo gli elementi che sono stati impostati come float:right;

• both; “pulisce” tutti gli elementi float.

Riprendo l’esempio di prima e ci aggiungo un clear:

<div id=“content”> <section> <article></article> </section>

Hai quindi molte possibilità per risolvere questo inconveniente. Quale sce-gliere dipende essenzialmente da come è strutturato l’HTML. Ma il metodo che potrai applicare sempre è il primo.

52

<aside></aside> <div class=“clear”></div></div>

Quindi, il CSS risulterà essere:

section,aside{ float: left;}

.clear{ clear: left;}

In questo modo, quindi, #content prenderà nuovamente le dimensioni del più alto dei due elementi contenuti.

L’elemento che ha la proprietà clear deve essere necessariamente conse-cutivo agli elementi con proprietà float. Se tu l’avessi messo al di fuori di #content, molto probabilmente il suo elemento consecutivo (nel caso ce ne fosse) sarebbe risultato in posizione corretta, ma l’altezza di #content sarebbe rimasta a 0.

Ricorda che la proprietà clear funziona esclusivamente sui tipi block: sugli inline non ha nessun effetto! Devi quindi usare sempre dei <div>, o comunque degli elementi block? Assolutamente no, e ti prego anche di non utilizzare dei <div> vuoti in questo modo: esiste un’elemento neutro in HTML che è lo <span>, ma che tuttavia è di tipo inline… come fare allora? Nella prossima parte vedremo come trasformare una tipologia in un’altra.

53

displayIl fatto che nell’HTML esistano diverse tipologie di elementi è uno dei punti a fa-vore di questo linguaggio… il fatto che con CSS si possa variarne la tipologia è un altro punto a suo favore.

Prima di andare oltre, tuttavia, vorrei che ti soffermassi per un attimo su tutte le tipologie di visualizzazione che un elemento può assumere. Tieni conto che alcu-ne di esse sono molto rare e difficilmente le utilizzerai in un progetto. Tutte le ti-pologie di visualizzazione sono: inline, block, inline-block, inline-table, list-item, table, table-caption, table-column-group, table-hea-der-group, table-footer-group, table-row-group, table-cell, table-co-lumn, table-row, flex, inline-flex7, none.

Come abbiamo visto nel capitolo introduttivo, i due elementi più comuni sono inline e block. Tuttavia hai sicuramente già incontrato altre tipologie: gli ele-menti di lista sono dei list-item, le tabelle sono dei table (per non parlare delle righe, delle colonne e delle celle).Grazie, quindi, ai CSS puoi far variare a tuo piacimento la visualizzazione di un elemento.

span{ display: block;}

In questo modo cambi temporaneamente le modalità con cui uno <span> si presenta, rendendolo di tipo block. Attenzione però: non vuol dire che a livello logico <span> adesso sia di tipo block, per cui puoi inserire al suo interno un <div>, ad esempio8! La sua naturale funzionalità rimane. È come se prendessi il motore di una Ferrari e lo inserissi all’interno di una Panda: non è che potrai per questo vantarti con i tuoi amici di aver acquistato una Ferrari!

7 flex e inline-flex sono nuove proprietà di CSS3. Inoltre, ricorda che non tutte le pro-prietà sono supportate da tutti i browser (a maggior ragione quelle nuove).8 Questo ti fa comprendere anche che tecniche per me errate, come ad esempio inserire un <div> all’interno di un link — cosa che in HTML5 potresti fare — a livello logico non avrebbero senso.

54

Ritornando un secondo sull’argomento float e clear, potendo variare la visua-lizzazione di un elemento, capisci anche come sia possibile utilizzare un clear su uno <span>.

span.clear{ display: block; height: 0; clear: both;}

In questo modo non vai a “sporcare” l’HTML con tag non necessari e con 3 sem-plici righe di CSS ti risolvi un grande problema.

visibilityGrazie a visibility puoi nascondere alla visualizzazione dell’utente un ele-mento. Diversamente da display:none;, però, visibility mantiene inalterato lo spazio occupato dall’elemento. Questo significa che se ci sono, ad esempio, ele-menti sopra e sotto all’elemento nascosto, la risultante sarà un bel buco! I possi-bili valori possono essere:

• visible; impostazione predefinita, mostra l’elemento in modo naturale;

• hidden; l’elemento è invisibile;

• collapse; usato solo per le tabelle, rimuove le righe o colonne, ma mantiene inalterato il layout della tabella.

Impostando display:none; su un elemento, questo viene nascosto e l’utente non lo vede nel tuo sito. Attenzione che anche lo spazio che occu-pa viene completamente nascosto. Esiste un’altra proprietà che nasconde l’elemento ma che mantiene inalterato il suo spazio occupato: visibility.

55

overflow

Se vai a rivederti il capito dedicato a float, fra le possibili soluzioni di ripristi-no del normale svolgimento dell’HTML ti ho segnalato anche “Impostare over-flow:auto; sul contenitore degli elementi float;”.

overflow, è una proprietà che permette di decidere come deve comportarsi il contenuto nel momento in cui supera lo spazio ad esso designato. Ti faccio un esempio: poniamo il caso tu abbia un <div> in cui imposti un’altezza fissa, e che il testo contenuto al suo interno superi per quantità questa altezza. Come si com-porterà il <div>? Grazie a overflow puoi deciderlo. I valori che esso può assu-mere sono:

• visible; impostazione predefinita, il contenuto in eccesso verrà mostrato al di fuori del suo contenitore;

• hidden; il contenuto in eccesso viene nascosto;

• scroll; il contenuto in eccesso viene nascosto, ma vengono abilitate delle barre di scorrimento per poterlo visualizzare (entrambe le barre di scorrimento);

• auto; se il contenuto eccede, vengono abilitate le barre di scorrimento solo sulla parte eccedente (ossia, se il contenuto eccede in altezza, verrà abilitata solo la barra di scorrimento verticale).

Con questo piccolo trucchetto, quindi, se imposti un overflow:auto; al conteni-tore di elementi float, potrai ristabilire la normale esecuzione dell’HTML senza l’aggiunta di altri tag. Comodo!9

positionL’ultima possibilità che ti elenco per quanto riguarda i box (ma comunque uti-lizzabile per qualsiasi elemento) riguarda il loro posizionamento. Come hai visto finora, ogni elemento ha una posizione definita. Partendo dall’alto, gli elementi si

9 Non sempre è possibile e non sempre funziona... dipende sempre da com’è strutturato il tuo HTML.

56

susseguono in modo ordinato, eccezione fatta se usi float. Tuttavia, puoi modifi-care questo comportamento grazie alla proprietà position.

Se vuoi usare position, devi metterti nell’ottica di pensare alla tua pagina HTML come ad un foglio sopra al quale andrai ad adagiare degli ulteriori fogli di acetato, ognuno con all’interno il proprio contenuto10. Vediamo, anzitutto, i valori che la proprietà position può assumere:

• static; impostazione predefinita, ogni elemento è consecutivo all’altro, e tutti gli elementi sono presenti allo stesso livello;

• relative; l’elemento è posizionato il modo relativo secondo la sua normale posizione (ossia è possibile distanziarlo dalla sua origine11);

• absolute; l’elemento è posizionato in modo assoluto a seconda del suo geni-tore. Se il genitore non ha un posizionamento relative, l’elemento absolute andrà a ritroso, finché non troverà un genitore relative. In caso contrario, <body> sarà il genitore a lui più prossimo;

• fixed; l’elemento è posizionato in modo fisso, secondo la finestra del browser.

Chiarendo meglio: static e relative pongono l’elemento sullo stesso piano, con l’eccezione che, se il valore impostato è relative, puoi impostare delle di-stanze dagli elementi che gli stanno attorno (top, right, bottom, left)12.

div{ position: relative; top: 20px; left: 32%;}

Se l’elemento è absolute, invece, si viene a creare un nuovo livello e, in modo analogo a float, l’elemento risulta ad un livello superiore, portando di fatto il suo genitore a 0. Il genitore dovrebbe essere impostato come relative, in modo

10 Se non lo sapevi, questo è lo stesso procedimento che si fa nel creare le animazioni vec-chio stile (i cartoni animati, per intenderci) ed è lo stesso ragionamento che è stato fatto (digital-mente parlando) con i livelli di Adobe Photoshop.11 Non parlo di utilizzare margin o padding, ma proprio di definire una posizione secondo un punto di origine.12 Anche qui puoi usare le solite unità di misura: px, % e em.

57

da definire l’origine dell’elemento posizionato in modo absolute. Sicuramente avrai visto in molti siti che alcune immagini vengono “aperte” sopra al contenuto (effetto Lightbox13): quasi sicuramente il contenitore di quella immagine è impo-stato su position:absolute;.

.relative-container{ position: relative;}

.relative-container div{ position: absolute; right: 20px; bottom: 0;}

Infine, se l’elemento è fixed, esso sarà sempre fisso sulla pagina e la sua origine sarà unicamente la finestra del browser. Con questo sistema, ad esempio, puoi creare i cosiddetti “Sticky Menu”, ossia i menu di navigazione che sono sempre fissi, anche quando si scorre la pagina.

.menu{ position: fixed; top: 0; left: 0;}

Se ancora avessi dei dubbi (assieme a float, i posizionamenti sono una bella

13 Il nome deriva dal primo plugin JavaScript che ha trovato questa soluzione; esso, appunto, si chiamava Lightbox.

Come ti dicevo nella parte di width & height, puoi impostare l’altezza di un elemento a 100% solo se l’elemento è posizionato absolute o fixed: in questi due casi height:100%; rappresenta l’altezza massima del proprio genitore.

58

gatta da pelare) prova ad esaminare il codice di questo esempio.

z-indexAssieme ai posizionamenti (soprattutto absolute e fixed) può venire in aiuto impostare la loro profondità; per dirla breve, se hai due elementi absolute qua-le viene prima e quale dopo, visti dall’ottica dei livelli?

Grazie a z-index puoi impostare i livelli di tutti gli elementi relative, absolu-te e fixed. I valori che puoi utilizzare sono numerici in ordine crescente: non c’è limite alla numerazione14, così come non occorre partire dallo 015.

Poni molta attenzione nell’utilizzare questa proprietà, in quanto è molto facile perdersi all’interno delle sue logiche. Se vuoi approfondire l’argo-mento, ti consiglio la lettura di questo articolo su tuts+.

.lightbox{ position: absolute; left: 20%; top: 100px; z-index: 101;}

14 Anche se non c’è limite, non esagerare: arriva al massimo a 9999!15 È convenzione iniziare da 100, tuttavia non è richiesto: potresti tranquillamente partire da 1.

59

PILLOLE DI UTILITÀCAPITOLO 7

Se sei arrivato fin qui incolume, significa che oramai hai imparato a lavorare con i CSS. Adesso è il momento di mettersi la mano destra sulla spalla sinistra e… dar-si pure qualche “pacchetta” di congratulazioni!

Tuttavia, il tuo percorso non finisce certamente qui. Come ho scritto nell’introdu-zione, difatti, questo piccolo manuale è solo l’inizio e non esaurisce minimamen-te l’argomento. Quello che posso ancora mostrarti è qualche proprietà particola-re ed un piccolo assaggio dei CSS3. Alcune proprietà non le userai ancora, per via dello scarso supporto da parte dei diversi browser, ma altre ti saranno certamen-te utili, sempre di più.

CommentiI commenti devono diventare una parte essenziale del tuo lavoro1: ricordati che, finito un progetto, nel giro di 10 minuti lo avrai già dimenticato in buona parte. Ecco quindi, che avere il proprio codice commentato ti può aiutare a ricordarti meglio com’era impostato nel momento in cui dovrai intervenire nuovamente su di esso2.

Logicamente, tutto ciò che inserisci all’interno di un commento viene comple-tamente ignorato dal browser: questo significa che se per qualche ragione com-menti degli stili, questi non verranno applicati.Tutto ciò che si trova tra /* e tra */ è trattato come commento, per cui non viene interpretato.

/* Questo è un commento */div{}

1 Al di la dei CSS, se decidi di studiare un qualsiasi linguaggio di programmazione, è altret-tanto importante saper usare i commenti.2 Non fare troppo affidamento sulla memoria!

60

/* Anche questo è un commento, e non verrà applicato nessuno stile alla classe .error..error{ background:red;}*/

PuntatoreQualora te lo chiedessi, sì, puoi modificare anche l’aspetto del cursore del mou-se sulla tua pagina HTML. Grazie alla proprietà cursor, infatti, puoi cambiarlo come meglio credi. Mi raccomando però, cambiare il cursore del mouse all’even-to :hover dei link non è molto saggio. Rischieresti solo di creare confusione nel povero utente del tuo sito!

I possibili valori di cursor sono molti e rappresentano tutte le possibili icone che il puntatore del mouse può avere. Inoltre, puoi utilizzare anche un’immagine, qualora non volessi utilizzare un’icona predefinita3. Tutte le possibili icone sono: auto, alias, all-scroll, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, help, move, n-resize, ne-resize, nesw-re-size, ns-resize, nw-resize, nwse-resize, no-drop, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, url()4, ver-tical-text, w-resize, wait, zoom-in, zoom-out, none.

SVG & Icon Web FontsSVG è un particolare formato di immagine: la sua sigla significa Scalable Vector Graphic ed è quindi di tipo vettoriale. L’immagine o il disegno sono composti da

3 Ci potrebbero essere delle differenze tra i sistemi operativi in merito alle icone utilizzate per il puntatore. Ad esempio, su Apple OSX wait e progress producono lo stesso risultato, di-versamente che su Microsoft Windows. Ricorda, inoltre, che questa proprietà non funziona su dispositivi touch.4 Gli unici formati ammessi sono .gif e .cur, con l’aggiunta del valore default, precedu-to da virgola.

61

coordinate cartesiane di punti, che originano curve e rette. È un formato leggero: non hai una griglia su cui ogni pixel possiede le sue informazione di colore, ma semplicemente dei punti.

Nel corso degli ultimi anni, questo formato è entrato sempre più prepotentemen-te nel mondo del Web principalmente per due sue proprietà: è leggero — un’im-magine .svg pesa pochissimo — ed è scalabile senza perdita di dettaglio. Questi due fattori ben si sposano con i limiti e i problemi delle reti e delle infrastrutture di Internet. Tuttavia, lo puoi usare?

La risposta è: “ni”! Se (come me) ritieni che il supporto a Microsoft Internet Explorer 8 possa essere oggigiorno diminuito o proprio tolto, allora la risposta è senz’altro sì. Se invece vuoi mantenere ancora la compatibilità con vecchi brow-ser, allora la risposta potrebbe essere no5.

Comunque tu la veda, puoi utilizzare .svg esattamente come una qualsiasi altra immagine: con il relativo tag <img>.

Se usi .svg come sfondo, invece, e vuoi mantenere il supporto ai vecchi browser, potresti utilizzare un piccolo componente JavaScript, Modernizr. Esso ti permette di applicare delle classi a <body>, se è presente o meno una data caratteristica. In questo caso, avresti una classe .no-svg a cui applicare lo stile in modo univo-co.

div{ background-image: url(images/my_image.svg);}

.no-svg div{ background-image: url(images/my_image.png);}

In questo modo, solo i browser che sanno leggere gli .svg caricheranno la se-5 Volutamente ho usato il condizionale: in effetti, puoi utilizzare .svg anche se vuoi garan-tirti la compatibilità con i vecchi browser. Ti basta preparare le immagini che hai in .svg anche in .png e, utilizzando ad esempio il plugin SVGeezy per jQuery, puoi far caricare le immagini .png solo sui browser che non supportano SVG.

62

conda definizione e, per la proprietà della cascata dei CSS, la seconda definizione sovrascriverà la prima.

Gli SVG (e i disegni vettoriali in generale), tuttavia, sono legati ad un’altra imple-mentazione che è stata resa possibile negli ultimi anni: gli Icon Web Fonts.Questi particolari font presentano al loro interno una piccola variante: invece di stampare lettere e numeri, presentano delle icone. Questo significa che, ad esem-pio, se digiti una “a”, ottieni l’icona di una matita, oppure una “b” potrebbe far visualizzare un paio di forbici, ecc. Gli Icon Web Fonts sono veramente utili per gestire una serie di icone di cui — magari — il tuo sito ha bisogno, il tutto però all’interno di un unico file. Ne parleremo in dettaglio nel prossimo capitolo, così avrai modo di capire meglio il loro reale (e potente) utilizzo. Se vuoi fare delle prove, tuttavia, esistono dei pacchetti di Icon Web Font già pronti per essere uti-lizzati. Ad esempio il blasonato Font Awesome ti permette di iniziare a compren-dere meglio questa nuova tecnica.

Pseudo elementiHai certamente notato, nella parte inerente ai link, l’esistenza di alcune pseudo classi che ti permettono di agire anche sugli stati di un elemento. In modo analo-go, esistono anche degli pseudo elementi. Essi non sono elementi veri e proprio (non sono di certo tag HTML), ma delle estensioni ad HTML che puoi utilizzare con i CSS.Anzitutto, gli pseudo elementi funzionano come le pseudo classi: iniziano con i due punti.

Difficilmente in un progetto avrai la necessità di avere tutte quelle icone (anzi, è già tanto se utilizzerai 1/10). Ragion per cui potresti cominciare ad utilizzare dei servizi che ti permettano di creare Icon Web Fonts parten-do da tuoi SVG (ecco svelato il legame tra queste due cose). Ad esempio, io trovo straordinario Fontastic. Grazie ad un’interfaccia semplice ed a delle potenzialità veramente notevoli, puoi crearti i tuoi set di icone in totale libertà. L’ho già detto che è completamente gratuito?

63

:before e :after rappresentano, rispettivamente, la parte precedente e succes-siva di un elemento: prendi ad esempio un <div> e immagina che prima del suo contenuto ci sia una sorta di piccolo spazio, in cui puoi agire e applicare uno stile. In modo analogo succede anche con :after, solo che qui lo spazio è successivo al contenuto. Per poter utilizzare in modo corretto questi due pseudo elementi, tuttavia, devi utilizzare una proprietà particolare dei CSS: content.

content è una proprietà che ti permette di inserire del contenuto testuale da CSS, invece che da HTML. Mi raccomando: il contenuto da CSS non è indicizza-bile e, in alcuni casi, nemmeno accessibile, per cui utilizzalo esclusivamente per contenuto di non primaria importanza. content può contenere qualsiasi carat-tere racchiuso tra singoli o doppi apici e può essere anche vuoto… Comunque sia, deve esserci, altrimenti non vedrai la magia di :before e :after!

div{}

div:before{ cotent: ″″;}

div:after{ cotent: ″>″;}

A che cosa ti può servire tutto questo? Ti faccio un esempio: poniamo il caso tu stia facendo una Web App6. Con molta probabilità vorrai inserire delle icone a corredo dei testi, in modo da far capire meglio il funzionamento dei tuoi bottoni7. Non vorrai mica creare dei .gif o .png per ogni icona, vero? E se un domani tu volessi modificarne la dimensione, rifarai tutte le immagini? Non scherziamo!

Come abbiamo visto nel capitolo precedente, grazie al supporto di .svg e di Icon 6 Le Web App sono dei veri e propri applicativi, solo che invece che essere installati sul tuo computer, sono realizzati con HTML/CSS e JavaScript e possono funzionare sui browser più recen-ti.7 Ad esempio, se c’è una funzione di “Nuovo documento” o “Nuova pagina”, potresti usare una matita, in modo da far intendere all’utente che con quel bottone potrà creare qualcosa.

64

Web Fonts, è possibile ridurre notevolmente questo carico di lavoro, riuscendo a realizzare qualcosa di veramente impeccabile.In questo modo, avendo un Icon Web Font puoi controllare le tue icone grazie a content e agli pseudo elementi :after e :before.

Riprendendo l’esempio della Web App, quindi:

a.new-document:before{ cotent: ″a″; font-family: 'myIconFont';}

In questo modo, a fianco del tuo link con classe .new-document apparirà la lette-ra “a”, che si tradurrà nell’icona che hai scelto per il tuo Icon Web Font, ad esem-pio, una matita.

Grazie a questa piccola tecnica, ti risolvi un paio di problemi. Anzitutto, essendo dei font, le tue icone potranno essere scalate e ridimensionate a piacere, senza perdere alcun dettaglio. Inoltre, visto che tutte le icone saranno contenute all’in-terno di un unico file, il browser farà una sola richiesta per tutte le icone8. Come ultima cosa, grazie a :before e :after, le tue icone non verranno indicizzate dai motori di ricerca e non andrai quindi a “sporcare” l’HTML con immagini o altri codici strani.

A fronte di questi pro, ovviamente, ci sono anche dei contro. Essendo tutte le ico-ne trattate come testo, potrebbe essere parecchio impegnativo (e frustante) uti-lizzarle in alcuni contesti. Devi tenere conto che, anche se non sono lettere, esse sottostanno alle regole di trattamento dei font: grandezza e interlinea in primis. Armati di pazienza perché il tutto non è così immediato. Inoltre, se le tue icone devono avere più colori (per una singola icona), non puoi assolutamente utilizza-re questo metodo: essendo dei caratteri puoi applicare solo un colore per volta.

8 Se devi utilizzare per forza di cosa delle icone, potresti realizzare degli Sprite, in modo da far caricare un solo file con tutte le icone: leggi l’articolo su CSS Tricks per maggiori informazio-ni.

65

:after, infine, ti potrebbe essere utile per risolvere il problema di float. Se, infatti, nel contenitore degli elementi con float imposti lo pseudo elemento, do-vresti riuscire a ristabilire la sua altezza:

#content:after{ display: block; height: 0; content: ″″; clear: both;}

Selettori avanzatiPrima che tu ti ponga il dubbio, te lo chiarisco io: il titolo non significa che mi avanzavano dei selettori!

Hai già potuto incontrare dei selettori nel corso di questo manuale9: oltre a quelli classici, anche le pseudo classi sui link. Le pseudo classi, in realtà, non sono altro che dei selettori particolari, che invece di selezionare un elemento o una classe, selezionano uno stato. Di selettori ne esistono molti (in appendice hai una piccola tabella su tutti i possibili selettori), qui però mi soffermo solo su alcuni fra di essi, quelli che sicuramente ti saranno più utili.I primi selettori che vedremo sono :first-child e :last-child. In questo caso vai a selezionare dei particolari elementi, ossia il primo o l’ultimo di un gruppo. Il funzionamento è semplicissimo e te lo illustro con un esempio:

9 Selettori di appartenenza, selettori di id e di classe.

Questo è uno di quei casi — e ce ne sono diversi — in cui devi prendere in considerazione molti aspetti prima di metterti a produrre del codice: una scelta sbagliata può equivalere ad avere in seguito la necessità di dover rifare tutto da capo.

66

ul li:first-child{ color: tomato;}

ul li:last-child{ color: blue;}

Questi stili significano semplicemente che il primo e l’ultimo elemento della lista avranno lo stile indicato.

Due piccoli selettori, che sicuramente ti serviranno, sono il selettore di paternità (o figliolanza) e quello di adiacenza. Il primo seleziona solo il primo figlio del ge-nitore, il secondo, invece, seleziona l’elemento più prossimo a quel dato elemen-to. Ti faccio un esempio, partiamo dall’HTML:

<ul class=″menu″> <li><a href=″#″>First line</a></li> <li><a href=″#″>Second line</a></li> <li><a href=″#″>Third line</a> <ul class=″menu″> <li></li> </ul> </li></ul><div class=″ad-message″></div>

Se tu volessi selezionare solo gli elementi di primo livello della lista (cioè quelli che stanno all’interno solo del primo <ul>), potresti scrivere:

ul.menu > li{}

Lo stile all’interno di questa regola verrebbe applicato unicamente ai figli diretti della lista con classe .menu. Gli altri elementi di lista non verrebbero minima-mente toccati.

67

Poniamo adesso il caso, che tu vogli applicare uno stile a quel <div>, successivo alla lista. Però, quel particolare contenitore compare solo in quella posizione e solo in determinate occasioni. Una via — quella senz’altro più semplice — è uti-lizzare la sua classe. L’altra via potrebbe essere quella che prevedere un selettore di adiacenza:

ul + div{}

Grazie al fatto che i due elementi sono adiacenti e consecutivi, lo stile verrà appli-cato. Se, per caso, tra <ul> e <div> si verrà a creare un altro elemento (un para-grafo, ad esempio), allora quella regola non sarà più valida, perché <div> non sarà più adiacente a <ul>.

Altri selettori che ti potrebbero far comodo, sono i selettori di attributo.Poniamo il caso che tu abbia dei link all’interno di HTML e che tu desideri che solo quelli che puntano all’esterno vengano visualizzati in modo diverso. Solita-mente, i link che puntano all’esterno — magari a servizi o argomenti analoghi a quello che tratta la tua pagina — dovrebbero avere l’attributo rel=“nofollow”. Come selezionare quindi solo questi elementi, senza far uso di una classe specifi-ca?

a[rel=″nofollow″]{ background: url(images/external_link.gif) right center no-re-peat; padding-right: 20px;}

Anche nel caso tu non voglia usare nofollow per i link esterni al tuo sito, è buo-na norma usare l’attributo target=″_blank″10: anche in questo caso riusciresti ad applicare lo stile soprastante. Addirittura, potresti essere più estremo. Dato che l’attributo target va usato solo se vuoi aprire la pagina su una nuova fine-stra11, potresti scriverlo così.

10 Ricorda che l’attributo target è buona norma usarlo solo per collegamenti esterni: non aprire mai su una nuova pagina un link interno al tuo sito.11 Non avrebbe senso scrivere per tutti i link interni target=″_self″, dato questo che è il funzionamento base dei link.

68

a[target]{ background: url(images/external_link.gif) right center no-re-peat; padding-right: 20px;}

ViewportOramai siamo sempre più calati in un contesto di mobilità: gli smartphone e i tablet hanno cambiato tutte le nostre abitudini, sia in fatto di reperibilità e di “contatto” con il resto del mondo, sia in fatto di accessibilità ai servizi e ai siti internet. Quasi sicuramente anche tu sarai munito di uno smartphone e ti sarai certamente accorto di cosa accade ad un sito internet quando esso viene visualiz-zato attraverso un device mobile: solitamente esso viene adattato al dispositivo.

Facciamo un po’ di chiarezza: in un dispositivo mobile abbiamo una dimensione dello schermo riservata al browser molto ristretta12. Andiamo da 320px ad un massimo di 767px13: i numeri non sono casuali. Oltre agli smartphone esistono anche i tablet che, guarda caso, visti in posizione portrait (ossia in verticale) han-no una larghezza minima di 768px.

Queste dimensioni, tuttavia, ti fanno capire che se visualizzi il tuo sito in un browser mobile — come ad esempio Safari Mobile — molto probabilmente lo vedrai rimpicciolito. Poniamo il caso il tuo sito abbia una larghezza definita a 960px: dovendo stare all’interno di una dimensione minima di 320px il tuo sito dovrà essere scalato. Questo ridimensionamento viene fatto automaticamente da Safari Mobile grazie al suo viewport: altro non è se non la dimensione massima in pixel che il browser può avere (nel caso di Safari Mobile si aggira intorno a 980px). Ovviamente, dovendo far stare 980px su una dimensione di 320px, l’uni-ca azione possibile è quella di ridurre lo zoom!

12 Ricorda che qui parliamo di grandezza del browser: il dispositivo può avere una risolu-zione 4K ma le dimensioni di utilizzo del browser saranno probabilmente diverse. Ti consiglio di visitare questo indirizzo per capire meglio le reali dimensioni del browser del tuo dispositivo.13 Ad oggi, nel 2014, anche i neonati iPhone 6 e iPhone 6 Plus rientrano perfettamente all’in-terno di questi valori di grandezza.

69

Questo processo, tuttavia, può — e anzi dovrebbe — essere gestito da te, in modo da far adattare al meglio il tuo sito. Qui entriamo nel mondo del Responsive Web Design (RWD), di cui non vedremo altro se non il fattore viewport. Nel RWD è necessario avere una certa pratica con CSS, per cui mi sono riservato l’argomento per futuri interventi. Tuttavia, è bene fin da subito che tu capisca come lavorare con viewport; il tutto può essere gestito in modo autonomo grazie ad un meta tag particolare: viewport, appunto.

<meta name=“viewport” content=“” />

Come sicuramente già saprai, i meta rappresentano delle informazioni aggiun-tive per il browser o per qualunque altro tipo di software sappia interpretare queste informazioni. Con il meta riportato sopra, vai semplicemente a dire che il viewport del browser non sarà più quello di default (ossia 980px ristretti in 320px), ma che invece esso sarà pari alla grandezza dello schermo di quel de-vice. Pertanto, il tuo sito, ora, non risulterà più scalato. Le possibili opzioni di viewport sono:

• width; imposta la larghezza massima del viewport;

• height; imposta l’altezza massima del viewport;

• user-scalable; abilita o meno la possibilità di zoom del tuo sito; normalmente non andrebbe mai tolta la possibilità di zoom con le dita da parte dell’utente;

• initial-scale; imposta la scala iniziale di zoom; in un progetto RWD dovreb-be essere quasi sempre impostato a 1.0.

• minimun-scale; imposta la scala minima di zoom, da 0 a 1; se user-scalable è impostato su no, questa proprietà potrebbe anche non essere inserita;

• maximun-scale; imposta la scala minima di zoom, da 0 a 1; se user-scalable è impostato su no, questa proprietà potrebbe anche non essere inserita;

• minimal-ui; applicata unicamente a Safari Mobile — stranamente solo iOS 7, iOS 8 non tiene più conto di questa direttiva — riduce al minimo la UI di Safari Mobile per dare più importanza ai contenuti.

In un progetto RWD, insomma, le impostazione che dovrebbero essere date a viewport sono le seguenti:

70

<meta name=“viewport” content=“width=device-width, initial-sca-le=1.0” />

A partire da questo punto potresti integrare il tuo CSS con delle media queries… ma questo è un argomento molto lungo e complesso da vedere adesso. Se sei curioso, però, prova a leggere questo articolo su Smashing Magazine, inerente al Responsive Web Design.

GradientiSe sei molto giovane, sicuramente non hai idea di che cosa voleva dire, a metà del decennio appena trascorso, applicare una sfumatura di colore14: nel 100% dei casi significava usare un’immagine! Oggi, fortunatamente, puoi farlo anche in altro modo, grazie alle proprietà dei CSS315 chiamate linear-gradient e ra-dial-gradient.

I gradienti hanno una sintassi abbastanza complessa. Inoltre, ogni browser im-plementa una leggera variante di -gradient16, rendendo la cosa ancora più critica. I valori standard, comunque, sono definiti dalla direzione del gradiente e dai colori che vuoi aggiungere alla sfumatura, separati da una virgola.

.gradient{ background: linear-gradient(to right, red, rgb(255, 178, 30), green, #ff0000);}

Le stesse modalità le puoi anche applicare a radial-gradient, l’unica differen-za sarà che verrà creato un gradiente rotondo, invece che lineare.

14 In quegli anni, a differenza di adesso, vigeva la moda del glossy: bottoni, sfondi e grafiche dovevano avere una qualche sfumatura!15 Mi sembra assurdo che in un’epoca in cui il flat design la fa da padrona, esce un modo per fare le sfumature con CSS! :(16 linear-gradient e radial-gradient non sono disponibili su tutti i browser: http://ca-niuse.com/#search=gradient

71

TransizioniL’ultima proprietà che analizzeremo sono le transizioni. Grazie a queste nuove capacità di CSS3 puoi far sì che il cambio di uno stato venga applicato tramite una piccola animazione, invece che in modo “secco”. La proprietà transition è la short definition di ogni singolo aspetto di una transizione:

• transition-property; definisce quale proprietà dello stile animare, se non specificata vengono animate tutte quelle presenti;

• transition-duration; definisce durata della transizione espressa in secondi (s);

• transition-timing-function; definisce la curva che genera la transizione; le possibili curve sono: ease, linear, ease-in, ease-out, ease-in-out, cu-bic-bezier(), con l’ultima puoi definire la curva manualmente.

• transition-delay; definisce il ritardo della transizione espresso in secondi (s).

La migliore applicazione delle transizioni è sicuramente sui link, ovvero sul cam-biamento degli stati:

a{ background-color: white; color: red; transition: 1s;}

Il mio consiglio è quello di utilizzare dei tool online per la generazione dei gradienti: ma non è per invogliarti alla pigrizia che lo dico! I gradienti pos-sono essere anche complessi, avere un tool visivo per crearli ti potrebbe far risparmiare molte ore di lavoro. Quello che solitamente uso io è Ultimate CSS Gradient Generator di Colorzilla.

72

a:hover{ background-color: red; color: white; transition: 1s ease-in .3s;}

Come puoi vedere, la proprietà transition l’ho impostata in entrambi gli stili: in questo modo avrò una transizione di un certo tipo con hover, mentre avrò un’altro tipo di transizione quando sposterò il puntatore del mouse dal link con il mouse.

Il bello delle transizioni offerte dai CSS è che ti faranno risparmiare molto codice JavaScript e, qualora una di esse non fosse supportata dal browser, il sito risulte-rebbe comunque utilizzabile e navigabile senza problemi. Dopotutto, animazioni e transizioni dovrebbero essere solo un modo per migliorare l’esperienza del tuo sito da parte dell’utente. E proprio per questo, se un utente utilizza un browser vecchio è anche corretto che tali transizioni non vadano ad inficiare la stabilità e la potenza della sua macchina.

73

CONCLUSIONICome sono solito dire ai miei studenti, CSS è, forse, il “linguaggio di programma-zione” più complesso che possa esistere. È vero che presenta una sintassi molto semplice e intuitiva, tuttavia, per utilizzarlo al meglio, sono necessari accortezza, analisi e tanto, tanto esercizio.

Spero veramente che il percorso che abbiamo fatto assieme, ti possa aver aiu-tato nell’affrontare e comprendere meglio questo linguaggio. Questo manuale, tuttavia, vuole essere anche un manuale “aperto”, in continua crescita. Se ritieni che manchi qualcosa o che abbia scritto qualcosa di errato, puoi comunicarmelo all’indirizzo tech@giovannibuffa.it; tutti assieme possiamo crescere sempre di più!

Grazie per aver speso un po’ del tuo tempo per leggere questo manuale e buona fortuna per il tuo viaggio con CSS.

74

SelettoriSELETTORE UNIVERSALE

Applicato a qualsiasi elemento.

* {}

SELETTORE DI TAGApplicato al tag.

p {}

strong, em {}

SELETTORE DI CLASSEApplicato agli elementi con la classe specifica.

.one {}

p.two {}

SELETTORE DI IDApplicato all’elemento con l’id specificata.

#content {}

section#main-blog {}

SELETTORE MULTIPLOApplicato all’elemento con l’id e/o la classe specificata.

APPENDICE

75

#test.one {}

.button.red {}

SELETTORE FIGLIOApplicato al primo elemento figlio.

li > a {}

SELETTORE DISCENDENTEApplicato a tutti gli elementi figli.

div p {}

SELETTORE GENERICO DI ADIACENZAApplicato all’elemento prossimo, non per forza consecutivo.

h1 ~ p {}

SELETTORE DI ADIACENZAApplicato all’elemento prossimo.

h1 + p {}

SELETTORE DI STATOApplicato quando un elemento modifica il proprio stato.

:link {}:hover {}:focus {}:visited {}:active {}

SELETTORE DI LETTERAApplicato alla prima lettera di un paragrafo.

76

p:first-letter {}

SELETTORE DI RIGAApplicato alla prima riga di un paragrafo.

p:first-line {}

SELETTORE FIGLIO (PRIMO/ULTIMO)Applicato all’elemento figlio (primo/ultimo).

:first-child {}:last-child {}

SELETTORE FIGLIO ENNESIMOApplicato all’elemento figlio ennesimo.

:nth-child(n) {}

SELETTORE DI ATTRIBUTOApplicato a tutti gli elementi che corrispondono con l’attributo.

a[target] {}

p[lang=″it″] {}

SELETTORE DI NEGAZIONEApplicato a tutti gli elementi che non corrispondono al selettore.

p:not(.heading) {}

PSEUDO ELEMENTIApplicato agli pseudo elemento prima e dopo.

:before {}:after {}