Share
L'hai visto più e più volte su Webdesigntuts +; un tutorial su CSS3 che sei tentato di seguire, ma la mancanza di supporto nei browser più vecchi ti impedisce di guardare oltre. Esistono tuttavia numerosi strumenti per aiutare in situazioni come queste. Oggi scopriremo come conquistare CSS3 nei browser più vecchi, Compreso Internet Explorer?
Diamo un'occhiata a una serie di tecniche per rendere le proprietà CSS3 più importanti nelle versioni di browser precedenti.
Per cominciare, scarica e includi tutti gli script necessari per questo tutorial. Ai fini di questo esercizio, posizionare tutti gli script nella stessa cartella dei file CSS. Ecco gli strumenti di cui avremo bisogno:
CSS3PIE è il nostro assistente IE. PIE sta per Progressive Internet Explorer, e estende il comportamento di Internet Explorer per aiutarlo a riconoscere e visualizzare le proprietà CSS3.
Controlla la cartella di download CSS3PIE dove troverai vari file. Noi useremo PIE.htc, e lo chiameremo dal nostro CSS, quindi suggerisco di metterlo nella stessa cartella del nostro foglio di stile.
Selectivizr è usato per gestire i selettori CSS3. È utilizzato in combinazione con una libreria JavaScript, come jQuery o Mootools. Consiglio di optare per Mootools poiché supporta tutte le funzioni Selectivizr (selettori CSS).
Per questo tutorial, utilizzerò la libreria Mootools ospitata da Google, quindi la includiamo semplicemente nella nostra testa:
Possiamo usare jQuery per rendere un'alternativa alla proprietà text-shadow di CSS3. Abbiamo semplicemente bisogno di scaricare il plugin jQuery text-shadow, quindi includerlo con jQuery:
OK, questo è il nostro toolkit, ora vediamo come usiamo questi strumenti per risolvere i nostri mal di testa CSS3?
Border-radius è probabilmente il più familiare delle proprietà CSS3. Per fortuna, renderlo in Internet Explorer è semplicemente un caso di usare CSS3PIE.
.box border-radius: 10px; comportamento: url (PIE.htc);
Come puoi vedere, dobbiamo solo "chiamare" lo script PIE, dopo aver definito la nostra regola border-radius.
In modo simile a border-radius, per Internet Explorer per riconoscere box-shadow dobbiamo solo includere lo script PIE. Nota che possiamo anche dichiarare il colore dell'ombra usando i valori RGBA.
.box box-shadow: 5px 5px 5px rgba (0, 0, 0, .75); comportamento: url (PIE.htc);
Puoi anche usare i colori RGBA quando dichiari un colore di sfondo.
Per consentire a CSS3 PIE di eseguire il rendering dei gradienti di sfondo, facciamo affidamento sfondo: nel seguente modo:
-pie-background: linear-gradient ([|| ,]? , [, ] *);
In realtà, è molto simile alle altre regole del fornitore di browser. Ricorda di chiamare in seguito il comportamento delle PIE CSS3!
.box background: -webkit-linear-gradient (in alto, # 0072bc, # 00bff3); / * Safari, Chrome * / background: -moz-linear-gradient (in alto, # 0072bc, # 00bff3); / * Firefox * / background: -o-linear-gradient (in alto, # 0072bc, # 00bff3); / * Opera * / background: -ms-linear-gradient (in alto, # 0072bc, # 00bff3); / * IE10 * / -pie-background: linear-gradient (# 0072bc, # 00bff3); / * IE6 + * / comportamento: url (PIE.htc);
Ancora una volta, in questo caso, dobbiamo usare il -torta- prefisso:
.box background: url (img / flash.png) 20px 20px senza ripetizione, url (img / airplane.png) 90px 50px senza ripetizione, # 00BFF3; / * Browser moderni * / -pie-background: url (img / flash.png) 20px 20px senza ripetizione, url (img / airplane.png) 90px 50px senza ripetizione, # 00BFF3; / * IE6 + * / comportamento: url (PIE.htc);
L'ultima proprietà di CSS3 PIE è l'immagine del bordo:
.box border-image: url (border.png) 27 27 27 27 round round; comportamento: url (PIE.htc);
Ora è il momento di sporcarsi con Selectivizr. Includere la libreria JavaScript come dimostrato all'inizio del tut, quindi tutti i selettori CSS3 verranno riconosciuti da IE6+!
table tr: first-child background: # 252525; table tr: nth-child (2n + 1) background: #ebebeb;
Questo effetto può essere reso più facilmente per il cross-browser utilizzando la libreria jQuery. Dopo averlo incluso, chiama semplicemente il textshadow () funzione, che punta al tuo selettore:
Per completare l'effetto, aggiungi l'ombreggiatura di testo al tuo CSS.
.txt text-shadow: 2px 2px 2px black;
Per sostituire alcune proprietà CSS3 puoi anche utilizzare i filtri IE. Questo primo esempio è per i gradienti di sfondo:
.box background: #FFFFFF; filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 444444', EndColorStr = "# 999999"); / * IE6-IE9 * /
Questo secondo è l'equivalente della proprietà di trasformazione. Tuttavia, la sintassi è un tale mal di testa che si consiglia di utilizzare un generatore per calcolarlo.
.box / * IE8 + - deve essere su una riga, sfortunatamente * / -ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.17364817766693127, M22 = 0.9848077530122079, SizingMethod =" auto espandere")"; / * IE6 e 7 * / filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.17364817766693127, M22 = 0.9848077530122079, SizingMethod = "auto expand"); margin-left: -14px; margin-top: -21px;
Come hai visto, con vari strumenti possiamo garantire un rendering ragionevole del CSS3 nei browser più vecchi. Spero che questo ti incoraggi a prendere il toro per le corna e praticare molti degli effetti realizzabili con CSS3! Grazie per aver letto.
Accentsconagua