CSS 3: è il momento giusto per utilizzarli?

CSS 3 è il momento giusto per utilizzarli

La bozza di codice CSS3 ha suscitato entusiasmo fin dal momento del suo annuncio, vedere poi i primi browser (tutti, tranne IE) che cominciavano a supportare queste fantastiche proprietà, rendendo semplici le cose più rognose da realizzare ha mandato in visibilio numerosi web-designer che hanno deciso di dedicarsi anima e corpo a questa novità, insieme ad HTML5.

Il linguaggio HTML definisce la struttura, la parte fondamentale del sito, e lasciarla in balìa di un codice non standard, o di librerie js che dovrebbero far girare siti in HTML 5 su browser non compatibili (come Modernizr) è comunque un rischio.

Diverso è il discorso sul codice CSS che, per definizione, definisce la presentazione.

Per quanto riguarda HTML 5, ti consiglio quest’ottimo intervento di Roberto Scano riportato in un articolo di Laura Gargiulo, che mi trova completamente d’accordo: utilizzare la specifica HTML 5 su progetti commerciali non è la scelta giusta, ma nulla vieta di sperimentarlo sui propri siti personali.

La presentazione

Un sito ben strutturato, è visibile e comprensibile a prescindere dal CSS impostato o meno: certo non sarà bellissimo, un web senza CSS risulterebbe un po’ monotono e noioso, non potremmo riconoscere a colpo d’occhio il sito in cui ci troviamo magari dai colori o dalle immagini di sfondo… però continueremo a fruire delle informazioni che il web ci offre.

Questo vuol dire solo una cosa: che il CSS è un accessorio. Senza il quale non ti sogneresti di creare un sito, ma comunque un accessorio.

Sembra brutto a dirlo o anche a pensarlo, da web-designer o da appassionati del settore, ma è così. D’altro canto, questa triste verità ci dà l’agio di poter sperimentare in maniera molto più libera, perché l’importante è che il sito sia fruibile. Oltretutto esistono le vie di mezzo, non è detto che tra un web-design strabiliante e una pagina senza formattazione non ci sia qualcosa di “carino”.

CSS 2.1 ha stretto amicizia con CSS 3

La cosa più bella è che impostare lo stile con CSS 3 non vuol dire rinunciare al CSS 2.1, per cui l’idea sarebbe di creare un bel sito con CSS 2.1, visibile a tutti i browser attualmente in circolazione, e poi renderlo ancora superiore grazie a CSS3, per migliorare l’esperienza utente di chi usa dei browser moderni (o anche no, utilizzando javascript).

Ti chiedi come faresti senza quell’ombra dietro al titolo che rende così armonioso il tutto? Pensi forse che siano necessari quegli angoli arrotondati? Non vuoi rinunciare al gradiente, o all’ombra interna di quel box?

Probabilmente saprai che quelle che ti ho elencato sono proprietà definite da CSS 3, proprietà che migliorano l’estetica e per questo non “assolutamente necessarie”. Ma per realizzare gli effetti di queste stesse proprietà, in un passato recente, sono state utilizzate tantissime tecniche, ognuna con i suoi problemi.

Gli angoli arrotondati sono senz’altro uno dei cambiamenti più evidenti ed emblematici: “un simbolo della rivoluzione”.

Angoli arrotondati

Gli angoli arrotondati sono diffusi da molto prima della bozza di CSS 3, già ai tempi del design a tabelle: angoli arrotondati (ma anche retti) venivano disegnati nelle piccole immagini da mettere a bordo tabella.

Avanti negli anni, quando si sono iniziati a diffondere div e CSS, le tecniche sono cambiate e ce ne sono diverse ancora in voga, tutte prevedono l’utilizzo almeno di un’immagine (che contenga tutti e quattro gli angoli, oltretutto piuttosto grande),  e l’aggiunta di tag HTML non semantici in numero superiore a seconda della flessibilità richiesta.

Ad esempio, se il tuo div con id “box” deve avere gli angoli arrotondati non potrai mettere semplicemente un’immagine di sfondo con gli angoli arrotondati all’interno del #box perché se l’utente dovesse ridimensionare il testo, questo potrebbe strabordare dal tuo box.

Dovrai quindi impostare due immagini di sfondo, e dato che questa è un’altra proprietà aggiunta da CSS 3, l’unico modo per farlo nelle versioni precedenti è quello di aggiungere un tag non semantico a cui dare il secondo sfondo (sempre la stessa immagine ma posizionata diversamente). In questo modo, ridimensionando il testo, anche il box si ingrandisce di conseguenza.

Se il layout fosse fluido (cioè si ridimensionasse orizzontalmente in maniera automatica a seconda della larghezza della finestra del browser), dovresti aggiungere ancora mark-up non semantico e dare ad ogni tag il suo angolo di sfondo.

