HTML5 e CSS3 sono i nuovi standard sviluppati dal World Wide Web Consortium per il web design. Internet Explorer ha notevolmente migliorato il supporto degli standard CCS, ma le versioni precedenti di IE, in particolare IE6, visualizzano alcuni attributi CCS in modo scadente o per niente. Per fare in modo che i siti web con HTML5 e CSS3 abbiano un bell’aspetto su IE, includi codice proprietario nei tag CSS, aggiungi condizionali CSS e usa JavaScript per compensare le incompatibilità nelle versioni precedenti di IE.
1
Cerca la compatibilità CSS e HTML5 sul sito Web MSDN. Alcuni attributi CSS3 e tag HTML5 non sono supportati in IE. È necessario escludere o trovare una soluzione alternativa per ciascuno di questi attributi o tag non supportati.
2
Utilizza le estensioni del fornitore Microsoft CSS o gli attributi proprietari per rendere la pagina compatibile con IE. Ad esempio, la maggior parte degli altri browser utilizza “opacity” per visualizzare l’opacità su una pagina, ma IE utilizza “filter” e “-ms-filter”. Per eseguire il rendering dell’opacità in tutti i principali browser, utilizzare il codice seguente:
.opaque {opacità: 0.1; filtro: progid: DXImageTransform.Microsoft.Alpha (opacità = 10); -ms-filter: “progid: DXImageTransform.Microsoft.Alpha (opacity = 10)”; }
Sostituisci “0.1” e “10” con l’opacità desiderata.
3
Aggiungi commenti condizionali al codice CSS per creare istruzioni speciali per IE. L’attributo “line-height” in IE6, ad esempio, non corrisponde a “line-height” impostato in Mozilla Firefox; puoi usare le condizioni per inserire un’altezza di riga diversa in IE in modo che il layout sia lo stesso in entrambi i browser. Inserisci quanto segue tra i tag “” e “” per aggiungere istruzioni CSS specifiche per IE7 e di seguito:
Inserisci quanto segue per una versione specifica di IE:
4
Inserisci JavaScript per eseguire HTML5 su versioni precedenti di Internet Explorer, come IE6. Per esempio:
document.createElement (“piè di pagina”)
5
Usa Modernizr se hai diversi elementi HTML5 che vuoi avere un bell’aspetto sulle versioni precedenti di IE. Scarica la libreria JavaScript, quindi caricala sul tuo server Web. Aggiungi il seguente codice alla tua pagina, tra i tag “” e “”: