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:
1 2 3 4 5 6 7 | #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:
1 2 3 4 5 6 7 8 | #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
Commenta qui!