No. 186

Titolo originale: CSS3 Bling in the Real World

Pubblicato in: CSS

Scritto da Chris Mills

Tutti voi designer disco-dancer (niente più allitterazioni d'ora in avanti) amate le nuove caratteristiche che CSS3 mette a vostra disposizione per fare siti cool in maniera più semplice, con meno hack e più chiarezza. Features come i gradienti, le drop shadow, gli angoli arrotondati, le animazioni e l'opacità di CSS3 ci permettono di passare meno tempo in Photoshop, di usare meno div annidati in modo orrendo, di avere più flessibilità e di divertirci di più! Per non parlare di tutto quel tempo in più che possiamo passare al pub, mostrando entusiasti ai nostri amici i nostri ultimi esperimenti sull'iPad, mentre sorseggiamo una pinta di birra con un'aria intensa di auto-appagamento e compiacimento! Dobbiamo ammetterlo: la maggior parte di noi ha provato questa fantastica sensazione!

La nuova specifica CSS3 permette perfino ad un progettista amatoriale reo-confesso come me di produrre dei design piuttosto gustosi. CSS3 è qui, CSS3 è divertente e CSS3 ci permette di far evolvere man mano l'aspetto del web. Almeno, questa è la teoria, ma la realtà è un po' diversa:

  • 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?

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

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

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

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

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

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à

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à

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:

L'esempio come viene reso in Firefox 3.6

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

L'esempio come viene reso in Safari 4

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

L'esempio come viene reso in Opera 10.60

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

L'esempio come viene reso in IE9

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

L'esempio come viene reso in IE8

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

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

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.

Valore originale rgba(255,255,255,0) sopra a #a600a6 rgba(255,255,255,0.2) sopra a #a600a6
Valori aggiornati #a600a6 #b630b6

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?

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?

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

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: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Chris Mills

Chris Mills è un web technologist, un evangelizzatore degli open standard ed un “education agitator”. Attualmente lavora per Opera Software. Passa la gran parte del suo tempo scrivendo articoli sugli standard web per dev.opera.com. Fuori dal lavoro è un batterista heavy metal, padre orgoglioso di tre figli e amante della buona birra.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA