Come ottenere Internet Explorer per il supporto CSS3

January 9

Cascading Style Sheets (CSS) controllano l'aspetto dei siti web, e CSS3 è il più recente specifica per i CSS. Mentre CSS3 aggiunge funzionalità quali gradienti, ombre ed angoli arrotondati, Internet Explorer (IE) versioni da 6 a 8 non supportano CSS3 affatto. L'aggiunta di un file di poli-fill - un file HTC che "riempie" il supporto di IE manca - al tuo sito web vi permetterà di utilizzare alcune proprietà di base CSS3. Delle poche CSS3 poli-riempimenti che esistono, la migliore da utilizzare per l'aggiunta di effetti visivi è CSS3 PIE (Progressive Internet Explorer).

istruzione

1 Vai a CSS3pie.com e scaricare CSS3 PIE, uno script di poli-fill che aggiunge il supporto CSS3 limitato per il tuo sito quando i visitatori caricano nelle versioni di Internet Explorer 6 a 8. Unzip CSS3 PIE sul computer e caricarlo sul server Web se il sito è già online.

2 Aprire il file CSS associato al tuo sito web. I selettori nei CSS, come "#mydiv" o "tagname", insieme alle coppie proprietà-valore contenute tra loro parentesi graffe, costituiscono regole di stile. Aggiungere questo codice a ogni regola di stile che contiene proprietà CSS3:

comportamento: URL (path / to / PIE.htc);

Change "path / to / PIE.htc" per abbinare la posizione del file PIE.htc.

3 Individuare qualsiasi sfumatura lineare nel file CSS e scrivere una nuova coppia proprietà-valore:

-pie-sfondo: linear-gradient (in alto, #ffffff # 000000);

La coppia di cui sopra non sostituisce gli altri nel codice. Si tratta di un paio che aggiunge il supporto per solo PIE CSS3. Non usare "-pie-background-image". Modificare i valori per la pendenza, come ad esempio la direzione oi colori, per abbinare la sfumatura che si desidera utilizzare.

4 Modificare qualsiasi RGBA (Rosso, Verde, Blu e Alpha) codice di colore in CSS3 in esadecimale. Il poli-fill CSS3 PIE può utilizzare i valori di colore RGBA, ma non renderà i colori con alcuna trasparenza. Lascia un valore RGBA solo se che il colore non sarà male se fusi opaco.

Consigli e avvertenze

  • È possibile ottenere molti effetti CSS3 utilizzando fallback JavaScript. Questi fallback spesso aggiungono un solo effetto alla volta, però.
  • Considerate permettendo al vostro sito web per degradare con grazia nei browser più vecchi. Ciò significa che, anche se alcuni utenti non vedranno angoli arrotondati o gradienti, possono ancora leggere e utilizzare il sito web.
  • CSS3 PIE funziona meglio con regolari, siti web HTML "statiche". Quando viene applicato ai modelli o temi per i sistemi di gestione dinamica dei contenuti (CMS), il file di poli-riempimento non sempre funziona o può comportarsi in modo strano.
  • Questa tecnica non aggiungerà il supporto text-shadowing per il tuo sito. Si dovrebbe controllare che il colore del testo non interferisce con la leggibilità quando l'ombra è mancante.

Articoli Correlati