Css3 su Internet Explorer 8? – da oggi si può

In questa breve guida affrontiamo un problema ormai comune a tutti i web designer: l’uso delle tecniche CSS3 su Internet Explorer 8.

L’ormai obsoleto browser restera’ ancora per molto tempo usato da molti utenti (basti pensare che la versione 9 non può essere installata su Xp!) e pertanto nasce l’esigenza di trovare “una via” per poter usare queste nuove feature e renderle disponibili per tutti. Perchè privare gli utenti di un‘esperienza creativa superiore?

css3-pie-img1DOWNLOAD | DEMO

Perchè usare i CSS3 “prima del tempo”?

La risposta e’ semplice: i css2 sono stati in uso per anni e anni per rinnovare davvero l’esperienza finale dell’utente bisogna ricorrere a nuovi (e piu potenti) mezzi. E’ impensabile, ad oggi, di rimanere ancorati alle vecchie tenclogie e lasciare che tutti gli altri “concorrenti” si aggiornino rendendo i nostri lavori, seppur ben fatti, ormai OBSOLETI.

Per questo nasce l’esigenza di iniziare (gradatamente) a usare queste nuove tecniche, in questo modo potremo facilmente rimanere al passo coi tempi e sopratutto rimarremo COMPETITIVI sul mercato del web design.

Quali sono i problemi su IE?

Internet explorer 8 semplicemente non “elabora” le nuove proprieta’ CSS3, rendendo il lavoro di cross-browsering davvero frustrante. Che fare?

La risposta: CSS3

In nostro aiuto arriva CSS3 PIE, un progetto che personalmente seguo da parecchio tempo, fin dalla sua versione 1.0 (oggi siamo alla beta4!) e devo dire che rende il lavoro di ottimizzazione molto piu’ veloce e sopratutto ci permette di realizzare in (relativa) tranquillita’ i nuovi progetti con il nuovo linguaggio di stile.

Potete scaricare questo tool direttamente dal sito ufficiale: Css3 PiE official site per seguire invece il progetto segui CSS3 pie su Twitter!

Come si usa?

L’utilizzo e’ abbastanza semplice: si tratta di posizionare il file PIE.htc nella root (o in un altra directory) del vostro sito e procedere come segue:

-moz-box-shadow: 0 0 5px 5px #d6d6d5;
-webkit-box-shadow: 0 0 5px 5px#d6d6d5;
box-shadow: 0 0 10px 5px #d6d6d5;
behavior: url(PIE.htc);

In questo caso, ad esempio ho applicato la proprieta’ di ombra al mio div, compatibile con tutti i browser!. Nel caso posizionassimo il file PIE.htc nella directory “css3” dovremmo scrive:

behavior: url(css3/PIE.htc);

Si può usare con i CMS, come ad esempio WordPress? Certo che si!

Vi bastera’ posizionare il file PIE.htc  nella root del sito WordPress (quella contenente il file wp-config per intenderci), e NON nella root del template. Per richiamarlo nei css usate la stessa sintassi vista sopra (ovviamente aprendo il file style.css del vostro template in uso).

Quali funzioni supporta CSS3 PIE?

Css3 Pie permette l’uso di tutte le tecniche “base” dei CSS3 come ad esempio: border-radius, box-shadow, border-image, CSS3 Backgrounds (-pie-background).

Guarda la lista completa delle feature QUI.

Nota: Css3 PIE contiene gia’ il fix delle immagini PNG per Ie7, e IE8!

