Fw

Wordpress Creative Developer

Come Utilizzare Alcune Proprietà CSS3 Anche In Internet Explorer

  • Html Css
  • -

Sappiamo tutti che internet explorer, tra le sue innumerevoli qualità, c’è anche quella di supportare pienamente i CSS3.

Tranquillo, sto scherzando..ma neanche tanto visto che esiste un hack che permette da explorer 6 in poi di supportare tre proprietà CSS3 in particolare.
Utilizzare CSS3 In Internet Explorer 6
Le tre proprietà sono: border-radius (bordi arrotondati), box-shadow ( ombre ai box), text-shadow (ombre ai testi).

Il suo funzionamento è semplicissimo.

Una volta scaricato lo script dovrai aggiungere tra le proprietà CSS questa riga di codice negli elementi che utilizeranno proprietà CSS3:

behavior: url(ie-css3.htc);

In questo modo:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+*/

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+*/

  behavior: url(ie-css3.htc); /* hack Internet Explorer */
}

Puoi testare questo hack aprendo la pagina ufficiale dello script con Internet Explorer 6 o 7 e vederlo all’opera.

Inoltre ti invito a leggere questo articolo di yourinspirationweb, che ti darà altri suggerimenti su come aggirare gli ostacoli di internet explorer.

Finalmente possiamo usare almeno in parte i CSS3.

13 Commenti

  1. Grazie mille!
    In questo modo finalmente eviterò di perdere tempo ad inventarmi 1000mila modi diversi per far andare i bordi arrotondati anche su quella sottospecie di browser… 🙂

  2. ottima notizia grazie!

  3. […] This post was mentioned on Twitter by Jury D'Ambros, fedeweb. fedeweb said: Come Utilizzare Alcune Proprietà CSS3 Anche In Internet Explorer: Sappiamo tutti che internet explorer, tra le sue… http://bit.ly/cGqx0m […]

  4. Bene! se avete difficoltà nell’utilizzare lo script chiedete pure nei commenti 😉

  5. io ho utilizzato lo script pie.htc per un sito e non ho avuto problemi!
    Lo sto utilizzando ora per un altro progetto e mi blocca explorer, sai dirmi da cosa potrebbe dipendere?

  6. Ciao Nicola e benvenuto nel blog 😉
    Forse ci sono dei conflitti con altri script che utilizzi? è on line il progetto?

  7. ciao,
    volevo sapere..come faccio ad impostare le caratteristiche dell’ombra per explorer?

    cioè per gli altri browser uso questi:

    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+*/

    explorer mi pesca il file ie-css3.htc ma come fa sapere l’ampiezza dell’ombra ecc..

    grazie mille..

    ciaoo

  8. Ciao Marco e benvenuto nel blog 😉

    Non vorrei ricordare male, ma va a prendere i valori dati utilizzando le proprietà utilizzate per gli altri browser. Verifica e fammi sapere 😉

  9. ma come e dove li inserisco? grazie ancora..

  10. Ciao,
    ma anche l’arrotondamento agli angoli non funziona!! con explorer non li vedo..

    grazie..

  11. Hai scaricato il file indicato nell’articolo?

  12. Con gli :hover non funziona e se si imposta un mouseover() con jquery funziona ma va lentissimo e poi rimane salvata l’ombra. Cioè anche usando un mouseout() o cambiando in modo dimanico la classe rimane l’ombra quando esci dall’elemento.. 🙁

  13. @Michele
    Ciao Michele e benvenuto nel blog 😉
    Bisogna ricordarci che è un hack e in alcune situazioni, come l’hover può non funzionare a dovere.

Scrivi un commento

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