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
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
36 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ciao Anna! Grazie della citazione innanzitutto!
Non puoi che trovarmi d’accordo e ti ringrazio per le molte risorse citate, qualcuna non la conoscevo, ora me le vado a spulciare!
Ciao Laura, figurati, penso seriamente che articoli come il tuo siano importanti: su certe innovazioni è meglio tenere i piedi per terra, ma molti prendono il volo senza nemmeno farsi due domande!
Grazie del tuo commento e buono “spulciamento” delle risorse, anche se credo che avrai già finito :)
Ottimo articolo, solo due cose vorrei sottolineare:
– Border Radius ha già raggiunto il suo stato di last call quindi i prefissi di software ( come -moz- , -webkit- o -o- ) si possono anche eliminare;
– L’idea del doppio foglio di stile vista la presenza di librerie che si includono nella regola css attraverso behavior .
I file che io utilizzo per la compatibilità sono:
– Css3 PIE
– Css Reset di 960grid
“- Border Radius ha già raggiunto il suo stato di last call quindi i prefissi di software ( come -moz- , -webkit- o -o- ) si possono anche eliminare;”
Ma anche no! Chi continua a utilizzare browser come Firefox in versione 3.6 e inferiori non ha il supporto per la regola border-radius quindi non avresti la retro-compatibilità.
Ciao Rocco, grazie per il tuo commento e per i complimenti. Per quanto riguarda border-radius i miei dubbi in merito erano proprio sulle risposte che hanno dato dopo Simone e Riccardo, e cioè la compatibilità con le versioni precedenti dei browser che lo supportavano con il prefisso e ora non ne hanno più bisogno (nelle ultime versioni).
Va bene che CSS3 è un in più, ma per due righe di codice rendiamolo disponibile anche a chi non ha aggiornato Firefox o Safari all’ultima versione! :)
Sul doppio foglio di stile mi trovi d’accordo, come dicevo, anche per una questione di facilità nel modificare/aggiornare il codice.
Grazie della tua condivisione e a presto :)
Ciao,
bell’articolo e abbastanza utile!
Mi hai convinto ad usare tutto il css3 possibile. Io qualcosa la utilizzavo già (il border-radius ad esempio) e in alcuni progetti ho usato anche rgba() ma non più di tanto per via di IE. Ho deciso ora di iniziare ad usare più css3 e “fregarmene” in parte di IE. Gli utenti secondo me devono iniziare a capire quali browser utilizzare e quali evitare.
Ciao Nicola, grazie del tuo commento.
Fregartene di chi usa IE, per aggiungere abbellimenti grafici è più che corretto, assicurati solo che anche su IE il risultato sia fruibile. Va bene indirizzare l’utente sui browser migliori, ma si può obbligarlo a cambiare, anche perché spesso dietro a un browser obsoleto ci sono politiche aziendali restrittive o l’incapacità dell’utente di far fronte a un aggiornamento, e non la voglia di restare fedeli a IE :)
Bellissimo articolo…
Io utilizzo da molto i css3 e ne ho sempre dovuto fare a meno con IE, quindi diciamo che fin’ora ho utilizzato i css di “ultima generazione” solo come abbellimenti e non come regole su cui fondare i layout dei miei progetti.
Ho provato inoltre 2 o 3 volte ad utilizzare librerie come css pie ma devo dire che presentano ancora molti problemi e bug e pertanto sono giunto alla conclusione (perdendoci anche una discreta quantità di tempo, che per noi freelancer è preziosissimo!) che è bene non usare quelle librerie per progetti di elevata dimensione..
Ciao Giacomo, grazie dei complimenti!
Penso, come avrai capito, che il tuo approccio sia quello giusto, almeno in questo preciso momento storico.
Sono d’accordo con la tua conclusione anche se a me CSS PIE ha funzionato sempre alla grande, tu che tipo di problemi hai riscontrato?
Io ho già implementato i CSS 3sul mio sito……Io sono della filosofia se posso già usarlo,xkè non farlo?
Sempre per la grande percentuale di utenti che utilizzano IE.. L’importante è usarlo in modo che non danneggi la visualizzazione sul deprecato IE..
Ciao Ivan,
Potrei dirti: dato che la mia auto arriva a 220 km/h, perché andare a 50 in città e a 130 in autostrada?
Per il resto vale la risposta di Giacomo ;)
Articolo ben fatto! Ricostruisce un po’ “la storia” a dovere.
In effetti anche un po’ la questione della browser compatibilty è un po’ da rivedere alla fine…
Grazie Rocco per aver nominato CSS3 PIE! TI farò una statuetta :D ma solo perchè ho poca creta in casa! Eheh :D
Ciao raozuzu, non ti offendi se ti faccio notare che di CSS PIE ne avevo parlato anche io nell’articolo, vero?:)
Anche io utilizzo già per i siti personali css3, chi usa internet exploder per navigare avrà una visione più brutta della “realtà” e se lo merita anche visto che usano quel coso! non conoscevo css3generator è un ottimo tool! :-D
ciao
Dai, poveri utOnti! Non è sempre colpa loro… :)
Comunque ci sono delle situazioni in cui si può usare tranquillamente sia CSS3 e HTML 5, infatti in questi ultimi mesi sto sviluppando solo siti in HTML5 e CSS3 per la Web TV.
Qui hai la possibilità di utilizzarli senza avere nessun problema e senza usare escamotage, anzi ci sono società che quasi obbligano il loro utilizzo.
Comunque complimenti per l’articolo
Ciao Salvatore, grazie dei complimenti.
Ovviamente l’articolo si rivolge a un discorso più generale, anche se quando si tratta di video, diventa fondamentale anche l’uso di html5 in caso di assenza di flashplayer.
Il fatto che delle società obblighino all’utilizzo di html5 o css3 senza “escamotage” per la corretta visualizzazione su browser meno moderni, non mi sembra però una legittimazionead usarli, ma un errore da parte di queste società.
Bell’articolo…
CSS3 Tutta la vita..
…O almeno fino alla prossima novità! :)
Grazie Ruben
Articolo interessante così come quello comparso settimana scorsa su Smashing Magazine.
Fra le altre idee che circolano in rete e che appoggio pienamente c’è quella di forzare o meglio consigliare agli utenti l’aggiornamento del prorpio browser, quando vecchio, o il passaggio a uno di ultima generazione per una migliore visualizzazione del sito.
Ciao Domenico, grazie del commento.
L’idea che citi non mi trova d’accordo: consigliare l’utente sì, ma forzarlo è sbagliato. Come dicevo commenti addietro, spesso dietro un browser datato ci sono politiche aziendali che non permettono l’aggiornamento o degli utenti che non sono effettivamente in grado di farlo e non capiscono neanche di cosa stai parlando.
Ripeto: consigliare sì, obbligare no.
Qualche proprietà CSS3 possiamo già utilizzarla, magari qualcosa di semplice che non influisca sul risultato finale in caso di problemi di compatibilità.
Per il resto è tutto allenamento, la strada è quella … prenderla prima, prenderla dopo … meglio prima :)
Ottimo tool alla fine dell’articolo!
L’importante è avere una buona base di CSS2, poi puoi metterci tutte le specifiche CSS3 che vuoi.
Sono contenta che tu abbia apprezzato la segnalazione :)
Anch’io sto iniziando ad utilizzare le tecniche CSS3 nei miei lavori, ma sinceramente cerco sempre di non esagerare…almeno per adesso.
Credo sia un buon approccio.
Penso che sia giunta l’ora di usare i css3, rende la vita davvero più facile e permette di creare una user experience maggiore.
@Rocco Passaro: omettere i -webkit e -moz e’ un suicidio! fai conto che tutti coloro che hanno ff3 o browser più obsoleti sono tagliati fuori! inoltre non tutti (vedi gli utenti di winxp) hanno la possibilità di installare IE9 pertanto anche l’uso di css PIE e’ doveroso.
Ciao Riccardo, sono d’accordo con te, seppur con tutte le attenzioni che ho specificato nell’articolo.
Io personalmente non condivido l’utilizzo di più fogli stile per separare css3 e css2 anche xè non passare la validazione css al momento non significa davvero nulla… E cmq creeremmo un foglio a parte comunque non valido. Tolto questo, io sto facendone già un buon uso tuttavia vedo che i vari js scazzano tra di loro spesso. Per esempio CSS3 PIE fa conflitto con IE7.js e questo a mio avviso è un grosso problema. Rinuncio alle ombre e ai bordi o alla possibilità, ad esempio, di sitlizzare i campi input usando gli pseudoselettori anche su ie6? Ritengo che ogni progetto faccia storia a sè, di certo però se solo questi 2 script andassero a nozze sarebbe già davvero tanto no?
Ciao Davide,
Veramenre io non avevo proprio pensato alla validazione: il motivo per cui suggerivo due fogli di stile è per l’ordine e la comodità di ritrovare il codice che potrebbe subire variazioni e poterlo aggiornare in maniera più agevole. Poi ognuno ha il suo metodo di lavoro e sa come giostrarsi tra i suoi CSS :)
Non sapevo dei problemi di compatibilità tra le due librerie, non mi è mai capitato di doverle usare assieme fin’ora. Ovviamente io ti direi di rinunciare a bordi, ombre e CSS3 vari, in quanto la funzionalità ha la precedenza sull’estetica, ma sono d’accordo con te che sarebbe meglio se funzionassero tutti e due assieme.
Ancora meglio sarebbe se le accorpassero!
Del corso universitario che ho frequentato, sono molto contento del fatto che mi abbiano inculcato l’openness e l’uso degli standard.
Sono sempre stato a favore dell’uso precoce di queste funzionalità, scalano senza alcun problema senza alterare l’impaginazione :)
Riguardo l’uso di framework javascript che esercitano la portabilità di certi effetti, sono totalmente in disaccordo sul definirli “una necessità”; per principio io sono per non adottarli e lasciare che il buon codice permetta la scalabilità in automatico; sarà lo specifico progetto a determinarne la necessità.
Anche se ormai argomento deprecato, faccio presente che non servono tutte quelle righe di codice per implementare i bordi arrotondati: l’errore è che nell’esempio (e nella maggior parte dei tutorial in giro, copiati uno dall’altro) si adotta un “ragionamento diretto”, ossia di mappare l’angolo TL, per es, in quella posizione. La creazione di uno sprite accurato ed il corretto annidamento dei tag permette di dimezzare la quantità di codice, oltre che alla possibilità di aggiornare il border-radius semplicemente caricando UNA immagine, invece di quattro o di andare a toccare il codice dove sono specificati i px.
Scusami Flavio, ma io non ho mai detto che delle librerie javascript siano necessarie, sostenendo completamente il contrario.
Anche per quanto riguarda i bordi arrotondati, ho preso un tutorial qualsiasi, proprio perché come hai fatto giustamente notare sono più o meno tutti uguali, specificando che si poteva migliorare, intendendo proprio il modo che hai detto tu e che come ho detto infatti conta almeno un’immagine e del mark-up comunque non semantico (anche se poco).
Quindi sono contenta che tu sia d’accordo con quanto scritto e grazie del tuo commento.
Scusa ho fatto un pastone senza specificare… ho scorso i commenti e ho trovato chi ne parlava definendoli “necessari” ;)
Sugli angoli ho commentato perchè dicevi della necessità di usare almeno due immagini per avere un box fluido (il sistema sliding-doors insomma) quando ne può bastare una, così come il problema non è tanto il CSS che -se ricordo bene il sistema che adottavo- richiede 5 righe (1 per angolo + 1 caricamento img – scrivendo minificato); ma certamente la non-semanticità dell’HTML. Per fortuna comunque non dobbiamo più preoccuparcene! :)
Ah okay, ora è più chiaro :)
Comunque sugli angoli dicevo questo:
(…) [le tecniche] 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.
nice review ,and awesome article thanks for the post, I found this blog just yet but I am adding you to my bookmarks
Non conoscevo questo sito, pardon, e ho letto, incuriosita, questo interessante articolo solo ora, anche se ormai siamo nel 2013 e penso che le cose siano cambiate (tranne che per IE, sempre in cronico ritardo..).
Nel mio sito amatoriale, finora, ho fatto un uso estremamente moderato di border-radius e ombreggiature, che, a mio avviso, sono più che altro degli orpelli che non devono inficiare l’usabilità di un sito, ma vedo che ormai c’è stata proprio un’esplosione.
Riguardo l’argomento update, a mio parere, sarebbe opportuno spiegare agli utenti che aggiornare i browser è un guadagno in primis per loro, anche se è pure vero che tanti non lo fanno, per un motivo o per un altro. Tuttavia, per quanto sia favorevole a una moderata retrocompatibilità sono assolutamente contraria ad usare un hack o un qualsiasi altro espdiente proprietario per far digerire un abbellimento puro a I.E., con la conseguente invalidazione del mio foglio di stile. Tuttavia, ultimamente uso IETester (sui miei pc ho IE 10) e i risultati su questi orpelli sono francamente disarmanti, e purtroppo, stando a quanto mi riportano i contatori, la maggior parte dei miei visitatori windowsiani girano ancora con le vecchie versioni di IE.. addirittura qualcuno con il 5.. lascio a voi tirare le conclusioni. Perciò mi piacerebbe poter implementare questo PIE consigliato nell’articolo. Ho scaricato lo zip e dentro ci ho trovato diversi files, .js, .htc e .php. Qualcuno gentilmente potrebbe indicarmi come devo fare? Grazie.