I siti web Netdesign utilizzano cookies. Maggiori informazioni alla pagina Informativa Cookies. Continuando la navigazione accetti il loro utilizzo. Se non desideri i Cookie vai alla pagina Opt out Cookies

Buon Venerdì da Netdesign -Vieni a trovarci su Facebook o Twitter, scrivici a info@netd.it o chiamaci ai numeri 095 293 18 11 / 338 94 23 302

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.

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.

Hai trovato utile questo articolo?
Lasciaci un tuo sincero feedback

Pubblicati di recente

Articoli e documenti pubblicati di recente su questo sito web

  1. Netdesign al Liceo Einaudi di Siracusa
    online dal 08.03.2019
    ultima modifica il 08.03.2019


  2. La SEO è cambiata: #Sapevatelo!
    online dal 09.02.2019
    ultima modifica il 09.02.2019


  3. Posso ottenere un certificato SSL per il mio sito web?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  4. Come ottenere l'accesso ai dati di analytics del mio sito web?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  5. Cos'è e cosa significa SEO?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


  6. Come richiedere un preventivo?
    online dal 05.02.2019
    ultima modifica il 05.02.2019


Ulteriori articoli recenti