IMPORTANTE - Questa pagina è scaduta 2779 giorni fa (il 10 Febbraio 2014). Puoi trovare una versione aggiornata dell'articolo CSS3 PIE: proprietà CSS3 su Internet Explorer sul nuovo sito web Netdesign.

Sei comunque libero di consultare questa pagina, abbiamo deciso di lasciarla online per trasparenza e per rispetto nei confronti del nostro passato e del nostro lavoro. Questo sito web è stato pubblicato ad Ottobre 2011 ed è scaduto a Febbraio 2014.

ATTENZIONE! Le informazioni riportate in questa pagina non sono più valide o aggiornate e non rappresentano in alcun modo il sito web ufficiale di Netdesign a partire dal 10 Febbraio 2014.

NOTA: Questa pagina potrebbe contenere link rotti e quindi non più funzionanti.

Developers Network

Risorse ed articoli su Javascript, PHP, Python e CSS per Web designer e sviluppatori Web. Consigli utili per un corretto sviluppo di pagine ed applicazioni web.

CSS3 PIE: proprietà CSS3 su Internet Explorer

CSS3PIE aggiunge il supporto alle proprietà CSS3 - border-radius, box-shadow - sulle versioni 6, 7 e 8 di Internet Explorer.

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.


0 Risposte a CSS3 PIE: proprietà CSS3 su Internet Explorer


Lascia un Commento

La tua email non verrà pubblicata ma sarà utile per notificarti le risposte al tuo commento. I commenti considerati spam non verranno pubblicati. Puoi utilizzare i seguenti tag html nel commento: <p>,<b>,<strong>,<code> e <em>.

Il tuo Nome:



Il tuo indirizzo email:



Il tuo Commento:

Invia Commento

Twitter Stream

Contatta Netdesign

Hai bisogno di consulenza sul mondo dello sviluppo web e dell'ottimizzazione della tua infrastruttura informatica? Contattaci subito, ti aiuteremo a trovare le migliori soluzioni alle tue esigenze di Information Techonology.

Contattaci




Questa pagina è scaduta 2779 giorni fa (il 10 Febbraio 2014). Puoi trovare una versione aggiornata di questo/i articolo/i sul nuovo sito web Netdesign alla sezione Guide

Sei comunque libero di consultare questa pagina, abbiamo deciso di lasciarla online per trasparenza e per rispetto nei confronti del nostro passato e del nostro lavoro. Questo sito web è stato pubblicato ad Ottobre 2011 ed è scaduto a Febbraio 2014.

ATTENZIONE! Le informazioni riportate in questa pagina non sono più valide o aggiornate e non rappresentano in alcun modo il sito web ufficiale di Netdesign a partire dal 10 Febbraio 2014.

NOTA: Questa pagina potrebbe contenere link rotti e quindi non più funzionanti.