CSS3 - aceasta este, probabil, cea mai tare tendință în web design de astăzi, care permite designerilor să includă o varietate de elemente și soluții în proiectele lor prin CSS nepretențios și evitarea utilizării de marcare non-semantică, imagini suplimentare și elemente complexe ale j # 097; vascript.
Din păcate, nu este niciun secret pentru nimeni că Internet Explorer (chiar și cele mai recente versiuni) încă nu suportă majoritatea funcțiilor care includ CSS3.
Dezvoltatorii experimentați înțeleg importanța aplicării CSS3 în noile lor proiecte, dar o metodă specială. Astfel că conținutul rămâne disponibil chiar dacă browserul nu suportă CSS3.
Dar există momente în care clientul insistă asupra faptului că proiectul are soluții cross-browser care ar funcționa chiar și în IE6. Pentru astfel de cazuri, am colectat o selecție de opțiuni pe care dezvoltatorii pot utiliza în acele cazuri în care este necesar să se introducă CSS3, dar în același timp a salva funcționalitatea în browsere fără suport (IE6, 7 și 8).
Opacitate (Nivel Densitate / Transparență)
Se pare că mulți dezvoltatori sunt nedumerit de ce Internet Explorer încă nu suportă această funcție foarte comună. A devenit deja atât de plictisitor pentru toată lumea că uneori uităm că aceasta este o funcție CSS3. Deși IE nu susține în mod specific această funcție, poate implementa ceva foarte asemănător:
Aveți nevoie, de fapt, numai de a doua linie, care funcționează în toate cele trei versiuni ale Internet Explorer. Dar dacă dintr-un motiv oarecare trebuie să aplicați această funcție numai în versiunea IE 8 (nu 6 și 7), atunci puteți aplica numai linia a treia, care nu funcționează în versiunile anterioare.
Valoarea de transparență de la sfârșitul liniei pentru fiecare browser funcționează pe același principiu ca și valorile nivelului de densitate de la 0 la 100 (deși valoarea nivelului de densitate este setată în două cifre de la 0 la 1). De asemenea, trebuie remarcat faptul că valorile nivelului de transparență (chiar și în cazul metodei standard) vor fi moștenite de către toți copiii, deoarece nu există setări separate pentru acestea.
* Parametrii de filtrare se aplică numai la Microsoft, deci codul dvs. CSS nu poate fi considerat valabil
* În ceea ce privește valoarea nivelului de transparență, în filtrul pentru Internet Explorer, toți copiii mostenesc parametrii.
Raza de raza (colturi rotunjite)
Opțiunea frontală-rază (mai obișnuită ca colțuri rotunjite în CSS3) este o altă caracteristică comună CSS3. Această opțiune permite dezvoltatorilor să evite durerile de cap despre poziționarea elementelor suplimentare prin j # 097; vascript. Dar, din nou, Microsoft nici nu vrea să coopereze aici, iar Internet Explorer nu suportă această funcție.
Din fericire, există cel puțin o soluție care poate fi aplicată la marcarea IE. Remiz Ranas din HTML Remix a creat fișierul HTC numit CSS Curved Corner. care pot fi descărcate în Google Code.
Lucrul grozav este că instalând această bucată de cod, nu este nevoie să monitorizați munca sa, trebuie doar să specificați valorile de rază ale colțurilor rotunjite. Trebuie doar să specificați un link la fișierul CSS, iar scriptul va analiza automat CSS-ul pentru valoarea corectă a razei parametrului standard al razei de graniță.
Iată cum ar trebui să arate codul dvs.:
Funcționează destul de simplu, după cum se arată mai sus. Deși, în mod ideal, puteți aplica o valoare numai în CSS pentru IE, utilizând același selector în CSS, astfel încât codul să înțeleagă unde să obțină valoarea radiusului.
Deoarece această metodă necesită un fișier HTC separat, puteți vedea demo-ul aici.
* Fișierul HTC este de 142 de linii (optimizarea sau compresia GZip poate contribui)
* Parametrul de comportament va face CSS nevalid
* Serverul dvs. are nevoie de opțiunea de încărcare a fișierului HTC pentru ca această metodă să funcționeze
* Ca de IE8, poate, în unele cazuri, apar probleme în cazul în care HTC-fișierul va fi obligat să ia un element de curbă valoare negativă a indicelui z
Box Shadow
Opțiunea Shadow Box este o altă funcție CSS3 care vă permite să aplicați umbre curbate unor elemente care utilizează parametrii razei de margine. IE nu acceptă box-shadow, dar există un filtru care înlocuiește aproximativ această funcție.
Trebuie remarcat faptul că parametrul box-shadow trebuie eliminat din modulele CSS3 Backgrounds and Forders. astfel încât, cel mai probabil, CSS3 în viitor va fi puțin diferit de ceea ce este acum.
După cum se arată mai sus, în plus față de setările WebKit și Mozilla, puteți aplica un filtru de umbră care va funcționa în toate versiunile de Internet Explorer.
* Opțiunile pentru filtrul de umbră IE nu se potrivesc cu ceilalți parametri, deci pentru a aborda acest efect, va trebui să sapi în valori pentru a ajunge la rezultatul dorit.
* Parametrii filtrului nu sunt valabili, ci și parametrii browserului familiilor WebKit și Mozilla, deci este puțin probabil să întâlniți o nepotrivire externă în toate browserele.
Text Shadow
Această metodă a fost practicată de mai mulți ani atât pentru produsele tipărite, cât și pentru designul web. În ceea ce privește partea web, totul este mult mai simplu, datorită imaginilor sau duplicării și poziționării textului. CSS3 permite dezvoltatorilor să adauge cu ușurință o umbră la text folosind o funcție simplă de text-umbră.
Din păcate, cu Internet Explorer, problemele pot apărea din nou, chiar dacă utilizați filtre potrivite. Pentru a rezolva această problemă, dezvoltatorul Kilian Valhov a scris un plugin pentru jQuery. cu care puteți aplica o umbră de text în IE.
În primul rând, în CSS trebuie să setați valoarea umbrei de text:
Valorile determină culoarea umbrei, poziția de-a lungul verticalei și orizontală, precum și nivelul de estompare.
După ce ați implementat biblioteca jQuery în documentul dvs., puteți rula pluginul folosind jQuery:
Pluginul vă permite să utilizați parametrii pentru a înlocui valorile în CSS. Vizitați site-ul dezvoltatorului acestui plug-in pentru a vă familiariza cu detaliile.
Deși acest plugin este browser încrucișat. Exemplul prezentat mai sus se bazează pe valoarea CSS3 care este deja specificată în codul dvs. CSS, deci va funcționa cu setările CSS standard, unde ar trebui să fie difuzate separat.
Deoarece această metodă necesită utilizarea bibliotecii jQuery și a fișierului plug-in extern, puteți vedea demo-ul direct în rețea.
Există câțiva factori care pot afecta foarte mult dorința de a aplica această metodă. Poate că va fi mult mai convenabil pentru tine să faci o umbră printr-o imagine.
* Pentru ca umbra din IE să arate la fel ca în alte browsere, va trebui să aplicați diferite setări CSS pentru IE, ceea ce necesită timp pentru dezvoltarea și menținerea lucrării
* De asemenea, trebuie să adăugați biblioteca jQuery și fișierul plugin, care este un cod de linie de 61 (poate contribui Gzip-compression)
* Umbra în IE nu va arăta niciodată la fel ca în alte browsere
* Când aplicați parametrii de înlocuire, plugin-ul uneori generează un extra, ceea ce poate duce la o umbră uriașă respingătoare, deoarece parametrii vechi nu au fost modificați
* Spre deosebire de versiunea CSS3, pluginul nu suportă simultan mai multe umbre
* Din anumite motive, pentru a lucra în versiunea 8 a IE, trebuie să setați indexul z
Un alt exemplu de aplicare a metodelor care reduc costurile de timp este abilitatea de a crea propriile gradienți și fundaluri prin CSS3. Deși IE nu susține gradiente, este foarte ușor să le implementeze prin sintaxa familiei IE corespunzătoare.
Pentru a obține un gradient care va arăta la fel în toate browserele, inclusiv toate versiunile de Internet Explorer, folosiți codul CSS de mai jos (ultimele două linii pentru IE):
Pentru filtrele IE, GradientType poate fi setat la '1' (orizontal) sau '0' (vertical).
În mod obișnuit, problemele apar numai cu gradiente care au fost implementate printr-un filtru pentru IE.
* Codul dvs. CSS nu va fi valid, deși acest lucru se aplică și valorilor browserelor familiale WebKit și Mozilla
* IE8 are nevoie de un cod diferit, care necesită timp
* Gradienții din WebKit și Mozilla vă permit să declarați constrângeri; care nu pot fi atribuite gradientilor din IE, ceea ce scade nivelul de flexibilitate
* Filtrul IE nu vă permite să declarați gradiente radiale care sunt acceptate de browserele WebKit și Mozilla
* Pentru ca pantele să fie vizibile în IE, elementul de gradient trebuie să aibă un șablon
Culori de fundal transparent (RGBA) (Culori de fundal transparente)
CSS3 oferă o altă modalitate de a introduce transparența, de această dată prin canalul alfa, care este listat ca culoarea de fundal. IE nu oferă suport pentru această metodă, dar poate fi implementată într-un mod diferit.
Aici este codul canalului de fundal alpha pentru browserele compatibile cu CSS3:
Cu ajutorul codului CSS furnizat mai sus, culoarea de fundal va fi setată la valorile RGB + valoarea opțională "alpha" '.4'. Pentru a afișa acest lucru în IE, puteți utiliza filtrul corespunzător pentru a crea o gradare cu aceleași culori de început și sfârșit și în sprijinul cu o valoare de transparență. Aceasta ar trebui inclusă numai în CSS pentru IE, care va înlocui parametrii anteriori.
Gradientul din IE va arăta exact la fel ca în alte browsere, duplicând efectul de transparență al RGBA.
Primul exemplu, dintre cele prezentate mai jos, va funcționa în toate browserele care acceptă culori RGBA. Al doilea exemplu va funcționa numai în IE.
* Parametrii filtrului nu sunt valori CSS
* Codul CSS pentru IE necesită o linie suplimentară de cod
* Elementul necesită marcare
Note: Inițial, am folosit metoda PNG pentru a obține acest efect, dar a funcționat numai în IE7-8, iar IE6 a necesitat un hack special. Apoi am încercat o altă metodă și am realizat că funcționează mai bine. Metoda PNG este o altă modalitate, dar poate avea mai multe probleme și are mult mai multe efecte secundare.
Fundaluri multiple
O altă metodă CSS3, care a contribuit foarte mult la dezvoltarea CSS. În prezent, această funcție nu este acceptată numai de Opera și de IE. Dar ceea ce este interesant este că IE, până la versiunea 5.5, susține încorporarea mai multor elemente într-un singur element printr-un filtru.
Puteți continua să aplicați hack-ul la IE6 și veți vedea că imaginea este afișată de două ori pe care trebuie să o rezolvați prin adăugarea parametrului de fundal: nici unul și apoi aplicarea filtrului. Urmând același principiu, IE vă permite să utilizați 2 imagini ca fundal al unui element.
Pentru a aplica mai multe imagini de fundal în Firefox, Safari și Chrome, utilizați următorul cod CSS:
Pentru a aplica două imagini de fundal unui element din IE, utilizați următoarele în CSS pentru IE:
Blocul prezentat mai jos afișează câteva imagini în Chrome, Firefox și Safari (deși nu veți vedea nimic în IE):
Următorul bloc afișează mai multe imagini în IE6-8 (dar în alte browsere veți vedea o singură imagine):
* Codul dvs. CSS nu va fi valid
* A doua imagine este aplicată de parametrul filtrului și va fi afișată întotdeauna în colțul din stânga sus. Nu veți reuși să o repetați, deci această metodă nu este deosebit de flexibilă și poate fi utilizată numai în unele cazuri
* Pentru a centra un element (ca și în alte browsere), trebuie să creați o imagine cu un decalaj alb exact. Astfel, puteți simula centrarea (așa cum se arată în exemplu)
* Filtrul AlphaImageLoader poate provoca probleme la locul de muncă
Rotire element (rotire element) (rotire element)
CSS3 oferă mai multe funcții pentru transformare și animație. Există, de asemenea, modalități de rotire a elementelor în IE, deși acest lucru este rar întâlnit.
Pentru a roti elementul la 180 de grade (flip vertical), este necesar următorul cod CSS3:
Pentru a crea aceeași rotație în IE, trebuie să utilizați filtrul corespunzător:
Valoarea rotației poate fi 1, 2, 3 sau 4. Aceste numere reprezintă 90, 180, 270 sau 360 de grade de rotație a perspectivelor.
Elementul afișat mai jos este afișat într-o stare inversată în Internet Explorer. Deoarece este inversat cu ajutorul unui parametru al filtrului. Pentru a demonstra acest lucru mai clar, am aplicat 3 pixeli de grosime pentru marginea "inferioară", care este afișată acum în partea superioară a elementului.
* Codul dvs. CSS nu va fi valid, deși acest lucru se aplică și codului de browsere de la WebKit și Mozilla
* Browserele Webkit și Mozilla vă permit să rotiți elementele într-o anumită măsură, iar filtrul pentru IE are doar 4 valori, ceea ce reduce foarte mult flexibilitatea
În plus, IE vă permite să rotiți elemente cu aceeași flexibilitate ca și CSS3. Este greu de explicat prin exemplu, dar CSS3. aplicată în proiectul lui Paul Airex ne arată că putem folosi codul compatibil IE în cazul rotației CSS3.
Probabil, mulți dezvoltatori ne urăsc pentru această colecție, deoarece unii clienți sunt atât de inteligenți încât pot să conducă soluțiile Internet Explorer în bara de căutare, și apoi să le pună aici la dezvoltatori. Deci, fii atent la ceea ce spui clienților tăi. Deși IE nu susține aceste funcții în realitate, acest lucru nu înseamnă că este imposibil.
Și rețineți că de fiecare dată când trebuie să înlocuiți parametrii CSS originali pentru IE sau dacă trebuie să utilizați j # 097; vascript, jQuery sau orice fișier HTC, trebuie să trimiteți resurse externe. Acest lucru asigură că alte browsere nu vor face interogări inutile și inutile.
În multe cazuri, cea mai bună soluție pentru Internet Explorer este de a reduce partea funcțională a proiectului. Sperăm că soluțiile de mai sus vă vor oferi cel puțin câteva oportunități în crearea de aplicații cross-browser pentru clienți exigenți.
Articole similare
Trimiteți-le prietenilor: