Le meraviglie di CSS3 nel mondo reale

• Sia su desktop sia su mobile (e su altri dispositivi di navigazione alternativi) ci sono altri rendering engine oltre a Webkit. (Molti designer se ne dimenticano e non considerano il fatto che non è poi così difficile far funzionare le nuove caratteristiche di CSS3 anche sugli altri browser).
• Alcuni browser in uso ad oggi supportano un insieme ragionevole di features, mentre alcuni non ne sopportano nemmeno una.
• Alcuni di noi hanno dei clienti in carne ed ossa che vogliono che i loro siti appaiano praticamente identici anche sui browser più vecchi.

Ok, probabilmente non sto dicendo nulla di nuovo, ma mettendo da parte i nostri divertenti esperimenti, che cosa possiamo davvero cominciare ad usare di CSS3 nei vari siti in produzione già da adesso, senza dover aspettare 10 anni, ossia quando IE6 sarà morto di vecchiaia e noi staremo imparando a conoscere CSS4?

Non tratterò nulla che si avvicini nemmeno vagamente al concetto di tutte le features che si possono trovare in CSS3, perché ci vorrebbe fino a Natale e mi perderei Coronation Street. Mi accontento di fare una carrellata su alcune delle delizie di CSS3 che tutti noi conosciamo ed amiamo e vedremo come renderle il più possibile cross-browser:

• Gradienti lineari
• Drop shadows
• Opacità
• Angoli arrotondati
• Web font

Un esempio appropriato?#section1

Per spiegare le mie ragioni, creerò un piccolo “funky bling box” che userò come se fosse il mio parco giochi. Ecco che aspetto ha nelle ultime versioni di Opera, Firefox, Chrome e Safari:

Fig. 1: Esempio di CSS3 come viene visualizzato in un browser che supporta interamente CSS3.

Lo aggiornerò man mano che procedo nella spiegazione. Date un’occhiata al “bling-esempio” iniziale: sentitevi liberi di farci delle prove e di aggiornarlo per conto vostro, perché sono sicuro che riuscirete a farlo apparire più grazioso di quello che sono riuscito a fare io.

In questo esempio, ho preso una semplice pagina HTML5 con un elemento <section> con del contenuto al suo interno e l’ho ornato con dei CSS piuttosto banali. Non vi illustrerò il codice perché lo trovereste tedioso, tuttavia, vi sottolineo alcuni aspetti interessanti.

Web font#section2

Tanto per cominciare, sono andato su Font Squirrel, ho cercato un font abbastanza carino e ho utilizzato l’@font-face generator per creare il codice cross-browser per includere il font, che funzionerà praticamente in tutti i browser:

@font-face {
  font-family: 'MEgalopolisExtraRegular';
  src: url('megalopolisextra-webfont.eot');
  src: url('megalopolisextra-webfont.eot?#iefix') 
    format('embedded-opentype'),
  url('megalopolisextra-webfont.woff') format('woff'),
  url('megalopolisextra-webfont.ttf') format('truetype'),
  url('megalopolisextra-webfont.svg#MEgalopolisExtraRegular') 
    format('svg');
  font-weight: normal;
  font-style: normal;
}

Angoli arrotondati#section3

Per rendere il mio esempio “Web 2.0 compliant”, ho fatto in modo di aggiungere al mio box almeno un angolo arrotondato:

border-radius: 30px 0 0 0;

Text shadows#section4

Poi, ho incluso diverse ombreggiature al testo contenuto in h1, per dargli un discreto effetto 3D:

text-shadow: 0 0 1px #000,
  0 0 1px #aaa,
  0 0 2px #999,
  0 0 3px #888,
  0 0 4px #666,
  0 3px 3px rgba(0,0,0,0.5),
  0 4px 10px rgba(0,0,0,0.5);

Ho anche aggiunto una semplice ombreggiatura sul testo del paragrafo per assicurarne la leggibilità nel caso si scelgano colori più scuri per il background:

text-shadow: 1px 1px 1px #bbb;

(Nota: ho preso ispirazione per il mio effetto text-shadow dal magistrale Jan Henrik Helmers.)

Box shadows#section5

Ho poi aggiunto molteplici box-shadows, incluse multiple box shadow esterne per dare alla box un aspetto più naturale con diverse sorgenti di luce ed una box shadow interna (specificata con la parola chiave inset) per dare alla box un po’ di profondità:

-webkit-box-shadow: 5px 5px 20px #000,
  1px 1px 1px #000,
  10px 10px 70px #333,
  inset 10px 10px 20px rgba(0,0,0,0.4);
box-shadow: 5px 5px 20px #000,
  1px 1px 1px #000,
  10px 10px 70px #333,
  inset 10px 10px 20px rgba(0,0,0,0.4);