Esistono molte tecniche che cercano di ridurre al minimo il mark-up non semantico, ma la quantità di codice necessaria è sempre tanta, e anche le righe di CSS non sono poche.
Guarda ad esempio questa tecnica: 6 div, un paragrafo, un’immagine di sfondo e ben 35 righe di codice CSS.

Per una cosa non necessaria come l’estetica di un box mi pare davvero eccessivo.
E’ vero, si potrebbe migliorare, ma non si potrà mai arrivare alla stessa sintesi di CSS3.

Per realizzare l’effetto con CSS3 infatti basta il paragrafo (magari con una classe assegnata), e la proprietà border-radius, in cui vanno specificati il numero di px del raggio.

In realtà per il momento è necessario scrivere un codice tipo questo:


-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

per far sì che il tutto sia visibile sui browser basati su webkit (Safari e Chrome) e su Firefox (prefisso “moz”); mentre Opera e le nuove versioni di Safari si accontentano del semplice “border-radius”.

Ovviamente Internet Explorer non supporta nulla di tutto questo, fino alla versione 9, per la quale però sembra sia necessario dichiarare il raggio di ogni angolo (es: border-radius: 15px 15px 15px 15px;).

Bordi, ombre, gradienti e tante belle cose… ma IE?

Per i gradienti o le ombre interne ai box avrai sempre usato le immagini di sfondo, a volte anche per quelle esterne, anche se avrai riscontrato dei problemi simili a quelli degli angoli arrotondati.

Per gli effetti d’ombra sul testo, avrai preferito usare qualche immagine che rendesse l’idea, ma CSS 3 ha delle soluzioni sintetiche e veloci per ognuna di queste cose.

Forse però sei una di quelle poche persone che si preoccupano ancora (giustamente) degli utenti di Internet Explorer, soprattutto delle versioni precedenti alla 9 (dato che su XP non è possibile fare l’upgrade).

Devo dirti che però in questo caso non c’è nulla di cui preoccuparsi. Se il tuo sito è strutturato bene, gli abbellimenti aggiunti con CSS 3 sono solo decorazioni che renderanno il sito più gradevole alla vista degli utenti di altri browser di quanto già non lo sia senza di queste accortezze. E gli utenti di IE non ne sentiranno la mancanza.

Dopo aver capito questo però, posso dirti che è possibile comunque utilizzare una libreria js, come CSS3PIE, di facile implementazione, che riesce a renderizzare le proprietà CSS 3 anche su Internet Explorer 6-8.

Allora, posso utilizzare CSS 3?

Alla luce di queste riflessioni, la mia idea è che sia possibile usare CSS 3, sempre meglio se su progetti su cui si ha il controllo, in modo da poter aggiornare il codice all’occorrenza.
I vantaggi sono indubbi: pagine più leggere, mark-up più semantico, facilità di modificare un effetto senza dover entrare per forza in un editor di immagini, ma cambiando solo qualche parametro.

Gli svantaggi risiedono nel fatto che non è ancora uno standard, per cui delle specifiche potrebbero essere soggette a cambiamento (anche se si sa, gli standard li portano i browser, se la maggior parte dei browser ha già implementato delle funzioni è difficile che queste spariscano), e per lo stesso motivo non è utilizzabile nei siti delle PA. L’altro svantaggio è la mancanza di compatibilità con IE, che abbiamo visto come aggirare in maniera più che accettabile.

A fronte dei pro e contro, tra CSS 3 e vecchie tecniche, direi che il titolo di vincitore è sicuramente di CSS 3.

Ma come utilizzarlo?

Il mio consiglio è quello di scrivere le proprietà CSS 3 in un foglio di stile separato dal resto, in modo che il ritrovamento del codice sia più immediato e sia più facile cambiarlo se ci dovesse essere la necessità.

Link utili e conclusione

Proprio mentre ultimavo la stesura di questo articolo, tra i miei feed è comparso quest’articolo di Dave Sparks su Smashing Magazine, è molto approfondito e mostra degli esempi reali rispetto al discorso appena fatto, oltre a segnalare altre librerie javascript per il supporto CSS 3; ovviamente ti consiglio di leggerlo.

Vorrei segnalarti poi quest’utilissima tabella di compatibilità CSS 3 e HTML 5 con i vari browser e questo comodo tool che genera il codice CSS 3 in base ai parametri da te impostati, così potrai iniziare ad utilizzare il codice CSS 3 nei tuoi progetti, anziché valanghe di mark-up non semantico e di immagini di sfondo.

Oppure già lo stai utilizzando da tempo? Utilizzi qualche libreria js per la compatibilità oppure non ti interessa? Fammi sapere cosa ne pensi!

L'autore

Appassionata di web-design e web-designer di professione, ha una conoscenza approfondita dell'(x)HTML/CSS, ama sperimentare script in PHP e javascript ed è sempre pronta ad apprendere nuove tecniche. Per i siti preferisce uno stile sobrio con particolare attenzione all'accessibilità e all'usabilità, e soprattutto a quello che c'è sotto la scocca: il codice, rigorosamente standard.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

36 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo