CSS3PIE aggiunge il supporto alle proprietà CSS3 - border-radius, box-shadow - sulle versioni 6, 7 e 8 di Internet Explorer.
ATTENZIONE! Il contenuto di questo articolo necessita di revisione perché redatto più di un anno fa. I comandi e la sintassi utilizzata potrebbero non funzionare in seguito a cambiamenti o aggiornamenti del software. Scrivici a Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. se hai bisogno di assistenza.
Articolo pubblicato il 06/02/2012
Capita spesso di voler implementare le decorazioni offerte dal CSS3 nelle proprie interfacce web e ancora più spesso capita di sfogare la propria rabbia contro Internet Explorer, che, specialmente nelle versioni precedenti alla 9, non supporta nessuna delle decorazioni CSS3.
Sorge così il problema della compatibilità che obbliga lo sviluppatore a progettare interfacce web che risultino gradevoli anche senza l'ausilio delle decorazioni avanzate offerte dal CSS3.
A volte però alcuni degli effetti grafici che si è deciso di implementare risultano essere fondamentali nell'economia generale dell'interfaccia in progettazione ed è così necessario trovare delle soluzioni alternative al problema.
La soluzione offerta da CSS3 PIE
CSS3 PIE (Progressive Internet Explorer) è un'utility scritta in javascript che permette il parsing e il rendering di alcune delle più utili funzionalità CSS3 sulle versioni di Internet Explorer che non ne includono il supporto nativo. È così possibile ad esempio utilizzare la proprietà border-radius nelle versioni di Internet Explorer 6,7 e 8.
CSS3 PIE viene implementato grazie alla funzionalità attached behavior integrata in Internet Explorer sin dalla versione 5.5, che permette allo sviluppatore di estendere le funzionalità di un documento HTML grazie all'integrazione di un file .htc contenente il codice utile al supporto delle funzionalità.
CSS3 PIE funziona proprio così, e, grazie all'integrazione della funzione attached behavior su Internet Explorer, permette di aggiungere il supporto alle interessanti decorazioni CSS3 nelle versioni superiori alla 5.5 del browser di casa Microsoft. Vediamo quindi come integrare CSS3 PIE all'interno di una pagina web.
Per aggiungere le proprietà offerte da CSS3 ad uno specifico elemento della pagina utilizzando CSS3 PIE, è sufficiente scaricare la libreria dal sito di css3pie ed inserire all'interno del vostro file css la proprietà behavior: url(./path/to/PIE.htc) così come nell'esempio:
.myClass{
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* Supporto CSS3 grazie a CSS3 PIE */
behavior: url(./path/to/PIE.htc);
}
/*Se utilizzate un path relativo, ricordate che il path deve essere relativo
al documento html e non al path del foglio di stile.*/
Non appena Internet Explorer incontra la proprietà behavior all'interno della regola CSS, scarica il file .htc che si occupa di analizzare le proprietà dell'elemento, selezionare quelle supportate dedicandosi infine al rendering dell'elemento correttamente "stilizzato" nel documento.
Il file .htc e la compatibilità coi browser diversi da IE
È ovvio che l'utilizzo di CSS3 PIE all'interno di una pagina web ne aumenta la dimensione e, anche se la libreria è grande soltanto 16 Kb (se si usa gZip), può deteriorare la user experience rallentando il rendering dell'intera pagina. Ricordatevi che qualsiasi hack software che offre nuove funzionalità - non supportate nativamente - causa overhead e appesantisce l'esecuzione del codice.
CSS3 PIE, utilizzando una proprietà del CSS supportata soltanto da IE, non dovrebbe creare alcun tipo di conflitto evitando quindi il download del file .htc nei browser Firefox, Chrome, Opera e Safari.
Differente è il comportamento di Internet Explorer 9 che, supportando la proprietà behavior del CSS, scarica per intero la libreria senza averne effettivamente bisogno. È quindi consigliabile l'utilizzo di conditional comments per evitare il download di CSS3 PIE da parte di Internet Explorer 9, tranne nel caso in cui abbiate la necessità di utilizzare le proprietà border-image o linear-gradient per le quali IE9 non integra il supporto nativo, aggiunto però da CSS3 PIE.
Note e Conclusioni
Ricordatevi sempre due semplici regole che vanno applicate in qualsiasi fase dello sviluppo:
1) La User Experience deve essere sempre il punto focale del vostro lavoro, evitate quindi l'utilizzo di librerie come CSS3 PIE se potete farne a meno, riuscirete a sviluppare delle pagine web più leggere e veloci.
2) Ricordate che quasi mai un utente naviga su internet con più browser contemporaneamente, se le vostre pagine web appaiono diversamente su browser differenti, non preoccupatevi, i vostri utenti non lo scopriranno mai!
È fondamentale, per il corretto funzionamento di CSS3 PIE, che il file .htc venga offerto dal server con il seguente Content-Type: Content-Type: text/x-component, apportate quindi i dovuti aggiornamenti al file di configurazione del vostro server web per aggiungere il corretto Content-Type da associare ai file .htc.
Per ulteriori informazioni e delucidazioni vi consigliamo di consultare la documentazione ufficiale di css3 pie che offre una lista completa delle proprietà CSS3 supportate da PIE.