Da qualche anno si dice che i CSS3 siano alle porte.... tuttavia anche se la loro ufficializzazione ora è prossima (
si parla di metà 2014) il supporto da parte dei browser rimane estremamente frammentato .
Ma nonostante tutto alcuni webdesigners li usano, merito principalmente di
Mozilla e
Apple che hanno deciso di supportare subito questo nuovo standard nei loro browser anche se non è ancora stato ufficializzato. Per quanto riguarda Apple poi tramite i suoi dispositivi iPod Touch, iPhone e iPad che (
volenti o nolenti) registrano milioni di vendite, il browser Safari è diventato il più diffuso in ambito mobile. Questa non è affatto una cosa da sottovalutare perché appunto significa che se stiamo realizzando pagine web "dedicate" al mobile o a quei dispositivi possiamo già utilizzare gran parte delle nuove proprietà CSS3!
A questo punto facciamo un po di chiarezza e qualche considerazione:
Cosa sono i CSS3?
Sono il prossimo standard per i Cascading Style Sheet (
lo standard attuale è il 2.1), permetteranno di realizare in una riga di codice molti effetti interessanti tra cui:
angoli arrotondati, ombre per box e testi, immagini di sfondo multiple, web fonts, testi multi colonna e colori con trasparenza... insomma tutte quelle cose per cui bisogna attualmente ricorrere a barbatrucchi!
Se volete vedere qualche esempio di questi effetti, munitevi di un browser che supporti i CSS3 (
leggete il paragrafo qui sotto) e andate su
css3.info !
Chi li supporta?
Data la frammentazione nei supporti delle proprietà CSS3 la cosa migliore è affidarsi alle tabelle di sintesi di
Can I use? che ci permettono di scoprire
ogni singola proprietà come viene supportata dai vari browser passati, presenti e futuri. Tutti i valori vengono aggiornati con una buona frequenza il che ci permette di utilizzare questo sito come punto di riferimento ogni volta che iniziamo un nuovo progetto nel quale vogliamo implementare alcune di queste nuove possibilità.
Firefox e i browser a base Webkit (
Safari e Chrome) usano dei Css proprietari per "anticipare" il supporto del nuovo standard, ovvero davanti alle nuove proprietà viene inserito un suffisso "-moz-" per il primo e "-webkit-" per il secondo.
Cosa succede se faccio pagine con CSS3 e vengono aperte da browser che non li supportano?
Semplicemente gli effetti CSS3 non saranno visibili, poi se la mancanza dei CSS3 genererà veri problemi di visualizzazione della pagina dipenderà da come li avremo implementati. Considerate che se applicate un border-radius su un elemento un utente IE8 vedrà dei box normali senza angoli arrotondati che non è poi una grande perdita, ma se la mancaza di una text-shadow porta alla non leggibilità allora siamo nei guai!
L'approccio a queste nuove proprietà deve essere un qualcosa di
progressivo, offrire più livelli di esperienza senza compromettere la fruibilità dei contenuti, questi
20 punti indicati da Microsoft possono essere un buon punto di partenza e l'utilizzo di librerie di rilevamento come
Modernizr non farebbero male!
Quindi perche dovrei usarli?
Perché ormai più della metà dei browser desktop attualmente in circolazione supportano molte di queste features, perché su mobile la situazione è ancora meglio (
non ci sono i vecchi IE con cui fare i conti), perché su monitor HiDPI/Retina gli effetti vengono renderizzati al massimo della qualità. Giusto per indicare alcuni buoni motivi...
Detto questo...
...sappiate che nei prossimi CSS Tips si parlerà un po più spesso dei CSS3 :P .