Internet Explorer, si sa, è il browser più detestato da chiunque si trovi a dover lavorare su siti web e soprattutto sui CSS. Come immagino tutti sappiate, il browser di casa Microsoft ha una gestione più che discutibile dei fogli di stile e, malgrado sia definito come compatibile con CSS2 e CSS3, molte cose normalmente visualizzate correttamente su Firefox, Chrome e Safari , non sempre appaiono su Explorer come il designer avrebbe voluto.

La terza versione dello standard CSS introduce diversi interessanti nuovi effetti: angoli arrotondati, ombre morbide, gradienti, sostituzione di fonts e molto altro ancora. Ma, come detto, a causa del non pieno supporto da parte di Internet Explorer verso queste funzioni, a volta siamo costretti a farne a meno. Ecco quindi che ci può venire in aiuto CSS3PIE, un piccolo hack grazie al quale potremmo superare questo ostacolo.

Grazie a CSS3PIE basterà una semplice modifica nei nostri fogli di stile, in questo modo:
Supponiamo di avere il nostro elemento  #myElement, così strutturato:

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

Ci basterà aggiungere in fondo alla classe il behavior alla url:

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
}

In questo modo gli stessi effetti saranno visibili su Internet Explorer 6, 7, e 8.

Al momento sono supportati i seguenti effetti:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient come background image