Aspect CSS pentru browsere încrucișate. Compatibilitate între browsere: design web receptiv pentru browsere mai vechi. Probleme cu browserele vechi și cu diferite abordări de dezvoltare

Primul fișier care a apărut a fost reset.css. Acest fișier css conține o listă a tuturor etichetelor HTML posibile și resetează valoarea lor la zero. Adică, elimină toate indentările posibile, face ca fontul să fie același în toate etichetele, resetând toate stilurile de text. Deci, toate titlurile și paragrafele sunt afișate în text simplu, de aceeași dimensiune și fără indentare. Ca rezultat, obținem stilurile implicite resetate în toate browserele.

Funcționează astfel: mai întâi includem fișierul reset.css pe pagină, iar după el propriul fișier cu stiluri. Ca rezultat, mai întâi resetam toate stilurile și abia apoi setăm în style.css design html Etichete. În acest fel, reușim că toate browserele își vor reseta stilurile la implicite, iar toate markupurile se vor baza pe stilurile pe care le-am setat în style.css.

Puteți descărca reset.css de la cssreset.com

Sau puteți descărca versiunea lui Eric Meyer „ Resetați CSS” 2.0 prin butonul de mai jos, de pe blogul meu:

După ce reset.css este conectat la pagină, toate stilurile trebuie rescrise. Și de fiecare dată această activitate devine obositoare. Prin urmare, resetarea a fost înlocuită cu un alt instrument - normalizare. Normalze - după cum sugerează și numele, nu resetează toate stilurile, ci le normalizează, aducându-le la un singur aspect în toate browserele. După aplicarea acestuia, stilurile de bază de afișare a titlurilor, dimensiunilor fonturilor, indentărilor... sunt unificate și afișate identic în toate browserele. Folosind-o, puteți economisi o anumită perioadă de timp, care în cazul resetarii ar fi cheltuită pentru scrierea stilurilor de resetare.

Dacă nu ai folosit încă normalize.css, îți recomand să-l încerci în următorul tău proiect și cine știe, poate nu vei putea să-l refuzi 😉

Puteți descărca normalize.css de pe necolas.github.io/normalize.css

Sau descărcați de pe blogul meu:

Nu există un răspuns clar.

Primul resetează toate stilurile, al doilea duce la un singur numitor. Designerii de aspect cu experiență care folosesc reset.css au de obicei propriile seturi de stiluri care sunt incluse imediat după resetare pentru a stila conținutul. Și nu trebuie să redefinească stilurile pentru elementele de bază de fiecare dată într-un aspect nou. Asta fac si eu. Sunt confortabil și știu ce stiluri am stabilit implicit și cum funcționează.

normalizarea este convenabilă dacă îi studiați structura, o puteți modifica pentru dvs. - prin ajustarea de bază aspect Etichete Și lucrul cu el va fi, de asemenea, convenabil din mers - atunci când trebuie să faci multe compoziții și des.

Fiecare instrument este bun, principalul lucru este să-l folosești corect 😉

Toți utilizatorii de Internet folosesc programe speciale– browsere. Un browser este un program care comunică între utilizator și server. Browserul trimite cereri către server și primește răspunsuri de la acesta, iar acest răspuns este convertit în formularul în care toată lumea este obișnuită să apeleze o pagină de Internet cu tot conținutul ei, text, imagini, videoclipuri etc. Aspectul final al paginii (locația conținutului, dimensiuni, culoare, font etc.) este setat folosind Aspect HTMLși foi de stil în cascadă (CSS), care au fost transformate dintr-o imagine desenată de un designer într-o vedere pe care browserul o poate înțelege. Aceasta se numește aspect. Cu cuvinte simple Aspectul HTML este aranjarea elementelor unei pagini de Internet, unde acestea ar trebui să fie amplasate în funcție de designerul care a creat aspectul paginii viitoare.

