Internet Explorer (IE) è un browser prolifico in bundle con ogni installazione di Windows. Molto per la frustrazione degli sviluppatori Web, tuttavia, IE tende ad essere in ritardo nel supporto per funzionalità più recenti, come foglio di stile CSS livello 3 (CSS3) supporto. Sebbene resti di cambiamento lento, è possibile utilizzare molti dei trucchi CSS3 popolari IE 9 e di cui sopra. È anche possibile simulare alcuni trucchi di CSS3 nelle versioni precedenti di IE utilizzando il codice di "filtro" nel tuo CSS.

Gradienti lineari

Versioni di Internet Explorer inferiore a 10 non supportano gradienti CSS. Internet Explorer 10 supporta gradienti con l'uso della "-ms" prefisso di browser. Gradiente uso per il browser di Internet Explorer 10 è conforme alla raccomandazione del W3C, così sembra che questo:

immagine di sfondo: -ms-lineare-gradient(top, #ff0000, #00ff00);

Il codice sopra riportato dà uno sfondo una sfumatura lineare che si ferma nell'angolo in alto a destra, che scorre verso il basso dalla parte superiore, dissolvenza da rosso a verde. Il codice equivalente del filtro che genererà questo gradiente nel browser pre-IE 10 è come segue:

filtro: progid:DXImageTransform.Microsoft.gradient (startColorStr = "#ff0000", EndColorStr =' #00ff00 ');

Colori RGBa

Colori RGBa possono sostituire codici esadecimali dove si desidera utilizzare un colore semi-trasparente. Solo IE 9 e versioni successive supportano colori RGBa. Il codice per RGBa è costituito da valori di colore rosso, verde e blu, maggiorato di una percentuale di trasparenza del canale alfa impostato come un valore compreso tra 0 e 1:

colore: rgba(255,0,0,0.7);

Lo stile CSS sopra imposta un colore rosso con un'opacità del 70 per cento. È possibile utilizzare un filtro equivalente per creare lo stesso effetto con questo codice:

filtro: progid:DXImageTransform.Microsoft.gradient (startColorstr = n #ff000070, endColorstr = n # ff000070);

Si noti che i colori iniziale e finale sopra sono identici, e le ultime due cifre aggiunte a entrambi i colori esadecimali rappresentano il valore di trasparenza tra 0 e 99.

Box-shadow

Versioni di IE a partire con 9 supportano la proprietà di "box-shadow" che crea ombre. Si noti che "box-shadow" non si applica alle ombre del testo. Nelle versioni che supportano "box-shadow", non è necessario utilizzare un prefisso di browser. Il codice è come segue:

box-shadow: 5px 5px 10px #eeeeee;

Il codice precedente crea un offset di ombra di goccia di cinque pixel dalla parte superiore (il primo valore) e sinistra (il secondo valore). Il raggio della sfocatura è impostato a 10 pixel, e il colore dell'ombra è un grigio chiaro. Non c'è nessun filtro equivalente che creerà ombre casella in IE 8 e sotto; è necessario creare un'immagine di sfondo sfocato e posizionarlo in un DIV sotto l'elemento desiderato per creare un'ombra per le versioni di IE precedenti.

Raggio di confine

Internet Explorer ha cominciato supporto per angoli arrotondati con la versione 9. La proprietà "border-radius" crea angoli arrotondati per gli elementi HTML. Come suggerisce il nome, il browser applicano l'arrotondamento al bordo di un elemento; dove nessun bordo è impostato, l'elemento stesso diventa arrotondato. Ecco il codice:

raggio bordo: 20px;

border-top-left-radius: 10px;

Il codice sopra riportato Mostra versioni longhand sia la forma abbreviata di questa proprietà. Singoli angoli seguono la forma della versione estesa. Maggiore è il valore di un raggio di confine, più rotondo un elemento diventa.