Gli utenti desiderano applicazioni funzionali, stabili ma, spesso, soprattutto “belle”. Gli aspetti visuali dell‘interfaccia hanno assunto negli ultimi anni un‘importanza che va ben oltre gli ormai consolidati concetti di usabilità e accessibilità. Effetti grafici, eleganza della visualizzazione, caratteri e colori stanno a poco a poco riacquistando quasi quel valore che un tempo avevano nella stampa tradizionale. CSS3 sembra offrire davvero molto in tal senso.
Ci avete mai pensato? Se per un attimo ci togliamo i nostri panni di “tecnologi” e guardiamo a sistemi operativi, applicazioni, siti web e quant’altro con gli occhi di un utente “normale”, ci rendiamo conto di come la prima cosa (a volte l’unica) ad essere presa in considerazione sia l’aspetto dell’interfaccia e il suo funzionamento. A chi usa il computer magari per un lavoro di amministrazione o quasi solamente per il social networking, quel che balza più agli occhi è l’interfaccia utente. Noi sappiamo bene che la GUI è solo una parte (peraltro fondamentale) di un sito o di una applicazione web, e sappiamo anche come sia difficile progettarla affinche’ sia usabile, accessibile, funzionale e anche esteticamente bella. Ma per il comune utilizzatore, l’interfaccia “è” l’applicazione, e questo è sempre più vero da quando le Rich Internet Application sono all’ordine del giorno.
Nella nostra “terna” tecnologica interdipendente (HTML5, CSS3, API JavaScript), molte delle caratteristiche connesse all’aspetto dell’interfaccia sono legate ai CSS: in questo numero vedremo in dettaglio tutta una serie di migliorie, nuove funzionalità e caratteristiche che rendono molto interessanti e piacevoli le novità di CSS3.
Come nel numero precedente, raccomandiamo ai lettori di utilizzare uno tra i browser attualmente già piuttosto abilitati alle novità (Google Chrome, Apple Safari, …) per la migliore visualizzazione degli esempi.
Introduzione a CSS3: il linguaggio si evolve in maniera modulare
Negli articoli precedenti sugli standard web abbiamo più volte accennato al lungo e per molti versi faticoso processo che porterà alla definizione di HTML5, indicando come possa diventare arduo specificare la stesura dell’intricato complesso di regole, strettamente connesse tra di loro e dipendenti dal sostegno di agenti esterni come i browser, che descrive lo sviluppo di un linguaggio fino alla sua completa espressione funzionale.
I fogli di stile a cascata (CSS), creati per definire gli aspetti visuali legati alle interfacce web (e non solo), hanno trovato la loro completa maturazione e accettazione da parte dei web designer intorno dello scorso decennio, quando finalmente le regole definite dalla versione 2.1 del linguaggio hanno trovato un supporto adeguato da parte dei browser.
Spostarsi da una situazione assodata (che si era finalmente stabilizzata dopo anni di travaglio) per sviluppare una nuova versione dei fogli di stile ha incontrato una certa resistenza da parte degli addetti ai lavori, che pure avvertivano il bisogno di far crescere le potenzialità dei CSS per la gestione grafica di layout complessi, delle interazioni nei moduli e sui link e più in generale per arricchire l’esperienza visiva di un sito web.
Lo sviluppo modulare di CSS3
Per ovviare a queste problematiche, Il W3C ha pensato di sviluppare la nuova release del linguaggio (CSS3), proponendola in forma modulare. Questo approccio, che divide i fogli di stile per argomenti, affidandone la definizione a gruppi di lavoro diversi e indipendenti che procedono con tempistiche proprie, ha permesso di gestire in maniera ottimale il lavoro. Non è necessario che tutta la stesura del linguaggio sia completata perche’ i browser possano supportarla: devono solo avere l’accortezza di gestire “in toto” un singolo modulo con tutte le sue proprietà.
Figura 1 – Schema della struttura dei principali moduli che compongono CSS3.
Si può utilizzare CSS3 già da adesso?
Come risulta dallo schema illustrato nella figura 1, esistono moduli CSS3 già pronti o in uno stato avanzato di sviluppo: conseguentemente le proprietà descritte in tali moduli godono già di un ottimo supporto da parte dei browser. Questi ultimi hanno incrementato notevolmente il ritmo di upgrade e contestualmente anche la velocità con cui possiamo disporre di strumenti aggiornati per implementare le ultime specifiche dei fogli di stile.
Utilizzo delle proprietà CSS3 in contesti e settori non critici
Detto questo, può essere rischioso utilizzare fino da ora le proprietà di CSS3 nei contesti e nei settori cruciali per il successo di un sito web, ovvero quelli che (come indica anche Dan Cederholm nel suo libro su CSS3 [3]) riguardano il branding, l’accessibilità, l’usabilità e la struttura del layout. Per adesso, è meglio riservare le nuove funzioni a caratteristiche accessorie come la gestione delle interazioni e dei feedback, la definizione delle transizioni di stato dei pulsanti e la creazione di ombre e trasparenze.
Degradare in maniera coerente
In questo modo, la mancata espressione della proprietà all’interno del browser non produrrà alcun danno e il sito rimarrà fruibile. Da parte nostra dovremo seguire una serie di linee guida nella scrittura del codice per fare in modo che la visualizzazione del sito abbia una degradazione visuale coerente nei browser meno aggiornati, in modo da non comprometterne il completo utilizzo.
Figura 2 – Esempio di pulsante che degrada in maniera coerente nei browser meno aggiornati.
CSS3 “core properties”
Le proprietà che possono essere utilizzate con relativa tranquillità e che comporranno alcuni degli esempi di codice dei prossimi paragrafi sono riportate nella figura 3.
Accanto a queste proprietà ne esistono altre già adeguatamente supportate come le “media queries” (un’estensione delle normali regole “@media”), il “multi-column layout” (per gestire l’impaginazione del testo su più colonne) e i “web fonts” (per l’uso dei font scaricabili tramite la direttiva “@font-face”). Ne parleremo in dettaglio nei prossimi articoli.
I nuovi selettori CSS3: la precisione diventa chirurgica
Il modulo del linguaggio CSS3 che è giunto al livello di sviluppo più avanzato è sicuramente quello dei selettori (Selectors).
Il potenziamento di tale argomento nasce dalla necessità di poter disporre di strumenti evoluti per la navigazione nella gerarchia ad albero di un documento (DOM) individuando in maniera precisa i singoli marcatori senza dover eccedere con gli attributi di tipo “class” o “id” nel codice HTML. Lo sviluppo di linguaggi a marcatori diversi da HTML (come ad esempio XML), impone anche un incremento delle tipologie dei selettori di attributo (che permettono di scegliere un elemento in base al valore di uno dei suoi attributi) oppure la necessità di selezionare gli elementi individuando nuove relazioni tra di loro (come la caratteristica di essere l’n-esimo figlio del suo genitore).
Selettori di attributo
I selettori di attributo erano presenti già nella specifica 2 del linguaggio, come risulta dall’immagine sottostante, ma godevano di un limitato supporto da parte dei browser. La versione 3 del linguaggio li ha incrementati e ha contribuito ad estenderne la compatibilità.
Pseudoclassi
Le pseudoclassi di CSS3 rappresentano una vera finezza nel campo dei selettori, perche’ permettono di individuare gli elementi in relazione ad una loro caratteristica univoca (come ad esempio il fatto di essere il quinto paragrafo di un articolo o il penultimo elemento di una lista). Importanti risultano anche i selettori che individuano i controlli delle form che sono stati selezionati o attivati.
Figura 6 – Lista delle pseudoclassi nei CSS level 3.
Utilizzando le pseudoclassi appena presentate è possibile ad esempio formattare in maniera differente le righe pari e le righe dispari di una tabella utilizzando le regole che seguono:
tr:nth-child(2n) {background: red}
tr:nth-child(2n+1) {background: yellow}
Pseudoelementi
Il concetto di pseudoelemento è estremamente interessante e dinamico, si tratta di selettori che permettono di individuare porzioni di un elemento che si trovano nella particolare condizione specificata dal selettore stesso.
Figura 7 – Esempio degli pseudoelementi nei CSS level 3.
Combinatore del fratello
Il combinatore del fratello è un selettore abbastanza generico che inquadra, all’interno di un medesimo genitore, tutti gli elementi di un certo tipo che ne seguano un altro (essendo entrambi figli dello stesso genitore).
Figura 8 – Esempio del combinatore del fratello nei CSS level 3.
Nell’esempio che segue abbiamo utilizzato tale selettore per controllare il colore del testo in tutti i paragrafi che seguono un titolo di secondo livello e che con esso hanno in comune lo stesso genitore.
h2 ~ p { color:#f00;}
Per chiamare il browser serve il prefisso?
Le nuove proprietà in via di definizione nei CSS3, come abbiamo accennato nei precedenti paragrafi, godono già di un buon supporto da parte dei browser più sensibili ai web standard. La situazione è però tutt’altro che omogenea perche’ da un lato le specifiche non sono consolidate, dall’altro i browser fremono per inserire le nuove funzioni.
Per garantire un supporto sperimentale alle proprietà CSS3 in via di definizione e per gestire la fase di sviluppo e testing di nuove caratteristiche da sottoporre al W3C in modo che possano diventare direttive ufficiali, i vari produttori dei browser hanno deciso di introdurre dei prefissi da aggiungere alle proprietà per renderle compatibili con il loro software.
Ad esempio, se desideriamo arrotondare gli angoli di un box possiamo utilizzare la seguente proprietà:
border-radius:6px;
Testando l’esempio su Firefox notiamo che non funziona; per essere efficace la proprietà deve essere riscritta aggiungendo il prefisso (-moz-):
-moz-border-radius:6px;
Di seguito viene presentata la lista dei prefissi relativi ai browser più diffusi.
Figura 9 – Lista dei prefissi relativi ai browser più diffusi.
OK, ma se per far digerire una regola ai vari browser devo scriverla in questo modo
-webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; transition: background 0.5s ease;
il rischio è quello di rendere il codice denso e ridondante. Va detto che la situazione è transitoria (in attesa che le specifiche vengano definite come Raccomandazioni); inoltre i prefissi sono legati a una proprietà univoca, stabilita dal W3C. In realtà i browser utilizzano i prefissi come un namespace per evitare errate interpretazioni della proprietà da parte degli altri (come se ogni browser circoscrivesse il proprio orticello).
È consigliabile ordinare le proprietà con i prefissi prima di quella “standard”, come accade nell’esempio di codice presentato sopra (con la proprietà “transition”). In questo modo, visto che il documento CSS viene letto dal browser in maniera sequenziale dall’alto verso il basso, le proprietà senza prefisso sovrascriveranno le altre nel momento in cui i browser saranno in grado di interpretarle.
Figura 10 – La gestione e la distribuzione delle proprietà ai vari browser richiede una certa pratica.
Un framework JS che funge da “centralino”: eCSStender
Aaron Gustafson è un membro del Web Standards Project (WaSP) e, per evitare che i “fork” di CSS3 complicassero la vita ai web designer, ha sviluppato il framework JavaScript eCSStender che permette di valutare il supporto dei browser per le proprietà dei fogli di stile ed eventualmente inserire le patch necessarie (ad esempio i prefissi che attivano la compatibilità).
Figura 11 – La home page del sito di eCSStender.
Le librerie di eCSStender devono essere inserite nella directory del sito web e collegate al documento HTML da verificare nel modo consueto:
Possono essere integrate con le estensioni per il supporto delle nuove proprietà CSS (come illustrato nella documentazione che consiglio di leggere sul sito di eCSStender[9]).
In questo modo è possibile scrivere i CSS3 secondo le indicazioni del W3C e mantenere il codice “pulito”, le librerie eCSStender eseguiranno cicli di test sul browser che sta visualizzando la pagina, e provvederanno, eventualmente, ad aggiungere le estensioni/prefissi necessari per attivare le funzioni definite nel foglio di stile.
Le “core properties” in dettaglio: esempi di codice
Passiamo adesso in rassegna il codice da utilizzare per gestire con la massima compatibilità le proprietà presentate all’inizio dell’articolo (gli esempi sono disponibili nell’allegato scaricabile dal menu in alto a destra).
Arrotondare gli angoli dei box
La possibilità di arrotondare gli angoli dei box rappresenta un’importante novità di CSS3, soprattutto per la semplicità con cui si arriva ad ottenere il risultato rispetto a cosa si era costretti a fare con i CSS 2.1 (inserire le 4 immagini degli angoli stondati su 4 elementi nidificati).
.eqRound {
-moz-border-radius: 20px;
border-radius: 20px;}
Per poter impostare un raggio di stondatura diverso per i 4 angoli del box occorre utilizzare una variante della proprietà precedente (in cui si indica con esattezza la posizione dell’angolo da smussare).
.difRound {
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 10px;}
Tutti i browser oggetto di studio tranne Firefox riconoscono le proprietà senza che sia necessario utilizzare i prefissi.
Gestire le ombre sui box e sul testo
Per mettere in risalto un box HTML potrebbe essere utile contornarlo con un’ombra, con la proprietà illustrata sotto è possibile in sequenza: indicare lo spostamento dell’ombra in senso orizzontale e verticale (i valori positivi spostano a destra e in basso, il contrario per i valori negativi). Il terzo valore rappresenta la sfocatura dell’ombra (che aumenta con il valore, si utilizza 0 per ottenere un ombra dai contorni netti), il quarto valore utilizza una notazione esadecimale per definire il colore dell’ombra.
.boxShadow {
-webkit-box-shadow: 6px 4px 8px #333;
-moz-box-shadow: 6px 4px 8px #333;
box-shadow: 6px 4px 8px #333;}
Figura 13 – Ecco come si presenta un box ombreggiato nel browser Safari.
Internet Explorer e Opera riconoscono la proprietà in maniera nativa, senza prefissi. Con una proprietà differente, ma che agisce utilizzando gli stessi valori, è possibile ombreggiare i testi HTML.
.textShadow {
color:#FFF;
text-shadow: 2px 3px 4px #333;}
Figura 14 – Ecco come si presenta il testo ombreggiato nel browser Firefox.
In questo caso l’unico browser che non applica la proprietà è Internet Explorer.
Gestione dei colori in RGB e dell’opacità
Qua non si analizza una proprietà, ma piuttosto un modello per la gestione del colore e della trasparenza introdotto con i CSS3 (i tre valori iniziali rappresentano i valori RGB del colore e il quarto indica l’opacità con un range che va da 0 a 1, anche con valori decimali).
.coloRGBA {
background-color: rgba(153, 51, 51, 0.5);
color: rgba(255, 204, 102, 0.8);}
Figura 15 – Ecco il risultato della gestione di colori e opacità con RGBA visualizzato in Opera.
La proprietà indicata sotto permette di definire l’opacità di un elemento con valori che vanno da 0 (elemento completamente trasparente) a 1 (elemento completamente opaco).
.opa {
opacity: 0.5;}
Utilizzo di immagini multiple di background
La possibilità di inserire e posizionare immagini di background multiple all’interno di un singolo elemento HTML (inserendo una sequenza di URL separate da virgola), spiana la strada per la realizzazione di layout complessi senza appesantire il codice. Le immagini si stratificano in relazione all’ordine di chiamata (quella indicata prima è posizionata su un livello superiore).
.multiBack {
background:
url(img/image_01.gif) top left no-repeat,
url(img/image_02.gif) bottom right no-repeat,
url(img/image_03.jpg) center center no-repeat;}
Figura 16 – Ecco come si presentano le immagini di background multiple nel browser Chrome.
Conclusioni
Abbiamo appena visto come i CSS3, pur lontani dal diventare una Candidate Recommendation, possano essere utilizzati fin da ora nelle nostre pagine web rispettando alcune semplici regole di ordinamento delle proprietà e prestando attenzione alla degradazione corretta delle nuove funzioni.
Personalmente avrei preferito un supporto diretto dei browser alle proprietà CSS3 senza la necessità di utilizzare i prefissi (come sta facendo Opera e la versione 9 beta di IE), ma è comunque apprezzabile la velocità con cui vengono integrate le nuove proprietà nei browser.
Nel prossimo articolo affronteremo in dettaglio quelle funzioni CSS3 che contribuiscono a rendere più appagante la fruizione di un sito da parte degli utenti (la “tipografia”), integrandola con transizioni e animazioni. Finalmente i fogli di stile prenderanno vita.
Riferimenti
[1] Il sito del WHATWG
[2] La recentissima Editor’s Draft di Ian Hickson sul sito del W3C
http://dev.w3.org/html5/spec/Overview.html
[3] Dan Cederholm, “CSS3 for Web Designers”, A Book Apart, 2010
[4] L’articolo di Roger Johansson che espone le caratteristiche dei selettori CSS3
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
[5] I blog dei principali browser dove si possono trovare le specifiche di compatibilità delle regole CSS3.
http://dev.opera.com/articles/css
[6]Il sito di CSS3 generator, per la scrittura e il testing “al volo” del codice CSS3.
[7] Il sito “When can I use …”, un’utile risorsa per la verifica della compatibilità delle nuove proprietà.
[8] La traduzione italiana dell’articolo di Aaron Gustafson che presenta le funzionalità di eCSStender.
http://www.italianalistapart.com/articoli/21-numero-9-6-luglio-2010/77-basta-fork-con-css3
[9] Il sito di eCSStender, per la gestione “automatica” dei prefissi dei browser.
[10] Jeremy Keith, “HTML5 for Web Designers”, A Book Apart, 2010
[11] Il sito di HTML5Rocks che fornisce una nutrita serie di esempi