Nota: ho incluso la versione del prefisso -webkit-: al momento in cui scrivo, Safari ha ancora bisogno del prefisso per box-shadow. Dovreste sempre mettere la versione senza prefisso per ultima quando usate i prefissi dei produttori, così che quando i browser smetteranno di usare il prefisso e supporteranno la versione finale, la versione senza prefisso sovrascriverà qualunque comportamento esibito dalle versioni con il prefisso che la precedono nel sorgente.

Gradienti lineari#section6

I gradienti lineari sono attualmente supportati da tutti i browser più nuovi con i prefissi dei produttori. Abbiamo pertanto bisogno di aggiungere alcune righe per farle funzionare in maniera cross-browser. Per il mio esempio “blingtastic”, ho aggiunto un gradiente bianco che va diagonalmente attraverso tutto il box a 60 gradi per dare al box una bella texture:

background-image: -ms-linear-gradient(60deg, rgba(255,255,255,0),
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: -moz-linear-gradient(60deg, rgba(255,255,255,0),
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: -o-linear-gradient(60deg, rgba(255,255,255,0),
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: -webkit-linear-gradient(60deg, rgba(255,255,255,0),
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));
background-image: linear-gradient(60deg, rgba(255,255,255,0),
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));

Opacità#section7

Avrete notato che sopra per il gradiente lineare e la box shadow interna ho usato i colori RGBa, ad esempio, rgba(255,255,255,0.2). Non sto cambiando i colori dei canali, solo l’alpha channel, così uso solo il bianco puro e il nero con una trasparenza che cambia. Il colore che vedete è in effetti il background-color che appare dal fondo. Questa è una gran tecnica sotto molti aspetti: i browser che non supportano i gradienti lineari mostreranno ancora il colore di background, che è importante per la leggibilità, e voi potete semplicemente modificare il valore del background-color per creare diversi schemi di colore con l’effetto immutato:

Fig. 2: Lo stesso codice ma con background-color: #0000a6;.

Lo scontro con la realtà#section8

Grande! Il design è fico e possiamo tornare al pub a mostrare ancora una volta i nostri magnifici esperimenti e forse a dare fastidio agli altri ridacchiando sotto i baffi mentre raccontiamo uno scherzo su “World of Warcraft” in “The Big Bang Theory”. Giusto? Beh… Non proprio. Abbiamo un problema. Il design appare molto meno di grandioso in quasi tutti i vecchi browser e davvero terribile nei browser veramente vecchi. Cosa possiamo fare?

Tanto per cominciare, per far sì che i browser trattino i nuovi elementi HTML5 in maniera appropriata, abbiamo bisogno di impostarli su display: block; nel nostro CSS:

hgroup, article, header, footer, section {
  display: block;
}

Poi, per far sì che IE ci permetta di assegnare uno stile a questi elementi HTML5 che non riconosce, dobbiamo creare delle istanze di questi ultimi nel DOM, in questo modo:

<script>
  document.createElement('article');
  document.createElement('section');
  document.createElement('hgroup');
  document.createElement('header'); 
  document.createElement('footer');
</script>

Ecco come appaiono le cose in alcuni dei vecchi browser:

Fig. 3: Firefox 3.6 su Windows: manca la maggior parte delle features, fatta eccezione per i web font e per la text shadow.

Fig. 4: Safari 4 su Windows: di nuovo, manca la maggior parte delle feature, fatta eccezione per i web font e le text-shadow.

Fig. 5: Opera 10.60 su Mac: tranne il gradiente, appare grazioso in Opera.

Fig. 6: IE 9: è presente la maggior parte del nostro design, ma text-shadow non è supportata e la box shadow è strana.

Fig. 7: IE 6–8: manca quasi tutto, tranne i web font.

La scelta dei browser su cui fare dei test ovviamente può variare a seconda del vostro target di utenti e di altri fattori.

Raccogliere i cocci#section9

Qui mi preoccupo principalmente per IE, dato che la maggior parte degli altri browser viene aggiornata piuttosto regolarmente, mentre IE soffre della sindrome da “imprigionamento nelle vecchie versioni”.

Data la situazione, la maniera più affidabile per sistemare i problemi di compatibilità cross browser è quella di usare JavaScript. Sì, lo so: è tutt’altro che ideale usare JavaScript per sistemare una mancanza di supporto dei CSS, dal momento che alcuni utenti potrebbero averlo disattivato e voi potreste scoprire che le vostre pagine hanno una latenza significativa come risultato dell’elaborazione di ulteriori bit. Ma io tendo a vederla in questo modo: se un utente naviga nel web con JavaScript disabilitato, la sua esperienza del web sarà comunque piuttosto pessima, per cui la perdita di una parte degli effetti visivi non lo influenzerà particolarmente. In termini di rallentamento delle pagine, dovrete valutarlo caso per caso.

Se siete ansiosi, potete testare adesso la versione aggiornata dell’esempio bling. Vediamo come ci sono arrivato.

CSS3 Pie#section10

Il piccolo aiutante che andiamo adesso a conoscere è CSS3 pie, una libreria JavaScript che aggiunge il supporto per border-radius, box-shadow, i gradienti ed i colori RGBa nelle vecchie versioni di IE.

Leggete “CSS3 Pie Getting Started” per avere le istruzioni su come usarla. Per farla breve: scaricate CSS3 Pie, “unzippatela”, caricatela sul vostro web server e poi aggiungete la seguente dichiarazione a tutti gli insiemi di regole CSS che volete che CSS3 Pie renda compatibili con IE:

behavior: url(path/to/PIE.htc);

Dobbiamo inoltre usare una versione speciale con il prefisso -pie- per la proprietà background-image che stiamo usando per applicare il gradiente CSS3 e cambiare quella particolare proprietà in background al posto di background-image, dal momento che CSS3 Pie non supporta i valori normali ma solo quelli shorthand. Quindi, con la nuova aggiunta appare così:

-pie-background: linear-gradient(60deg, rgba(255,255,255,0),
  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));

