Share
Ați văzut-o din când în când pe Webdesigntuts +; un tutorial CSS3 pe care sunteți tentat să îl urmați, dar lipsa de asistență în browserele mai vechi vă oprește să mai căutați. Există, totuși, o serie de instrumente pentru a ajuta în astfel de situații. Astăzi vom descoperi cum să cucerim CSS3 în browserele mai vechi, inclusiv Internet Explorer?
Să aruncăm o privire la o serie de tehnici pentru a face cele mai importante proprietăți CSS3 în versiunile mai vechi ale browserului.
Pentru început, descărcați și includeți toate scripturile necesare pentru acest tutorial. În scopul acestui exercițiu, plasați toate scripturile în același director ca și fișierele CSS. Iată instrumentele de care avem nevoie:
CSS3PIE este asistentul nostru IE. PIE înseamnă Progressive Internet Explorer, și extinde comportamentul Internet Explorer pentru ao ajuta să recunoască și să afișeze proprietățile CSS3.
Consultați dosarul de descărcare CSS3PIE unde veți găsi diverse fișiere. Vom folosi PIE.htc, și o vom suna din CSS, așa că vă sugerez să o puneți în același director ca și foaia de stil.
Selectivizatorul este folosit pentru a manipula selectorii CSS3. Este folosit împreună cu o bibliotecă JavaScript, cum ar fi jQuery sau Mootools. Vă recomandăm să alegeți Mootools deoarece acceptă toate funcțiile Selectivizr (selectori CSS).
Pentru acest tutorial, voi folosi biblioteca Mootools găzduită de Google, deci pur și simplu o vom include în capul nostru:
Putem folosi jQuery pentru a face o alternativă la proprietatea umbră a textului CSS3. Trebuie doar să descărcați pluginul jQuery text-shadow, apoi să îl includeți cu jQuery:
OK, asta ne-a acoperit setul de instrumente, acum să vedem cum folosim aceste instrumente pentru a rezolva durerile de cap CSS3?
Raza de rază este probabil cea mai cunoscută dintre proprietățile CSS3. Din fericire, redarea în Internet Explorer este pur și simplu un caz de utilizare a CSS3PIE.
.caseta border-radius: 10px; comportament: url (PIE.htc);
După cum puteți vedea, trebuie doar să "sunăm" scenariul PIE, după ce am definit regula noastră de rază de graniță.
În mod similar cu raza de graniță, pentru ca Internet Explorer să recunoască umbra în cutie, trebuie să includem scriptul PIE. Rețineți că putem declara și culoarea umbrei folosind valorile RGBA.
.casetă box-shadow: 5px 5px 5px rgba (0, 0, 0, .75); comportament: url (PIE.htc);
De asemenea, puteți utiliza culori RGBA atunci când declarați o culoare de fundal.
Pentru a permite CSS3 PIE să facă gradiente de fundal, prefixăm fundal: în modul următor:
-pie-background: gradient liniar ([|| ,]? , [, ] *);
De fapt, este foarte asemănător cu diferitele reguli ale altor furnizori de browser. Amintiți-vă mai târziu să apelați comportamentul CSS3 PIE!
.caseta background: -webkit-gradient linear (top, # 0072bc, # 00bff3); / * Safari, Chrome * / fundal: -moz-linear-gradient (sus, # 0072bc, # 00bff3); / * Firefox * / background: -o-gradient linear (top, # 0072bc, # 00bff3); / * Opera * / fundal: -ms-gradient linear (top, # 0072bc, # 00bff3); / * IE10 * / -copie-fundal: gradient linear (# 0072bc, # 00bff3); / * IE6 + * / comportament: url (PIE.htc);
Din nou, în acest caz, trebuie să folosim -plăcintă- prefix:
.cutie (fundal: url (img / flash.png) 20px 20px fără repetare, url (img / airplane.png) 90px 50px no-repeat, # 00BFF3; / * Modern browsere * / -copie-fundal: url (img / flash.png) 20px 20px nu-repeta, url (img / airplane.png) 90px 50px no-repeat, # 00BFF3; / * IE6 + * / comportament: url (PIE.htc);
Ultima proprietate pe care CSS3 PIE o îngrijește este imaginea de frontieră:
.caseta border-image: url (border.png) 27 27 27 27 rotund; comportament: url (PIE.htc);
Acum e timpul să fii murdar cu Selectivizr. Includeți biblioteca JavaScript așa cum a fost demonstrată la începutul tut, apoi toate selectorii CSS3 vor fi recunoscute de IE6+!
Tabelul tr: primul copil (fundal: # 252525; tabel tr: nth-copil (2n + 1) fundal: #ebebeb;
Acest efect poate fi transformat într-un browser încrucișat cel mai ușor folosind biblioteca jQuery. După ce ați inclus, sunați pur și simplu textShadow () funcție, indicând selectorul:
Pentru a completa efectul, trebuie doar să adăugați umbra de text la CSS.
.txt text-shadow: 2px 2px 2px negru;
Pentru a înlocui anumite proprietăți CSS3, puteți utiliza, de asemenea, filtrele IE. Acest prim exemplu este pentru gradiente de fundal:
.caseta background: #FFFFFF; filtru: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 444444', EndColorStr = "# 999999"); / * IE6-IE9 * /
Această a doua, este echivalentă cu proprietatea transformată. Cu toate acestea, sintaxa este o durere de cap pe care ați recomandat să o utilizați pentru a o calcula.
.box-ul / * IE8 + - trebuie să fie pe o singură linie, din păcate * / -ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = 0.17364817766693127, M22 = 0.9848077530122079, SizingMethod = extinde")"; / * IE6 și 7 * / filtru: progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.17364817766693127, M22 = 0.9848077530122079, SizingMethod = "extindere automată"); margin-stânga: -14px; margin-top: -21px;
După cum ați văzut, cu diverse instrumente putem asigura redarea rezonabilă a CSS3 în browserele mai vechi. Sper că vă încurajează să luați taurul prin coarne și să practicați multe dintre efectele realizabile cu CSS3! Vă mulțumim pentru lectură.
Accentsconagua