Dar fiecare utilizator preferă un browser care le este mai familiar. În prezent, există 5 browsere cele mai populare, care sunt indicate de statistici. Acestea sunt Chrome, Safari, Opera, FireFox și Internet Explorer(IE). Aceste browsere de o versiune sau alta sunt cele mai des folosite de utilizatorii de Internet pentru a naviga pe World Wide Web. Fiecare dintre aceste browsere are propriile sale funcționalități și propriile sale caracteristici de afișare a paginilor de Internet.

În marea varietate a tuturor browserelor și a versiunilor acestora, precum și în caracteristicile lor de afișare a paginilor de Internet, a apărut conceptul de aspect HTML cossbrowser. Deci, ce este compatibilitatea între browsere?!

Compatibilitatea cross-browser este capacitatea paginilor de Internet de a fi afișate în mod egal în diferite versiuni de browsere, fără distorsiuni sau „răspândirea” elementelor paginii, indiferent de caracteristicile browserului în sine.

Cel mai o cantitate mare au aceste caracteristici browsere de internet Explorer de la Microsoft, motiv pentru care majoritatea codificatorilor HTML „nu le plac” și le inventează pentru asta căi diferite conducând la afișarea corectă a paginii (aceste metode sunt numite „cârje” de către designerii de layout). Părerea noastră personală este că este posibil să se creeze un browser încrucișat de pagină HTML fără a folosi tocmai aceste „cârje” care înfundă codul HTML al paginii.

Nu este un secret pentru nimeni că fiecare browser are propriile stiluri de design pentru anumite elemente de cod HTML, dimensiunea fontului, dimensiunea indentării etc. ceea ce va duce la răspândirea elementelor paginii și nu va fi cross-browser.
Din aceasta putem concluziona că toate stilurile personalizate browsere diferite trebuie să „dezactivați”, sau mai degrabă să le resetați la aceleași. Unii codificatori HTML fac acest lucru direct atunci când setează stilurile CSS la elemente individuale, folosim o practică diferită. Resetăm toate stilurile CSS ale browserului chiar la începutul documentului CSS. Pentru a face acest lucru, folosim un set modificat de stiluri CSS propuse de meyerweb.com

Acest cod, adăugat la stilurile CSS, resetează stilurile proprii ale tuturor browserelor la același. Acest lucru vă va permite să faceți aspectul Pagini HTML identice în toate browserele, indiferent de stilurile proprii.

A doua regulă a aspectului HTML între browsere este conformitatea cu standardele HTML și XHTML aprobate de consorțiul W3C. Fiecare document HTML (și anume un document) are propriul său standard și propriile sale caracteristici de scriere.

Vom analiza mai târziu tipurile de standarde de documente HTML și diferențele lor, deoarece acest subiect necesită o analiză și o descriere separată.

Valabilitatea unui document HTML constă în conformitatea cu standardele și normele aprobate ale consorțiului W3C.

Conform standardelor W3C, fiecare etichetă de document HTML trebuie să aibă propria pereche de etichete. Aceste perechi se numesc etichete de deschidere și de închidere, dar există excepții de la această regulă - acestea sunt etichete ,
etc., aceste etichete nu au o pereche de închidere.

Nu este închis etichetă asociată, fiecare browser îl poate înțelege diferit și poate afișa conținutul inclus în aceste etichete într-un mod care nu este intenționat de designerul de layout.

Puteți verifica validitatea unui document HTML pe site-ul web al consorțiului W3C.

Acest cod HTML respectă standardele XHTML 1.0 Strict și este valabil
Și conține atât etichete asociate (de închidere), cât și o etichetă neîmperecheată

Acest cod HTML nu respectă standardele W3C și nu este valid

Există multe modalități de a verifica compatibilitatea între browsere a unui document HTML tastat, dintre care cel mai simplu este să instalați toate browserele populare pe computer. Dar ce zici versiuni diferite Internet Explorer?! - vor intreba multi.

Există o modalitate simplă de a colecta toate versiunile de IE într-o singură sticlă, ca să spunem așa. Puteți descărca IE Tester, care include toate versiunile de IE începând cu IE 5.5.

De asemenea, puteți utiliza serviciul Browsershots.org, care vă permite să fotografiați documentul dvs. HTML din peste 40 de browsere diferite.

Compatibilitatea între browsere este capacitatea unui site de a se afișa corect în diferite browsere. Resursa ar trebui să funcționeze la fel în toate versiunile de browser.

Acest lucru este deosebit de important în era designului web responsive, când capacitatea front-end-ului de a se adapta la o gamă largă de diverse dispozitive oferind totuși o experiență de vizionare optimă.

Anterior, un designer crea un aspect de design în Photoshop, care apoi era transferat în HTML și CSS. Astăzi, schimbările tehnologice ne obligă să regândim acest concept. Nu mai putem prezice ce browser, rezoluție sau dispozitiv va fi folosit pentru a vizualiza site-ul. S-au dus vremurile în care majoritatea computerelor utilizau o rezoluție fixă ​​de 1024 pe 768 pixeli, iar site-urile puteau fi proiectate cu dimensiuni statice.

Browserele moderne acceptă pe deplin HTML5 și CSS3. Dar același cod HTML/CSS/JavaScript este interpretat diferit în browserele mai vechi, ceea ce duce la „incompatibilitatea între browsere” a site-ului. Acest lucru este valabil mai ales pentru versiunile mai vechi de Internet Explorer.

În acest articol ne vom uita la statisticile actuale privind vizualizările paginilor web și vom oferi o listă de instrumente care ajută la rezolvarea diferitelor probleme de compatibilitate.

Statisticile globale pentru 2015 arată că primele 14 rezoluții ale ecranului utilizate variază de la 1920 pe 1080 la 320 pe 480 pixeli.

Deși Windows 7 (31,20%) deține încă o cotă mare de piață, platformele mobile încep să înlocuiască platformele desktop tradiționale.

Privind statisticile pentru 2015 privind browserele folosite, vedem că primul loc îi revine Chrome (toate versiunile - 44,87%), locul doi - Firefox (toate versiunile - 10,37%), al treilea Internet Explorer 11 (6,84%).

Lansare accelerată a noilor versiuni Google Chromeși Firefox vă permit să dezvoltați mai eficient proiecte pentru aceste platforme. O imagine ușor diferită apare pentru „băiatul rău” Internet Explorer, deoarece versiunile vechi ale acestuia pot fi încă găsite pe Internet. Și acest lucru duce la probleme cu compatibilitatea între browsere a site-ului.

Microsoft a încetat să accepte IE6 pe 8 aprilie 2014. Și din 2016, doar cea mai recentă versiune de Internet Explorer va fi acceptată și actualizată. Acest lucru înseamnă efectiv că suportul pentru IE7 și IE8 a fost complet abandonat la începutul lui 2016, indiferent de sistem de operare. IE9 va fi acceptat numai în Windows Vista, IE10 - numai pe Windows Server 2012, IE11 - pe Windows 7 și Windows 8.1:

Github nu mai acceptă IE 7 și 8. În plus, unele dintre funcționalitățile Twitter nu funcționează în IE8. Și, în sfârșit, cadrul popular nu va suporta IE8, începând cu versiunea 4.

Cu toate acestea, statisticile de utilizare pot varia în funcție de regiune, 6,11% dintre utilizatorii din China încă navighează prin IE8 în 2015. Dacă ne gândim că în China erau aproximativ 724.400.000 de utilizatori de Internet, se poate înțelege că aproximativ 44.200.000 de chinezi continuă să folosească IE8 în acest an.

Prin urmare, piețele regionale, clienții specifici și cerințele industriei pot varia semnificativ. Acest lucru este valabil mai ales pentru agențiile corporative și guvernamentale.

