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?
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.
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:
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).
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
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, 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! 🙁
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.
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
.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?
prova a eliminare l’opacità.
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.
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”.
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?
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
Anche questo sito usa cookie ai soli fini di analisi statistica e profilazione.AccettoLeggi
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
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
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!
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! 🙁
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.
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… -.-
A quel codice manca il richiamo al file pie.htc (vedi articolo). Fammi sapere 😉
..no si scusa… avevo aggiunto
behavior: url(PIE.htc);
ma nada…. altre cose me le da… ma il bordino non si vede….
mmm… strano non funziona solo con ie giusto? con chrome e firefox funziona?
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?
prova a eliminare l’opacità.
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.
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”.
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?
Hai provato a ripetere gli attributi border-radius anche nello stato :hover?
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
Sei sicuro al 100% che il percorso impostato nel css sia corretto? (fai delle prove, ad esempio impostando: ../pie/PIE.htc)