CSS3 e Browser vecchi IE6, IE7 e IE8

L'ultimo problema affrontato riguarda le meravigliose ombre e bordi arrotondati creati tramite CSS3

parte dei browser di nuova generazione supportano tali funzionalità ... ma browser datati come Internet Explorer 6 e 7 hanno dei problemi a riconosce il CSS3, per questo ci viene in aiuto http://css3pie.com che ci dà dei componenti, che possiamo in base alla circostanza ed alle caratteristiche del Server o dell'hosting su cui siamo ospitati, attivare questi effetti anche su browser datati.

(Download: http://css3pie.com/download-latest)
(La documentazione: http://css3pie.com/documentation/)
(Problemi comuni: http://css3pie.com/documentation/known-issues/)

Versione CSS
Per utilizzare questi componenti vi consiglio di estrarli all'interno della directory ove sono presenti i file .css che contengono ombre e bordi CSS3.




Per chi ha la fortuna di utilizzare un proprio server e di poter modificare le configurazioni di Apache o nel file .htaccess (ammesso che l'hosting permetta l'aggiunta di "content-type" tramite "AddType text/x-component .htc", io ho avuto problemi con l'hosting linux di Register.it, il quale non permette tale aggiunta, la quale anche se presente sul .htaccess viene bellamente ignorata)

AddType text/x-component .htc
Questa riga permette ad apache di capire come processare i file .htc

All'interno del vostro CSS per quelle classi che contengono CSS3 dovrete aggiungere alla fine questa riga

.nomeClasse{

 [....]

 behavior: url(PIE.htc); /* Se presente nella stessa directory del CSS */

} 

o  

.nomeClasse{

 [....]

 behavior: url(path_Dove_E_Stoccato/PIE.htc); /* Se presente nella stessa directory del CSS */

} 

Versione JS

(Documentazione: http://css3pie.com/documentation/pie-js/)  

 Se siete sfortunati come me ... dovete necessariamente utilizzare la versione Javascript (Non fate coesistere la versione HTC e la versione Javascript, potrebbe creare dei problemi!), Attenzione $() richiede JQuery o Prototype.

Dovrete quindi aggiungere nella pagina prima di </head>



<!--[if lt IE 10]>
<script type="text/javascript" src="path/to/PIE.js"></script>
<![endif]-->

<script type="text/javascript">$(function() {
    if (window.PIE) {
        $('.nomeClasse').each(function() {
            PIE.attach(this);
        });
    }
}); 

</script>

Che include il file PIE.js e attiva PIE per la classe CSS .nomeClasse quindi per tutti gli oggetti HTML aventi come CLASS="nomeClasse".