Principiul de bază aici este următorul: cu cât compatibilitatea între browsere este mai mare, cu atât va fi necesar mai mult timp de dezvoltare, ceea ce duce la o creștere a costului proiectului. Pentru a lua o decizie informată, solidă din punct de vedere economic, trebuie să vă puneți următoarele întrebări:

• Care este publicul tău țintă?
• Ce regiune geografică ar trebui să vizați?
• Ce browsere și dispozitive folosesc vizitatorii dvs.?
• Există factori tehnici în compania sau industria dvs. care vă obligă să acceptați versiuni specifice ale browserelor mai vechi?
• Din perspectiva comerțului electronic, care sunt ratele de conversie și rentabilitatea investiției diferitelor grupuri de utilizatori în funcție de versiunea browserului?

Răspunzând la aceste întrebări folosind date statistice, de exemplu, din Google Analytics, puteți obține o imagine obiectivă.

Designul web receptiv se bazează în mare măsură pe interogări media pentru a modifica CSS pentru diferite rezoluții de ecran. În plus, site-urile web moderne se caracterizează prin utilizarea elementelor semantice HTML5 (de exemplu, , , , , ) pentru a grupa componentele de design. Selectorii CSS3 sunt folosiți pentru a selecta elemente specifice și apoi pentru a atribui stiluri (de exemplu, , :checked , :nth-child(n) , :not(selector) , :last-child) ). În cele din urmă, tipografia receptivă este adesea specificată folosind unități REM (rădăcină em).

Acest lucru ne aduce la următoarele provocări tehnice atunci când implementăm compatibilitatea CSS între browsere:

• Interogări media CSS3
• Semantic elemente HTML 5: nu este acceptat în IE6, 7 și 8;
• Selectoare CSS3: Nu sunt acceptate în IE6. Acceptat doar parțial în IE7 și 8;
• Unități REM: nu sunt acceptate în IE6, 7 și 8. Acceptat doar parțial în IE9 și 10;
• Limita regulilor CSS: IE9 și mai jos acceptă doar 4095 selectoare CSS. Regulile de după selectorul 4095 nu se aplică.

Greșelile de mai sus vor avea cel mai mare impact asupra strategiei utilizate la implementarea designului responsive.

Există două strategii principale de dezvoltare: simplificarea progresivă și îmbunătățirea progresivă.

Îmbunătățirea progresivă se bazează pe principiul începerii dezvoltării de la un numitor comun, cu cerințele tehnice minime și nivelul de experiență al utilizatorului oferit de site. Vizitatorii care accesează site-ul prin ultimele versiuni browsere și dispozitive, vor fi deservite de o versiune extinsă progresiv a site-ului cu toate cele mai noi funcții.

Pe de altă parte, utilizatorilor de browsere mai vechi și de conexiuni lente la Internet li se va oferi un program trunchiat grafic, dar totuși versiune funcțională site-ul.

Această abordare a implementării compatibilității între browsere implică începerea dezvoltării cu o versiune simplă, la care apoi se adaugă elemente mai complexe. Browserele mai vechi vor putea afișa site-ul cu un nivel de bază de experiență de utilizator. Și noi funcții HTML/CSS/JavaScript vor fi disponibile în browserele care le pot folosi efectiv.

În schimb, simplificarea incrementală oferă un nivel complet funcțional de UX în browserele moderne. Și apoi își reduce treptat complexitatea pentru browserele mai vechi datorită graficii, dar fără a atinge funcționalitatea. Ideea este să începeți dezvoltarea cu cele mai recente standarde web și apoi să încercați să minimizați problemele asociate cu browserele mai vechi.

Ce abordare alegeți depinde de preferințele personale și de condițiile proiectului:

• Îmbunătățirea progresivă oferă o mai mare stabilitate, deoarece puteți adăuga treptat noi funcții browsere moderne. Dar necesită o planificare mai atentă;
• Unii dezvoltatori susțin că nu are rost să susțină browserele vechi și ar trebui să fie utilizate Cele mai noi tehnologii. Suportul pentru browsere moderne oferă o experiență de utilizator mult mai bună;
• Există o percepție că îmbunătățirea progresivă este moartă, deoarece multe aplicații JavaScript nu funcționează bine cu această abordare;
• Accesibilitatea web pentru instituțiile publice poate fi supusă cerințelor legale locale și poate necesita o abordare specifică.

Odată cu apariția instrumentelor de detectare a caracteristicilor, cum ar fi Modernizr, personal înclin spre utilizarea simplificării incrementale și a listei negre de browser atunci când dezvolt site-uri conforme.

Pentru a detecta cât mai repede posibil probleme legate de browser JavaScript, ar trebui să testați site-ul în diferite browsere și rezoluții în timpul dezvoltării. Există diferiți emulatori de software care ne pot ajuta:

• Browserstack este un serviciu comercial care oferă acces la un mediu de testare în care vă puteți testa proiectul pe peste 700 de browsere desktop și dispozitive mobile utilizarea unei mașini virtuale în cloud;
• Microsoft Virtual Machines - Dacă rulați Linux, nu veți avea acces la Internet Explorer. Soluția poate fi descărcarea imaginilor mașini virtuale pentru IE6 la IE11, care poate fi apoi utilizat împreună cu Oracle VM Virtualbox sau Vagrant pentru testare locală;
• Diferitele rezoluții de ecran pentru un anumit browser pot fi testate rapid folosind serviciul online Screenfly. Folosind pluginuri de browser, cum ar fi Window Resizer pentru Google Chrome, sau direct în secțiunea de instrumente pentru dezvoltatori din Chrome și Firefox.

De obicei, încep proiecte noi prin resetarea CSS folosind Normalize.css, care oferă o compatibilitate mai bună între browsere atunci când definesc stiluri implicite de elemente HTML până la Internet Explorer 8. Normalize.css păstrează stilurile dorite de elemente, normalizează aspectul lor și corectează o serie de erori și inconsecvențe în diferite browsere.

În plus, multe browsere vechi nu pot interpreta elemente HTML necunoscute și Proprietăți CSS. Când browserul întâlnește o bucată de HTML sau CSS pe care nu o înțelege, o ignoră și continuă procesul de randare. Multe aplicații folosesc prefixe de furnizor pentru a adăuga caracteristici CSS noi, experimentale sau non-standard înainte de a le implementa în specificație:

// Browsere Webkit, cum ar fi Chrome și Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Problema este că prefixele sunt dificil de utilizat și au multe erori asociate cu ele. Așa că folosesc pluginul CSS Autoprefixer în combinație cu Grunt.

Regulat Reguli CSS vor fi procesate folosind plugin-ul și li se vor adăuga prefixe pe baza bazei de date „Pot folosi”. Se recomandă să specificați în configurație versiunile de browsere care trebuie suportate, de exemplu:

