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?
DOWNLOAD | 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!
