Supporto CSS3 e HTML5 dei moderni browser
This entry was posted on October 28th, 2009 and is filed under Web Designing, browser.
E’ ormai un po’ di tempo che sono state rilasciate le nuove versioni di CSS e HTML e sono tantissime le innovazioni che hanno apportano. Il CSS3 è sicuramente più anziano del neonato HTML5 e quindi più conosciuto e utilizzato ma anche quest ultimo si sta facendo spazio velocemente tra le righe di codice dei moderni web designer. In rete ormai sono presenti tantissime gallerie di siti web realizzati interamente con questi nuovi linguaggi e guide, tutorial, discussioni sono ormai all’ordine del giorno.
Condizione necessaria per sfruttare queste due nuove versioni però è il supporto dei moderni browser a tali innovazioni. Quando si pensa ad un browser di nuova generazione viene quasi naturale fare le seguente associazione: nuovo browser = supporto dei nuovi standard. Purtroppo non è cosi; anzi, per essere più precisi bisogna affermare che con nessun browser è cosi.
Le prove a dimostrazione di tale affermazione ce le offre un nuovo servizio online rilasciato da poco tempo, FindMeByIp. Servizio che fornisce molte informazioni sulla nostra connessione, sul browser con cui navighiamo e sul supporto che ha il browser alle nuove versioni di CSS e HTML.
Prima di provare tale servizio ero a conoscenza che molte delle nuove proprietà del CSS3 e dei tags HTML5 non fossero supportati dai browser ma non credevo che i risultati fossero cosi sconcertanti.
Vediamo insieme cosa è venuto fuori analizzando l’ultima versione dei 5 browser più famosi e utilizzati al momento: Mozilla Firefox 3.5, Google Chrome 3.0, Opera 10, Safari 4, Internet Explorer 8. Ovviamente da tale analisi sono state escluse eventuali versioni non ancora definitive.
Firefox 3.5
Firefox 3.5 continua a perdere campo a favore di altri browser anche con la nuova versione. Ha dalla sua parte sicuramente una buonissima velocità di esecuzione di Javascript ma per avere un buon supporto bisognerà sicuramente attendere almeno la versione 3.7 che al momento risulta essere in pre-alpha.
Google Chrome
Il miglior browser è stato quello che ci aspettavamo, ovvero Google Chrome. D’altronde BigG ha sempre vantato questa caratteristica che lo contraddistingue dagli altri browser che hanno passato a pienissimi voti l’Acid Test. Mi ha però deluso il non supporto del @fontface, unica caratteristica comune a tutti gli altri browser.
Opera 10
La delusione più grande è stata, anche questa aspettata, Opera 10. E’ sicuramente un ottimo browser e mi è sempre piaciuto però purtroppo ha delle mancanze a volte fastidiose, una su tutte l’impossibilità di personalizzare il menù a tendina del tasto destro del mouse. Caratteristica che in alcuni progetti sia Internet che Intranet è spesso fondamentale ma, caratteristica cui bisogna rinunciare per garantire applicativi cross-browser. Come già si era a conoscenza non supporta il border-radius e veramente tante, forse troppe, proprietà per essere un browser molto giovane.
Safari 4
Safari 4 resta sicuramente uno dei migliori browser sotto ogni aspetto. Pieno supporto della maggior parte delle proprietà CSS (seppur come Firefox con proprietà personalizzate non validate dal W3C) ma ancora mancanza di supporto completo ad HTML5.
Internet Explorer 8
Ho lasciato per ultimo Internet Explorer perchè ovviamente il risultato non è una novita. Bisogna riconoscergli le grandi migliorie che la versione 8 ha portato ma pretendere di più è troppo presto secondo me. Si sono dovute risolvere le tantissime pecche che le versioni precedenti si trascinavano dietro e quindi già avere molti di quei problemi risolti è un gran vantaggio per tutti. Non ci resta che aspettare e sperare che col tempo migliorino le cose.
Purtroppo l’analisi è andata peggio di ogni altra aspettativa. Alla luce dei risultati ottenuti si scoraggerebbe anche il migliore degli ottimisti. Ho spesso partecipato a discussioni in cui ci si chiedeva l’utilità di passare molto tempo su queste novità se poi non possiamo applicarle ai nostri progetti. Purtroppo nemmeno le due proprietà del CSS3 che sono ampiamente utilizzate nell’ultimo periodo sono supportate da tutti i browser. Sto ovviamente parlando dell’opacity e del border-radius. Due caratteristiche sicuramente importanti che ci eviterebbero innumerevoli ammattimenti con script e/o immagini che sortiscono lo stesso effetto.
Ovviamente non c’è al momento una soluzione sicura e funzionante a tale problema e gli hack che si trovano in rete sono innumerevoli. Io per quanto possibile cerco di utilizzare alcune delle nuove caratteristiche del CSS3 proprio per “premiare” quegli utenti che hanno scelto un browser con esse compatibile. Non sempre è la scelta migliore ma quando il progetto lo consente aggiungo queste proprietà in un foglio di stile esterno a quello principale. Tale scelta è dovuta al validatore CSS che ancora di default analizza i fogli di stile con la versione 2 e che, giustamente, non supporta quelle proprietà ad hoc per Safari e Mozilla.
Non dimentichiamo però che gli obiettivi principali di un layout web sono quelli di essere conforme agli standard, accessibile e visualizzabile correttamente da tutti i browser in circolazione. Se l’utilizzo di tali proprietà non pregiudica nessuna delle 3 proprietà allora si può sicuramente incominciare a familiarizzare con queste nuove versioni.
Benvenuto! Mi chiamo
October 29, 2009 at 12:48 pm
Bell’analisi! A volte fare il punto della situazione aiuta!
Per quanto mi riguarda i CCS3 fatico ad usarli ancora come l’HTML5. Non mi piace l’idea che alcuni si, altri no.
Non capisco come famose aziende non cerchino di implementare in maniera totale queste caratteristiche. Parlo di browser come Safari e Chrome (lasciamo IE perchè mi viene la pelle d’oca solo a pensarci).
Il web cambierebbe moltissimo… non ti pare?
October 29, 2009 at 1:02 pm
Ciao Roberto,
grazie per il complimento.
Come tu hai detto lasciamo perdere IE che viene la pelle d’oca a tutti. Però un supporto non completo di tutte le tecnologie HTML5 al momento lo anche accetto dato che le ultime versioni dei browser sono state progettate prima che HTML5 uscisse definitivamente. Come ben saprai modificare la progettazione di un SW in corso d’opera è dannoso oltre che dispendioso. Magari non ammetto che il CSS3 uscito ormai da anni sia cosi ignorato.
Spero vivamente che dalla prossima versione di TUTTI i browser (ove per tutti si intende come sempre IE escluso, non vogliamo mica sognare
) ci sia il completo supporto perchè non avrebbe senso rilasciare una nuova versione altrimenti. Uno degli aspetti su cui si lavora tantissimo durante il developing di un browser è il supporto completo degli standard e poi mi rimani a versioni uscite da quasi un decennio?
Lasciamo stare che comunque siamo noi che ancora non potremmo progettare siti completi in HTML5/CSS3 ma è un discorso diverso. Gli sviluppatori non devono basarsi su questo ragionamento altrimenti non si andrebbe mai avanti.
Mi trovo in pieno accordo con te su tutta la linea.
January 1, 2010 at 9:08 pm
Purtroppo non è così: CSS3 NON È (al momento) uno standard, in quanto non è ancora uscito (altro che uscito da anni, come scrivi!): al contrario, da anni è in perenne corso d’opera.
http://www.w3.org/Style/CSS/current-work
L’ultimo standard CSS è il 2.1 che risale al 2004.
A mio avviso, prima che gli sviluppatori dei browser, a darsi una mossa dovrebbe essere il W3C: non capisco perché non rilascino una versione adesso. Per migliorarla (3.1, 3.5, ecc) c’è sempre tempo…
January 2, 2010 at 9:02 pm
Ciao Stemby,
innanzitutto buon anno e benvenuto sul blog.
Io posso capire che la versione “definitiva” (se proprio vogliamo essere puntigliosi e precisi al decimo) non sia ancora stata rilasciata ma, ciò non scusa gli sviluppatori dei browser.
Molto del work in progress del CSS3 sono dettagli che non vedremo utilizzati almeno per un altro paio di anni mentre ci sono alcune tecniche (pochissime a dir la verità) che ormai sono ampiamente utilizzate. A questo punto io non credo che per un produttore di browser supportare, almeno per il momento anche con proprietà non validate come Safari e Firefox, le caratteristiche più utilizzate:
– opacità
– bordi arrotondati
– font-face
sia un cosi impossibile lavoro.
Ora io non voglio difendere il W3C, infatti son d’accordo con te che anche loro stanno dormendoci su, però vedendo questo grande disinteresse da parte dei browser, anch’io mi dedicherei con più forze allo sviluppo del CSS per il Mobile che in questo periodo sta avendo un grosso boom. Dopotutto se una cosa sta avendo più interesse è ovvio che mi dedico più ad essa piuttosto che alle altre!
January 4, 2010 at 3:08 pm
Ciao, questo tuo ultimo intervento lo condivido in pieno.
Buon anno anche a te!
March 3, 2010 at 12:25 pm
Ottima risorsa, grazie per la condivisione
March 3, 2010 at 8:49 pm
Ciao Danilo,
grazie a te e benvenuto sul blog.