opțiuni: ( browsere: ["ultimele 2 versiuni", "adică >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )

Ca exemplu, luați în considerare următoarea clasă CSS:

Exemplu ( imagine de fundal: gradient liniar (stânga sus, #4676dd, #00345b); afișare: flex; tranziție: 1s all; )

CU folosind CSS Autoprefixer îl convertește în:

Exemplu ( imagine de fundal: -webkit-linear-gradient (stânga sus, #4676dd, #00345b); imagine de fundal: -moz-linear-gradient (stânga sus, #4676dd, #00345b); imagine de fundal: linear- gradient(stânga sus, #4676dd, #00345b); afișare: -webkit-box; afișare: -webkit-flex; afișare: -moz-box; afișare: -ms-flexbox; afișare: flex; -webkit-tranziție: 1s toate; -moz-tranziție: 1s toate; tranziție: 1s toate; )

Dacă trebuie să creați un CSS alternativ sau să activați JavaScript între browsere pentru versiuni anterioare Internet Explorer, puteți folosi comentarii condiționate. Sunt acceptate în Internet Explorer 5-9, folosesc sintaxa Comentarii HTMLîn combinaţie cu valori booleene. În funcție de valoarea booleană (adevărat sau fals), codul din interiorul etichetelor de comentariu va fi afișat sau ascuns în versiunile de browser corespunzătoare:

COD CARE VA FI EXECUTAT // dacă Internet Explorer // dacă NU Internet Explorer // dacă Internet Explorer 7 // dacă NU este Internet Explorer 7 // dacă Internet Explorer 9 sau LOWER // dacă Internet Explorer 7 sau SUPERIOR // dacă Internet Explorer 6 SAU 7 // dacă Internet Explorer 6 este mai mare, DAR SUB 9

Codul este ascuns automat în toate browserele care nu acceptă comentarii condiționate. Un bun exemplu al modului în care comentariile condiționate pot fi utilizate eficient în practică este HTML5 Boilerplate, care adaugă clase specifice CSS pentru versiuni învechite Internet Explorer:

Inconsecvențele tehnice ale browserelor vechi pentru design web responsive pot fi corectate folosind o completare polivalentă. Este o bucată de cod JavaScript care „umple” un decalaj funcțional specific dintre un browser vechi și o funcție. Există întreaga linie polyfills care pot fi utilizate pentru a oferi suport browser pentru funcțiile HTML5.

Mai jos sunt mai multe polyfill-uri concepute pentru a elimina problemele legate de browsere încrucișate ale site-ului menționate la punctul 3:

• respond.js - implementează interogări media CSS3 pentru Internet Explorer 6 - 8;
• html5shiv permite utilizarea elementelor semantice HTML5 în Internet Explorer 6 - 8;
• selectivzr - Emulează selectoarele și pseudoclasele CSS3 în Internet Explorer 6 - 8. Suportul complet necesită fie Mootools 1.3, fie NWMatcher 1.2.3. Suport parțial disponibil de la folosind JQuery 1.3/1.4 ;
• REM-unit-polyfill - Stabilește dacă browserul acceptă unități rem și oferă o rezervă. Funcționează cu IE8 și mai jos.

Pentru a utiliza polyfills-urile specificate, acestea trebuie adăugate din CDN-ul sau ca fișier în formatul corect în interiorul comentariilor condiționate din secțiune (nu uitați să includeți una dintre bibliotecile JavaScript necesare pentru Selectivizr):

Pentru fiecare proiect, trebuie să evaluați dacă aceste scripturi suplimentare sunt cu adevărat necesare, deoarece pot duce la probleme de performanță. Majoritatea polyfill-urilor sunt compacte, dar fiecare script suplimentar care este încărcat reprezintă o solicitare HTTP suplimentară. Acest lucru poate încetini încărcarea paginii.

Biblioteca Modernizr, scrisă în JavaScript, vă va ajuta să verificați compatibilitatea între browsere a unui site: dacă o anumită funcție HTML5 sau CSS3 este acceptată în diferite browsere. Dacă caracteristica nu este disponibilă, poate fi încărcat cod alternativ CSS sau JavaScript.

Ideea este de a determina direct funcţionalitate browser în loc să încerce să instaleze o anumită versiune a acestuia. Și pe baza acestui lucru, obțineți funcționalitatea acesteia, care este o modalitate mai puțin eficientă și fiabilă.

Este de remarcat faptul că Modernizr nu adaugă caracteristici lipsă în browser. Prin urmare, va trebui să furnizați cod din CSS alternativ sau polyfill.

Mai întâi trebuie să descărcați ansamblul complet funcțional. Mai târziu, când sunteți gata să dezvoltați, puteți crea o versiune personalizată cu caracteristicile specifice pe care le testați. Tot ce trebuie să faceți este să adăugați clasa .no-js la eticheta HTML a site-ului dvs. și să includeți scriptul Modernizr în secțiunea head după orice fișier CSS:

Modernizr Demo Modernizr Demo

Acesta este un exercițiu Modernizr.

Clasa .no-js este folosită pentru a verifica dacă JavaScript este activat în browserul utilizatorului. Dacă este activat, Modernizr va înlocui .no-js cu clasa .js. Funcția de testare a Modernizr analizează dacă o anumită caracteristică este acceptată în browser și generează o serie de clase care sunt adăugate elementului HTML. Google Chrome 47.0.2526.111, de exemplu, va returna următoarele clase de obiecte.

În prezent, Modernizr este disponibil ca obiect global care poate fi apelat împreună cu un nume de funcție pentru a verifica dacă există. Returnează o valoare booleană (adevărat sau fals).

Să luăm în considerare două exemple simple CSS și JavaScript.

Un exemplu de rezolvare a problemelor CSS între browsere: verificarea suportului SVG și furnizarea PNG ca alternativă

Tendința actuală este de a folosi din ce în ce mai mult SVG (Scalable Vector Graphics), dar aceste grafice nu sunt acceptate în IE8 și mai jos. Dacă SVG este acceptat în browser, Modernizr generează clasa CSS .svg . Dacă SVG nu este disponibil, instrumentul adaugă clasa .no-svg la HTML. Cu CSS de mai jos, browserele care acceptă SVG vor folosi clasa obișnuită .logo, în timp ce browserele care nu acceptă SVG vor folosi regulile .no-svg:

Sigla ( imagine de fundal: url("logo.svg"); lățime: 164px; înălțime: 49px; ) .no-svg .logo (imagine de fundal: url("/logo.png"); lățime: 164px; înălțime : 49 pixeli;)

Exemplu JavaScript: definirea razei de frontieră și adăugarea claselor CSS corespunzătoare

Rotunjirea colțurilor cadrului nu este acceptată în IE8 și mai jos. Putem crea diferite clase CSS care sunt aplicate în funcție de prezența funcției border-radius:

// Clasă pentru un browser cu funcția border-radius .round-borders ( border-radius: 5px; ) // Clasă pentru un browser fără funcția border-radius .black-borders ( chenar: 3px solid #000000; )

Acum puteți folosi JavaScript pentru a stoca ID-ul țintă ca variabilă și apoi adăugați clase CSS printr-o condiție:

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = „round-borders”; ) else ( element.className = „black-borders”; )

Când vine vorba de design web receptiv în browserele vechi, nu există o soluție universală. solutie universala. Este important să analizați audiența resursei pentru a vă face o idee despre numărul real de utilizatori de browser. Apoi, trebuie să testați temeinic site-ul pentru a identifica potențiale probleme între browsere.

Orice designer web sau designer de layout știe cum CSS3 poate face viața mai ușoară, accelera și optimiza procesul de layout. Proprietăți precum „border-radius” și „box-shadow” fac posibilă evitarea utilizării de imagini inutile și a zeci de linii de cod, ceea ce, la rândul său, accelerează procesul de aspect al site-ului și crește viteza de încărcare a acestuia. Folosind CSS3 în munca mea, am întâmpinat problema compatibilității între browsere, și anume, site-urile fiind afișate în browsere mai vechi și, bineînțeles, în Internet Explorer. Astăzi vă voi spune ce instrumente folosesc pentru a obține compatibilitatea între browsere CSS3, inclusiv Internet Explorer.

Să aruncăm o privire mai atentă la o serie de metode care pot fi utilizate pentru a realiza utilizarea CSS3 între browsere.

SETĂRI PRINCIPALE

Descărcați scripturile și copiați-le într-un folder cu Stiluri CSS. Iată o listă de scripturi de care vom avea nevoie: CSS3 PIE este asistentul nostru în lucrul cu IE. PIE învață Internet Explorer să înțeleagă CSS3. Dosarul de descărcare CSS3PIE conține toate fișierele de care avem nevoie. Vom folosi fișierul PIE.htc și îl vom accesa prin CSS, așa că trebuie să îl plasăm în același folder cu fișierele de stil.

Selectivizr este folosit pentru a gestiona selectoarele CSS3. Este folosit în combinație cu biblioteci JavaScript precum jQuery sau Mootools. Recomand să alegeți Mootools, deoarece acceptă toate funcțiile Selectivizr (selectori CSS).

În acest exemplu, voi folosi găzduirea Google cu biblioteca Mootools, pentru a face acest lucru, voi lipi pur și simplu codul necesar în cap:< script type = "text/javascript" src = "selectivizr-min.js" >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js " >
De asemenea, putem folosi jQuery pentru a obține o alternativă text-shadow CSS3. Tot ce trebuie să facem este să descarcăm pluginul jQuery text-shadow și să-l conectăm cu jQuery: grozav, acum putem începe să rezolvăm problemele CSS3 între browsere.

COLTURI ROTUND (BORNĂ-RAZA)

Rotunjirea colțurilor este probabil cel mai bun lucru pe care ni l-a oferit CSS3. Din fericire, îl puteți folosi și nu vă temeți de afișarea incorectă în Internet Explorer. CSS3PIE ne va ajuta cu asta.

chenar-rază: 10px ;

comportament: url (PIE.htc);

După cum puteți vedea, trebuie doar să „apelăm” scriptul PIE după proprietatea border-radius.

BOX-SHADOW & CULORI RGBA

La fel ca și cu raza de frontieră, pt Suport pe internet Explorer colțuri rotunjite, trebuie doar să conectați scriptul PIE. De asemenea, rețineți că putem folosi valori RGBA.

box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , . 75);

comportament: url (PIE.htc);

De asemenea, puteți utiliza culori RGBA când specificați proprietățile „culoare de fundal”.

FUNDAL DUBLU

Și din nou folosim prefixul -pie-:

fundal: url (img/flash.png) 20px 20px fără repetare , url (img/airplane.png) 90px 50px fără repetare , #00BFF3 ; /* Browsere moderne */

Fundal plăcintă: url (img/flash.png) 20px 20px fără repetare, url (img/airplane.png) 90px 50px fără repetare, #00BFF3; /* IE6+ */

comportament: url (PIE.htc);

BORDA-IMAGINĂ

Ultima proprietate CSS3 pe care o acceptă PIE este imaginea de margine:

border-image: url (border.png) 27 27 27 27 rotund rotund;

comportament: url (PIE.htc);

SELECToare CSS3

Este timpul să folosiți Selectivir. Conectăm JavaScript așa cum se arată mai sus și toți selectoarele CSS3 vor fi disponibile pentru IE6+!

tabel tr:primul copil (

fundal: #252525 ;

tabel tr:nth-child(2 n+ 1) (

fundal: #ebebeb ;

TEXT-UMBRA

Compatibilitatea între browsere a acestei proprietăți poate fi obținută cu ușurință folosind biblioteca jQuery. După ce l-am conectat, apelăm pur și simplu funcția „textShadow()” pentru selectorul necesar:

$(document).gata(funcția ()(

$(".txt").textShadow();

text-shadow: 2px 2px 2px negru;

IE FILTRE

Pentru a înlocui unele reguli CSS3, puteți utiliza și filtre IE. Iată un exemplu pentru un gradient de fundal:

fundal: #FFFFFF ;

filtru: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */

/* IE8+ - trebuie să fie pe o singură linie, din păcate */

Ms-filter: „progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766669312530122079, M21=0.173648177666693127, 17364817766693127 Metodă="extindere automată")";

filtru: progid:DXImageTransform.Microsoft.Matrix(

M11 = 0,9848077530122079,

M 12 = -0,17364817766693127,

M21 = 0,17364817766693127,

M22 = 0,9848077530122079,

SizingMethod= "extindere automată");

margine-stânga: -14px ;

margin-top: -21px ;