Se avete commenti o avete problemi nell’uso sono qui !

  1. ciao, io ho seguito quello che hai detto ma non si mouve una foglia nel layout

    io ho il sito principale che sarebbe il mio il problema e che uso lo spazio per visualizzare altri siti messi in sottocartelle, ma non dovrebbe essere un problema invece di scrivere css3/PIE.htc scrivo – ../nomecartella/css/PIE.htc o no? io ho provato diverse link ma niente.

    devo risolvere una questione di background multiplo

    http://www.giuseppefavia.com/tizianafalco non sò come hai la possibilità di vederlo su safari è perfetto e su firefox nuovo pure praticamente io ho un footer con 3 background quello in alto le immagini in linea in basso gli ornamenti e il colore di sfondo rosso sangue su ie8 non appare nulla di questo quindi non sò a cosa è dvuto. speravo che questo metodo funzionasse,
    ciao

  2. Ciao Giuseppe, allora

    Prova a mettere il file PIE.HTC (solo quello basta) nella root del tuo sito (dove c’è il file index.html per intenderci).

    Per i background multipli devi usare questa funzione particolare (lo trovi nella reference sul sito ufficiale):

    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/

    Guarda in particolare questo punto:

    http://css3pie.com/documentation/supported-css3-features/#pie-background

    Nota che nel tuo caso sarebbe meglio usare jQuery per lo sfondo. Css3 Background risulta ancora parecchio “acerbo” e non e’ usato ancora molto. In ogni caso così dovresti risolvere.

    Ciao!

  3. Ciao, ho utilizzato la tecnica su un diuv, mettendo l’ombra, solo che lo sdondo del div è semi trasparente e io l’ombra non voglio vada anche dietro il div ( come fa ad esempio con chrome )! inoltre come si fanno le ombre interne, visto che ho provato la proprietà inset e non mi funziona! 🙁

  4. purtroppo se lo sfondo è trasparente con IE8 non puoi fare nulla. La proprietà inset non va perchè non è supportata da CSS PIE. Fai conto che queste sono librerie “indipendenti” amatoriali e che solo alcune proprietà funzionano correttamente. (tipo inset non va) purtroppo è tutta colpa di IE … l’unica cosa che puoi sperare è che introducano la proprietà nelle prossime beta.

    In alternativa puoi fare tutto con Photoshop ( x ie) e usare un selettore if quando carichi i fogli di stile. In questo modo avrai 2 fogli di stile diversi, uno per IE e uno per tutti gli altri browser.

  5. Ciao Riccardo!
    sto provando in tutti i modi ma con gli altri browser vedo una cosa con IE un’altra….. io vorrei semplicemente un bordino arancio di 2 px attorno al mio quadrato con angoli arrotondati

    border: 2px solid #ED7F00;
    border-radius: 20px;
    -moz-border-radius: 20px; /* firefox */
    -webkit-border-radius: 20px; /* safari, chrome */

    ma se aggiungo il file pie.htc non succede nulla… -.-

      1. ..no si scusa… avevo aggiunto

        behavior: url(PIE.htc);

        ma nada…. altre cose me le da… ma il bordino non si vede….

          1. esatto!
            ho messo questo CSS

            .quadrato{
            background: #000;
            opacity: 0.8;
            filter:alpha(opacity=80); /*per Internet Explorer 6-7*/
            filter:alpha(opacity=80); /*per Internet Explorer 8*/
            border: 2px solid #ED7F00;
            border-radius: 20px;
            -moz-border-radius: 20px; /* firefox */
            -webkit-border-radius: 20px; /* safari, chrome */
            behavior: url(PIE.htc);
            left:30px;
            margin-top: 10px;
            width:300px;
            }

            …ma con IE non vedo nulla… metto qualcosa di sbagliato o che impedisce?

  6. Se posso, ho avuto modo qualche mese fa di testare PIE ed utilizzarlo con non pochi problemi, nel mio caso ho risolto revisionando le z-index. PIE lavora con quelle e non sempre funziona a dovere. Se provate a googlare “css3pie z-index” troverete un pò di risposte.

    Personalmente comunque alla luce di quanto ho fatto e di quanto tempo ci ho perso PIE non mi sento di consigliarlo. E’ indubbiamente un “incentivo” ad usare quelli che saranno in futuro degli standard ma indubbiamente c’è ancora molto da lavorare per renderlo utilizzabile senza troppi problemi.

    1. Guarda personalmente a livello di border radius e shadow non ho mai avuto problemi =D forse sono solo fortunato XD attenti però a non abusarne perchè usando “troppo” pie su ie8 si rallenta parecchio il rendering. Usatelo solo per sezioni “fondamentali”.

  7. Ciao riccardo l’ho provato e funziona tutto ok ho solo un piccolo problemino su explore 6-7-8

    in pratica ho un menù con gli angoli arrotondati tutto ok funziona
    quando però applico la proprietà hover non funziona.
    In pratica mi cambia correttamente il colore di backgraound ma perde gli angoli arrotondati da cosa può dipendere?

  8. Ciao,
    Sto provando ad utilizzare il file PIE.htc ma purtroppo con scarso successo.
    Il codice utilizzato è il seguente
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    behaviour: url(“pie/PIE.htc”); /** border-radius ie8 **/

    ma guardando il sito con ie8 vengono visualizzati dei quadrati invece che dei cerchi.. cosa sbaglio? Nella cartella pie ho messo tutto il file rar dell’ultima versione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.