Dar dezvoltatorii se confruntă cu faptul că clienții insista pe utilizarea de soluții cross-browser, cu caracteristici avansate CSS3. care necesită punerea lor în aplicare, chiar și în IE6. Acest articol a reunit un număr de opțiuni pe care dezvoltatorul le poate lua în considerare atunci când se lucrează în aceste condiții, atunci când este necesar suportul CSS3 în toate versiunile de Internet Explorer (IE6, IE7 si IE8 - toate dintre ele folosesc încă o cantitate semnificativă de vizitatori site-ului).
transparență
Este posibil ca toți dezvoltatorii sunt uimiți de faptul că Internet Explorer încă nu acceptă această proprietate foarte populare (deși supărătoare). Acesta este utilizat peste tot atât de mult timp încât toată lumea a uitat că, în realitate, - această proprietate CSS3. Deși IE nu are suport pentru proprietatea opacitate. Acesta oferă un efect de transparență similare utilizând său filtru de proprietăți proprii.
De fapt, ai nevoie doar a doua linie, care funcționează în toate cele trei versiuni de Internet Explorer. Dar dacă trebuie să utilizați numai transparența în IE8 pentru un motiv oarecare, puteți utiliza al treilea rând, care este cele mai vechi versiuni de browsere nu recunosc.
Valoarea de transparență, este instalat la sfârșitul fiecărei proprietăți de linie pentru IE, de asemenea, funcționează ca valoarea opacității. Oferă un număr de la 0 la 100 (proprietăți de opacitate utilizează numărul de două puncte în intervalul de la 0 la 1. De exemplu, „44“ pentru IE este echivalent cu „0,44“ pentru alte browsere). Instalarea de transparență a moștenit elemente ale descendenților, care poate fi confuz atunci când lucrează.
demonstrație
Acest element are o culoare de fundal siniy (# 0000FF), dar cu o transparență de 40%, făcându-l albastru derivarea
Același element fără setări de transparență.
deficiențe
proprietate filtru este utilizat numai produse Microsoft, care este, CSS-ul nu va valida
Ca și în cazul folosirii proprietăților opacitate. valoarea filtrului IE moștenită de toate elementele descendenților
colțuri rotunjite
Remiz Rahnas dezvoltat fișierul HTC numit colțuri CSS cilindrat (o puteți descărca din Codul Google). Soluția poate fi utilizată în foi de stil, destinate numai pentru IE.
Acesta este un cod minunat nu are nevoie de nici un sprijin din partea ta, dacă ai nevoie doar pentru a obține în jurul colțuri. Este necesar doar să atașați fișierul la codul CSS și script-ul va analiza automat codul CSS pentru a găsi valorile razelor în proprietatea border-radius.
Codul ar putea arata ceva de genul:
În mod ideal, doriți să utilizați proprietatea numai comportamentul în IE pentru foile de stil, folosind același selectorul în CSS, astfel script-ul va primi valorile razelor.
demonstrație
Deoarece tehnica necesită utilizarea unui fișier HTC extern, demo-ul poate fi găsit aici (pagina link-ul ar trebui să fie deschisă în IE).
deficiențe
- HTC fișier este 142 de linii de cod (minimizarea sau arhivarea pot ajuta, dar nu va elimina problema complet)
- proprietate de comportament face ca CSS-ul nevalid
- Serverul dvs. ar trebui să fie capabil de a descărca fișierul HTC pentru a utiliza această tehnică
- Se pare că IE8 are aceeași problemă atunci când se utilizează elementele de fișier HTC cu colțuri rotunjite. care sunt proprietăți negative, z-index
dreptunghiuri umbre
proprietate box-shadow este o altă caracteristică utilă a CSS3, care adaugă un element de umbră naturală. IE nu are suport pentru proprietățile box-umbra. dar proprietatea de filtrare oferă o alternativă decentă.
Trebuie remarcat faptul că proprietatea box-shadow a fost eliminată din limitele modulului și fundaluri CSS3. Astfel, în CSS3, există o oarecare incertitudine cu privire la viitorul său în acest moment.
În plus față de proprietățile webkit și browserele Mozilla, puteți configura un filtru care funcționează în toate versiunile de Internet Explorer.
demonstrație
Acest element este o umbră care apare în Internet Explorer.
deficiențe
- Setările de filtrare pentru umbre în IE nu corespunde exact cu proprietatea box-shadow. Pentru a obține același tip de necesitatea de a efectua o reglare precisă a valorilor, care poate fi o problemă serioasă.
- Proprietățile de filtrare sunt testate, precum și proprietăți pentru WebKit și Mozilla. Astfel, vina este inerentă în toate browserele.
umbra textului
Adăugarea umbrelor în text inscripții practicate în proiectarea și tipărirea de pagini web a fost timp de mulți ani. Web design este, de obicei, problema este rezolvata cu ajutorul imaginilor și, uneori, prin duplicarea textului offset. CSS3 oferă dezvoltatorilor o modalitate ușoară de a adăuga umbre la text utilizând proprietăți simple și flexibile ale textului-umbra.
Din păcate, umbra adăugării la textul în Internet Explorer nu este un astfel de proces simplu - chiar și cu ajutorul unui filtru. Pentru a rezolva această problemă există un plugin jQuery. dezvoltat de web designer danez Kilian Valkhof.
În primul rând trebuie să instalați în proprietate CSS text-umbra.
Valorile stabilite culoare umbră, poziția pe axa orizontală, poziția pe axa verticală și gradul de neclaritate.
După includerea bibliotecii jQuery și plugin-ul în documentul dvs., puteți suna plugin:
Plugin-ul, de asemenea, vă permite să utilizați setările pentru a modifica proprietățile CSS.
demonstrație
Din moment ce această tehnică necesită utilizarea bibliotecii jQuery și un plug-in extern, puteți vedea o demonstrație aici.
deficiențe
Există unele dezavantaje serioase care împiedică o utilizare mai largă a acestei metode. Probabil că ar fi mai bine pentru a crea o imagine pentru a înlocui textul în IE.
- Pentru a umbra arăta foarte asemănătoare în toate browserele, va trebui să setați setări specifice pentru IE numai în timpul designul paginii
- Cereri, inclusiv biblioteca jQuery, adică, un cod suplimentar 61-line
- versiunea umbră în IE nu arată la fel ca și în alte browsere
- Când utilizați parametrii pentru plug, care modifică valorile de setare ale proprietăților în CSS, plugin-ul funcționează incorect, umbre neglijent scoate
- Spre deosebire de versiunea CSS3 plugin nu are suport pentru mai multe umbre
- Din anumite motive, pentru a face să funcționeze în IE8 trebuie să ceară pentru valoarea indicelui z elementului
Crearea de gradienți de fundal este un excelent CSS3 tehnică, care ajută la economisirea timpului de dezvoltare. Deși Internet Explorer nu acceptă gradienti CSS3, foarte ușor să le pună în aplicare folosind o sintaxă specifică.
Pentru a determina gradientul care va arata la fel în toate browserele, inclusiv toate versiunile de Internet Explorer, utilizați următorul cod CSS (ultimele două linii sunt pentru IE):
Pentru IE filtru GradientType poate avea valori '1' (orizontal) sau '0' (vertical).
demonstrație
Acest element are un gradient liniar, care acționează ca Internet Explorer.
deficiențe
- Fișierul dvs. CSS nu trece de inspecție. Această afirmație este adevărată pentru valorile WebKit și browserele Mozilla
- Alte cod necesare pentru IE8, care crește timpul de dezvoltare
- Gradiente WebKit și Mozilla vă permite să declare un „stop“, nu este posibil pentru gradientul IEy
- Filtru IE nu poate determina gradientul „radial“, care este menținută în WebKit și Mozilla
- Gradientului a fost vizibil în IE, elementul trebuie să aibă un șablon (adică, trebuie setați proprietățile care determină parametrii grafice, cum ar fi înălțimea și lățimea pentru ea)
culoare de fundal transparent (RGBA)
CSS3 este o altă metodă de utilizare a transparenței, care afectează canalul alfa pentru culoarea de fundal specificate. Internet Explorer nu acceptă această caracteristică, dar poate fi jucat.
Pentru compatibilitate cu sintaxa CSS3 browsere pentru a seta culoarea de fundal a canalului alfa, după cum urmează:
regula CSS setează valoarea de fundal de culoare RGB și modificați în continuare valoarea alfa a 0,4. Pentru a simula în Internet Explorer se poate folosi un filtru pentru a crea un gradient cu aceleași culori inițiale și finale care se potrivesc cu valoarea de transparență. O astfel de proprietate poate fi inclus în foaia de stil numai pentru IE, care va anula setările anterioare.
Gradient arată la fel în IE id alte browsere, duplicarea efectul de transparență RGBA. \
demonstrație
Primul exemplu lucrează în browsere care acceptă RGBA, iar al doilea funcționează numai în Internet Explorer:
Acest paragraf are o culoare de fundal de transparență 40% definită prin RGBA
Punctul IE folosește filtru pentru a simula transparență RGBA (funcționează numai în IE).
deficiențe
- proprietate filtru nu trece de validare
- Este nevoie de CSS linie suplimentară pentru IE
- Elementul trebuie să aibă un șablon
fundaluri compozite
Această tehnică CSS poate găsi multe aplicații practice, aplicarea pe scară largă. În prezent, IE și Opera nu acceptă medii compozite. Fapt interesant - versiunea IE 5.5 are capacitatea de a folosi medii compuse din același element cu un filtru.
În Firefox, Safari și Chrome pentru a utiliza medii compozit este următoarea regulă CSS:
Pentru a utiliza două medii pe un element în IE este următoarea regulă:
demonstrație
Mai jos este un element integrant alimentat de fundal, care este afișată în Chrome, Safari și Firefox (în IE nu pot vedea nimic):
Mai jos element dat, are un model compozit, care este de ieșire în IE (în alte browsere un singur model de ieșire):
deficiențe
- Codul CSS nu este testat
- A doua imagine este utilizat într-un filtru de proprietate. Acesta este întotdeauna afișată în partea din stânga sus și nu se va repeta. Astfel, metoda este limitată la utilizarea
- Pentru a plasa un element în centru (ca și în alte browsere). aveți nevoie pentru a crea o imagine cu un spațiu alb suplimentar în jurul valorii de centrare pentru a simula
Rotirea elementelor (transformare CSS)
CSS3 are un set de transformare și de animație, pe care unii ar putea parea nepotrivite pentru CSS. Cu toate acestea, există o modalitate de a simula elementul de rotație în Internet Explorer? chiar dacă într-o formă limitată.
elementul rotativ 180 de grade (revoluție verticală):
Pentru astfel de acțiuni în IE folosește filtru:
Parametrul de rotație poate avea următoarele valori: 1, 2, 3 sau 4. în ceea ce corespunde rotației cu 90, 180, 270, sau 360 de grade.
demonstrație
Mai jos element dat afișează textul cu susul în jos cu filtrul de proprietate. Pentru a demonstra elementul este lățimea întuneric margini gri de 3 pixeli de mai jos. Când porniți frontiera de celule este afișată în partea de sus.
Acest element este inversat cu 180 de grade.
deficiențe
- tabel CSS nu trece de inspecție.
- În timp ce Mozilla și WebKit poate fi rotit în grade trepte B1, filtrul IE permite rotirea numai 4 faze, care limitează flexibilitatea.
concluzie
Deși IE nu are suport pentru CSS3, acest lucru nu înseamnă că este imposibil să se realizeze astfel de proprietăți.
În multe cazuri, cea mai bună soluție pentru a se ocupa cu organizarea de IE va afișa un set limitat de proprietăți. Metodele de mai sus vor ajuta în cazul în care clientul insistă pe o redare mai exactă de browser a resursei.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!