Le vecchie versioni di IE adesso rendono il design in questo modo:

Fig. 8: L’esempio visualizzato in IE8 con l’uso di CSS3 Pie per supportare le proprietà CSS3.

Ci siamo quasi, ma cosa succede al colore di sfondo? La risposta che mi sono dato, dopo un po’ di ricerche nei documenti di CSS3 Pie, è che mentre CSS3 Pie permette ad IE di rendere i colori RGBa, non può invece rendere il valore alpha. Al contrario, rende i canali RGB come completamente opachi. Utilizziamo la dichiarazione background per utilizzare colori solidi, non trasparenti, che IE può leggere in maniera appropriata.

Per capire quali colori usare, ho reso il mio “bling-esempio” in Opera con la box-shadow inset disabilitata e ho utilizzato l’utility “color picker” di Opera Dragonfly per scoprire quali colori c’erano ai bordi e a metà del gradiente.

Adesso che abbiamo questa informazione, possiamo aggiornare la riga del background di CSS3 Pie:

-pie-background: linear-gradient(60deg, #a600a6,#b630b6 50%, #a600a6);

Questo toglie alcuni di quei vantaggi di flessibilità di cui abbiamo parlato prima nella sezione “Opacità”, ma ci dà il seguente risultato in IE:

Fig. 9: L’esempio come viene visualizzato in IE8 con CSS3 Pie e con un trucco per il gradiente.

Molto meglio! Le uniche cose che mancano ora sono le text-shadow e la box-shadow inset, nessuna delle quali è supportata da CSS3 Pie. Questo complica un po’ la situazione, ma credo converrete con me che il risultato è molto più bello nelle vecchie versioni di IE.

Dove andiamo?#section11

Al momento non ho una risposta per la questione della box-shadow inset: speriamo che CSS3 Pie migliori presto il suo range di proprietà supportate. Per text-shadow c’è una libreria chiamataIE CSS3 che funziona in maniera molto simile a CSS3 Pie e che può aggiungere un limitato supporto per la text-shadow in IE. L’ho aggiunta nel mio esempio finale:

Fig. 10: L’esempio finale così come viene reso in IE8 con un supporto limitato per la text-shadow dato dalla libreria IE CSS3.

Come potete vedere, funziona solo sulla semplice text-shadow e non su multiple text-shadow: prendere o lasciare. Potreste anche considerare di falsificare l’ombreggiatura del testo usando i filtri di IE, ma verreste tacciati di impurità e sono funzioni proprietarie che potrebbero incidere ulteriormente sulla performance. Si veda Cross browser box shadows per un esempio riguardante i filtri di IE in azione.

Perché non usare semplicemente jQuery?#section12

Questa è una buona domanda: probabilmente si potrebbe ottenere la compatibilità cross-browser degli elementi CSS3 utilizzando una libreria JavaScript ed essere a posto così. Se ne avete le capacità, provateci, ma credo che questa sia la strada più semplice. Tutto quello che dovete fare qui è aggiungere dei CSS modificati e dei link JavaScript: non dovete scrivere molto codice JavaScript. Questo lo rende un approccio più puro e sicuramente più accessibile a quelli tra noi che non sono molto bravi con gli script (come me). Pensate a questo come a un piccolo ripiego finché non dovremo più supportare quei fastidiosi vecchi browser.

Conclusioni#section13

Spero che abbiate trovato utile questa esplorazione. Se avete più idee riguardo a come rendere le cose “blingtastic” funzionanti su tutti i browser, condividetele nei commenti!

Illustrazioni: {carlok}