I cascading stylesheet 3, da qui in poi css3, non sono ancora lo standard dei fogli di stile, a poco a poco però
quasi tutti i browser in attesa dello standard hanno implementato i css3, i primi due browser sono stati
Firefox e Safari, facendo precedere le proprietà dal prefisso, rispettivamente, -moz e -webkit.
Le principali proprietà:
text-shadow : ombreggiatura dei testi
font-face: per aggiungere un font specifico al foglio di stile
box-shadow: ombreggiatura dei blocchi e delle immagini
border-radius: bordi arrotondati dei blocchi e delle immagini
multiply-background: aggiunge varie immagini di sfondo
opacity: setta la trasparenza di un elemento
multi-column: divide i contenuti in colonne spefiche
Nei siti che ho progettato ho utilizzato soprattutto border-radius,
text-shadow, box-shadow e font-face.
Nel sito che ospita questo articolo ho utilizzato border-radius per
lo sfondo dei link e per gli input dei form.
Ho ombreggiato i testi dei titoli con text-shadow, mentre ho utilizzato
box-shadow per ombreggiare le immagini dei post e gli elementi
dei form.
Il font utilizzato in questo sito è il fontin, un font gratuito reperibile qui:
http://www.fontsquirrel.com/fonts/Fontin, questo è stato reso possibile
dalla proprietà font-face resa cross browser grazie al tool font-face
generator di fontsquirrel.com.
L'eccezionalità dei css3 è data dalla loro semplicità di uso e dal notevole
risparmio in fatto di peso che consente. Senza i css3 gli effetti
prodotti da queste proprietà si sarebbero ottenuti con grande dispendio
di immagini pregiudicando la leggerezza in termini di bytes del sito, con
gravi ripercussioni sulla velocità di caricamento delle pagine.
Ovviamente ci sono pro e contro.
Vediamo i contro:
come già detto non tutti i browser supportano i css3, internet explorer, croce
e delizia (soprattutto croce) dei web designer di tutto il mondo li supporterà
solo dalla versione 9 (è possibile testare la versione demo), mentre gli altri
browser hanno implementato delle loro regole in vista dello standard.
Per ovviare a questo inconveniente quasi tutti, me compreso, utilizzano la tecnica
'progressive enhancement', espressione intraducibile (progressivo aumento) simile
al celebre work in progress di Joyce, implementano le regole proprietarie per i
browser che le supportano e lasciano che i browser css3-less interpretino in modo
css 2. In realtà poi si tenta di correre ai ripari, almeno per la versione di internet
explorer 7 e 8, a plugin di jquery che offrono effetti simili.
Alcune proprietà css dal vivo (visibili solo su Chrome, Firefox, Safari, IE 9):
text-shadow:
regola css3:
p.demo {text-shadow: 1px 1px 3px black; font-size:12px; color: green;}
testo con ombreggiatura
box-shadow:
div.demo { -moz-box-shadow: 0px 2px 4px #121212;
/* mozilla*/
-webkit-box-shadow: 0px 2px 4px #121212;
/* safari e chrome */
box-shadow: 0px 2px 4px #121212; /* ie9 e tutti gli altri in futuro*/ }
border-radius:
div.demo2{ -moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;}
Di seguito alcune risorse imperdibili sui css3:
http://css3please.com/
http://www.css3.info/
http://www.w3avenue.com/2009/06/22/css3-unleashed-tips-tricks-and-techniques/
http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html