Un set de proprietăți CSS3 între browsere. Cross-browser CSS3, sau cum să faci față Internet Explorer Css cross-browser

De la autor: Oamenii folosesc browsere diferite pentru a vizualiza paginile web. Desigur, există cele mai populare, precum Chrome. Există și altele mai puțin utilizate (Safari, Internet Explorer), dar dacă faci un site web pentru oameni, ar trebui să știi despre compatibilitatea între browsere - cum să o faci și despre ce este vorba. Să vedem cum să ne asigurăm că site-ul dvs. se afișează la fel pe toate browserele majore.

Scopul principal al funcționalității cross-browser este de a preveni modificări semnificative în designul site-ului în diferite browsere web. Dacă diferența este doar în mici detalii și acest lucru nu afectează percepția generală a site-ului, atunci putem spune că te-ai ocupat de problema cross-browser. Dar totuși, ce sfaturi reale pot fi date în această chestiune?

Cum să obțineți compatibilitatea între browsere

În acest moment, există 5 browsere principale cele mai populare pentru care trebuie să vă optimizați site-ul. Și, în timp ce cele mai noi versiuni de browsere web sunt de obicei ușor de împrietenit, cu cât versiunea este mai veche, cu atât pot apărea mai multe probleme.

De exemplu, IE6 este unul dintre cele mai problematice browsere în ceea ce privește suportarea noilor etichete html și proprietăți css. Și totuși, unii din ziua de azi încă necesită ca site-ul să se afișeze în mod normal în acest browser. După părerea mea, acest lucru este deja prea mult. Suportul IE8 este suficient.

Cu toate acestea, aceasta este o mică digresiune. Acum să ne uităm la pașii reali care vă vor ajuta să faceți site-ul dvs. compatibil între browsere.

Profitați la maximum de soluțiile gata făcute. Dacă doriți să implementați proprietăți noi și să învățați browserele mai vechi să le înțeleagă, veți avea nevoie de biblioteci JavaScript. În acest caz, pur și simplu nu există nicăieri fără ele. Trebuie să instalați jQuery.

Există o bibliotecă javascript atât de minunată numită Modernizr. Capacitățile sale vă permit să implementați o alternativă pentru acele proprietăți care nu sunt acceptate. Asta iti recomand sa folosesti si tu.

Deci, mai întâi trebuie să accesați site-ul oficial. https://modernizr.com/download. Aici trebuie să bifați tehnologiile pe care intenționați să le utilizați pe site-ul dvs. web. Trebuie spus că lista este destul de lungă și fără o cunoaștere medie a standardelor web moderne și a limbii engleze, cu greu vei putea să-ți dai seama. În orice caz, există și proprietăți intuitive. Chiar dacă bifați toate casetele, codul rezultat nu va fi prea greoi.

Orez. 1. Selectarea tehnologiilor pe care biblioteca le va verifica.

Verificarea funcționării bibliotecii

După descărcarea versiunii personalizate a bibliotecii, trebuie să verificați funcționarea acesteia. Va trebui să fie conectat folosind o etichetă de script, care indică calea către fișier. Dacă totul este corect, atunci eticheta html ar trebui să aibă multe clase de stil noi. Aceste clase sunt denumite după tehnologiile pe care le-ați verificat.

>p?În consecință, dacă o astfel de clasă este indicată în eticheta html, înseamnă că tehnologia funcționează în acest browser. Dacă ceva nu este acceptat, atunci clasa „fără nume de tehnologie” va fi înregistrată. Vă dau un exemplu chiar acum:

De exemplu, trebuie să bifați proprietatea box-shadow. Pentru referință, stabilește umbra elementului. Dacă browserul îl acceptă, atunci această clasă de stil va apărea în eticheta html. Dacă browserele web nu recunosc proprietatea, va apărea clasa „no-boxshadow”.

Orez. 2. Veți vedea multe clase în eticheta html. În acest caz, vedem că browserul acceptă aproape toate tehnologiile.

Acum controlul compatibilității între browsere este complet în mâinile tale. Este suficient să setați clasa no-boxshadow câteva proprietăți alternative și în toate browserele care nu acceptă proprietatea box-shadow, aceste reguli vor fi aplicate în schimb. Este foarte confortabil.

Am găsit un alt exemplu pe Habrahabr pe care aș vrea să ți-l dau aici. A existat un exemplu despre modul în care biblioteca poate fi utilizată pentru a implementa alternative în browserele mai vechi.

Multiplebgs selector ( background-image: url("image.png") center 40px no-repeat, url("image2.png"); ) .no-multiplebgs selector ( background-image: url("image.png") center 40px gri deschis fără repetare; )

Selector Multiplebgs ( fundal - imagine : url ("image.png") centru 40px nu - repetare , url ("image2.png" ) ; )

Nu - selector multiplebgs ( fundal - imagine : url ("image.png") centru 40px nu - repeta gri deschis ; )

Exemplu de explicație. Suntem interesați de tehnologia de fundaluri multiple, care au fost mult timp acceptate în CSS3. Pentru a face acest lucru, enumerați adresele imaginilor și parametrii acestora, separate prin virgule. Desigur, browserele mai vechi nu acceptă acest lucru, așa că scriem propriile noastre stiluri pentru ele folosind clasa .no-multiplebgs. Specifică faptul că stilurile trebuie aplicate dacă browserul nu acceptă fundaluri multiple.

Astfel, puteți seta alte stiluri pentru acest selector și astfel obțineți o afișare frumoasă a site-ului în orice browser web. Desigur, pentru a experimenta pe deplin capacitățile Modernizr, trebuie să aveți o bună înțelegere a programării web și a designului site-ului web. O persoană cu experiență va putea determina ce proprietăți le pot înlocui pe cele care sunt foarte slab susținute.

Desigur, funcționalitatea bibliotecii este mult mai largă. Puteți testa suportul pentru diverse tehnologii și puteți lega evenimente la rezultat. Exemplu.

Compatibilitatea între browsere se referă de obicei la capacitatea unui site de a arăta la fel (sau la fel de bine) în toate browserele.

Pentru ca site-ul să arate cât mai identic în toate browserele (moderne + suport pentru unele învechite), trebuie să cunoașteți diverse tehnici și caracteristici ale browserelor. Le vom studia acum.

Bloc. Browsere moderne

În prezent, următoarele browsere sunt populare: Internet Explorer (abreviat ca IE, un browser de la Microsoft, integrat în Windows), Opera (un browser norvegian), Mozilla (alias Firefox), Google Chrome (un browser de la Google), Safari (un browser de la Apple). Browsere pentru dispozitive mobile: Android, iOS.

Bloc. Motoare de browser

Pe lângă browsere, există și așa ceva ca motor browser. Motorul este nucleul browserului, care convertește HTML și CSS într-o imagine vizibilă pe ecran. Există mult mai puține motoare decât browsere și, ca urmare, multe browsere au aceleași motoare și, prin urmare, aceleași caracteristici și bug-uri (probleme).

Tipuri de motoare: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera până la versiunea 14). Trident (Internet Explorer).

Vă rugăm să rețineți că Opera, începând cu versiunea 14, a trecut la motorul Webkit.

În prezent, Webkit s-a împărțit în două motoare Blink de la Google Chrome și Opera 14+ și un motor de la Safari. Aceste două motoare acceptă încă prefixul -webkit, cu toate acestea, separarea lor poate fi deja văzută în unele proprietăți CSS, cum ar fi cratimele

Browserul Internet Explorer nu mai există oficial; cea mai recentă versiune este a 11-a. Cu toate acestea, de fapt, acest browser și-a schimbat numele (dar nu și motorul) și se numește acum Edge.

Bloc. Prefixe de furnizor

Situația actuală în rândul browserelor este că înainte ca o proprietate CSS să apară în specificație, browserele pot implementa o versiune de probă a acelei proprietăți cu un prefix special numit prefixul furnizorului(de la cuvântul vânzători - dezvoltatori, prefix de dezvoltatori).

Să ne uităm la cum arată aceasta folosind exemplul proprietății box-sizing (schimbarea modelului blocului).

P ( dimensiunea casetei: chenar-box; )

Această proprietate a fost acceptată numai în Firefox 29, dar a fost disponibilă cu prefixul -moz începând cu Firefox 2:

P ( -moz-box-sizing: border-box; )

Alte browsere au prefixe similare: -moz - Mozilla/Firefox (motor Gecko), -webkit - browsere bazate pe motorul Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera până la versiunea 13 inclusiv (motor Presto), -ms – IE de la versiunea 8+.

Astfel, cea mai multi-browser versiune a proprietății box-sizing, folosind prefixe de furnizor, va arăta astfel (nu este nevoie să o scrieți cu prefixul -ms, IE a trecut imediat la suportul acestei proprietăți):

P ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

În CSS, multe proprietăți au o implementare similară: cu sau fără prefix.

De asemenea, rețineți că Opera a trecut la Webkit de la versiunea 14 și va folosi acum prefixul -webkit, în timp ce prefixul -o va rămâne doar pentru versiunile mai vechi (până la 14).

Există următoarea regulă: proprietățile cu prefixe sunt scrise înaintea proprietăților fără prefix. Acest lucru se face astfel încât proprietatea principală să înlocuiască proprietățile prefixate, deoarece browserul poate suporta o proprietate cu sau fără prefix. Și o proprietate cu un prefix poate funcționa cu unele probleme.

În prezent, unele browsere au decis să renunțe la prefixe din cauza neplăcerilor lor. Și acum în loc de ei folosesc așa-numitele steaguri. Proprietățile sunt acum încorporate în browser, dar sunt dezactivate implicit, totuși pot fi activate în setările browserului bifând caseta corespunzătoare din preferințe. În prezent, browserele Google Chrome și Opera acceptă acest model pentru proprietăți noi.

Bloc. Unde pot vedea ce prefixe sa scriu?

Vă recomand un serviciu special caniuse.com, unde puteți vedea ce proprietăți pot fi deja folosite și dacă trebuie să scrieți prefixe pentru ele sau nu.

Bloc. Statistici de browser

Pentru a ști ce browser ar trebui să fie acceptat în prezent și care ar trebui abandonat, trebuie să urmăriți statisticile privind browserele din regiunea site-ului. Acest lucru se poate face folosind următorul serviciu: gs.statcounter.com - toate browserele cu versiuni în funcție de țară (engleză).

Bloc. Cum să testați un site în diferite browsere

După crearea unui site, trebuie să-l testați în toate browserele populare. Cu toate acestea, a face acest lucru nu este atât de ușor pe cât pare - nu numai că browserele diferă de la o versiune la alta, dar există și diferențe între o versiune a browserului pe Windows și, de exemplu, Linux. Este clar că este pur și simplu imposibil să ai un astfel de număr de browsere.

Serviciile speciale vin în ajutor care fac capturi de ecran ale site-ului în diferite versiuni ale site-ului.

Bloc. Normalizarea stilurilor

Pe lângă evacuări, există și așa-numitul normalizare- acesta este momentul în care valorile proprietăților (de exemplu, marja și umplutura) nu sunt resetate la zero, dar sunt specificate anumite valori convenabile (astfel încât umplutura implicită să fie aceeași și convenabilă în toate browserele).

Amintiți-vă că resetarea stilurilor trebuie făcută înainte de a vă conecta stilurile, și nu după!

CSS Reset ar trebui să fie plasat într-un fișier separat (denumit de obicei reset.css). În acest caz, îl puteți folosi în diferite proiecte fără a depune niciun efort pentru a-l separa de alte reguli CSS.

Nu vă fie teamă să modificați reset.css în sine. Adaptează-l la tine, fă-l să funcționeze pentru tine. Schimbați, rearanjați, eliminați și adăugați după cum este necesar în cazul dvs. specific.

Este logic să adăugați stiluri implicite pentru h1-h6 (de exemplu, dimensiunea fontului), pentru td (face text-align: center), etc.

Ce ar trebui să faci în continuare:

Începeți să rezolvați probleme folosind următorul link: probleme pentru lecție.

Când decideți totul, treceți la studiul unui subiect nou.

Salutare dragi cititori!

Cu toții ne dorim ca stilurile pe care le scriem să fie afișate corect în diferite browsere. Dar orice ar spune cineva, va trebui să adăugați stiluri, astfel încât acestea să funcționeze în alte browsere. Acest proces se numește compatibilitatea cu aspectul site-ului web între browsere. Compatibilitatea între browsere este atunci când stilurile CSS sunt afișate corect în browsere diferite și versiunile lor diferite.

Aș dori să dau câteva sfaturi despre procesul de aducere a CSS-ului dvs pentru compatibilitatea între browsere a luat mai puțin timp.

Concentrați-vă pe cele mai populare browsere. Puteți găsi evaluările browserului online. De asemenea, merită să luați în considerare regiunea de audiență a site-ului. De exemplu, dacă acesta este un site pentru un public din Africa, atunci nu Chrome predomină, ci un alt browser. De asemenea, în timpul procesului de layout, merită să ne uităm la modul în care arată site-ul în acele browsere care ocupă locurile 2 și 3.

2. Puteți căuta cele mai populare stiluri css, care arată incorect în alte browsere. Găsiți hackuri CSS pentru ei.

3. Există instrumente speciale pe web pentru generarea de stiluri cross-browser. As dori sa le scot in evidenta pe cele 2 cele mai interesante dupa parerea mea.

Instrumente pentru compatibilitatea CSS între browsere.

Sunt descrise multe stiluri;
Există un exemplu de utilizare cu rezultatul.

La început este dificil să navighezi pe site;
Nu puteți genera un stil cu proprii parametri (este dat un exemplu de utilizare a acestuia).

Generator CSS3

Operare convenabilă și intuitivă;
Puteți genera stiluri pentru parametrii dvs.;
Puteți vedea rezultatul stilului generat.

Puține stiluri

Când CSS este folosit nu numai pentru proiectarea textului, ci și pentru lucrul cu straturi în aspect fără tabele, este necesar să ne amintim că browserele moderne nu tratează în același mod parametri atât de importanți precum marginea - spațiul extern al unui element, umplutura - marginea internă a unui element, precum și parametrii de poziție, împachetarea textului flotant și o serie de altele.

Din cauza acestor diferențe în interpretarea valorilor parametrilor, se întâmplă adesea ca site-urile și interfețele web care arată bine în browserele Mozilla Firefox, Opera și Safari să înceapă brusc să diverge în browserul Internet Explorer.

Baza acestor diferențe în interpretarea browserului CSS este lipsa de conformitate a browserelor Internet Explorer anterioare versiunii 7 cu standardele CSS adoptate de W3C. Prin urmare, pentru un aspect de succes fără tabele pentru versiunile anterioare IE 7, trebuie să utilizați o serie de constructe speciale numite hack-uri CSS. De asemenea, este important să rețineți că pentru alte browsere este uneori necesară utilizarea unui hack CSS.

Să luăm în considerare cum să scriem CSS care ar fi interpretat doar de anumite tipuri de browsere:

Cuprinsul documentului

CSS pentru IE 5, 5.5, 6, 7 Comentarii condiționate Browserele IE acceptă de mult așa-numitele comentarii condiționate, care vă permit să faceți conținutul vizibil numai pentru IE. Comentariile condiționate sunt pur și simplu comentarii HTML special formate, care sunt înțelese numai de anumite versiuni de Internet Explorer pentru Windows. De exemplu, puteți folosi comentarii condiționate pentru a remedia eroarea de transparență PNG în IE.

Pentru a le folosi aveți nevoie de:

Mai întâi, creați o foaie de stil comună pentru toate browserele, fără hack-uri, apoi continuați să lucrați la corectarea erorilor la afișarea paginii în IE.

Foaia de stil cu erorile corectate este apoi salvată separat și devine foaia de stil pentru toate versiunile de IE (de exemplu, all-ie.css).

Salvați foi de stil separate cu remedieri de erori separat pentru fiecare versiune de IE (de exemplu, ie-5.0.css).

Apoi, trebuie să conectați secvențial aceste foi de stil prin codul HTML folosind comentarii condiționate.

Sintaxa comentariului condiționat Următorul comentariu condiționat va fi înțeles de browserele IE5, IE5.5 și IE6, precum și de IE7 și IE8:

Aplicarea CSS pentru IE5 Dacă trebuie să aplicați un comentariu condiționat numai pentru IE5, atunci trebuie doar să specificați versiunea 5.0 în clauza IE 5.0 if:

Aplicarea CSS pentru IE5.5 Dacă trebuie să-l aplicați în raport cu IE5.5, va arăta astfel:

Aplicarea CSS pentru IE6 La fel pentru IE6:

Aplicarea CSS pentru IE5 și IE5.5 simultan sau pentru mai multe versiuni Dacă trebuie să remediați un bug cu modelul casetei în IE5 și IE5.5 folosind comentarii condiționate, puteți utiliza o parte din indexul versiunii sau operatori de comparație.

Primul exemplu va conecta foaia de stil la orice versiune de Internet Explorer a cărei primă cifră este 5:

Alternativ, puteți specifica ca foile de stil să se conecteze la orice versiune de browser mai mică de 6:

În loc de lt (mai puțin) puteți folosi și lte (mai puțin sau egal cu - mai puțin sau egal), gt (mai puțin, mai mult), gte (mai puțin sau egal) la - mai mare sau egal cu), principalul lucru cu toată această varietate de posibilități este alegerea corectă a ordinii de precizare a comentariilor condiționate, pentru a nu ajunge într-o situație în care pentru unele browsere se intersectează grupuri de comentarii condiționate, dând un aspect neașteptat. rezultat.

Ordinea de utilizare Dacă nu doriți ca foile de stil generale să domine peste tabelele care sunt create special pentru IE, atunci trebuie să conectați mai întâi foile de stil generale și numai apoi tabelele pentru IE. Într-un exemplu arată astfel:

Alte beneficii ale acestei metode Folosind comentarii condiționate, aveți și o modalitate de a determina mai fiabil versiunea browserului. Browserele care pretind a fi Internet Explorer, dar nu sunt, nu vor folosi foi de stil concepute pentru IE. Cu această metodă, puteți genera statistici precise cu privire la versiunea de IE pe care o folosesc vizitatorii dvs., fără erori cauzate de programele și browserele care usurează identitatea IE. Validitate Poate că una dintre cele mai frumoase părți ale acestei tehnici este că foile dvs. de stil și formatate cu atenție (X )Documentele HTML vor rămâne pe deplin conforme cu specificația. Depanarea comentariilor condiționate Există un avertisment care merită menționat.

Dacă utilizați mai multe versiuni de Internet Explorer pe aceeași mașină, atunci toate aceste versiuni se vor pretinde a fi cea mai nouă versiune instalată. Aceasta înseamnă că dacă aveți IE6 instalat, dar vizualizați pagina folosind IE5, acest comentariu condiționat va fi executat:

Dar acest comentariu condiționat nu va fi executat:

Pentru o urmărire cât mai precisă a diferențelor în procesarea CSS de către diferite versiuni de IE, programul gratuit IETester, care acceptă toate versiunile de IE de la 5 la 8, a funcționat bine. Și pentru schimbarea rapidă a parametrilor CSS în IE8 apăsând F12, este disponibil un instrument de dezvoltare, care amintește de FireBug din Mozilla Firefox.

Similar cu declararea foilor de stil, această metodă poate ascunde codul HTML din anumite versiuni sau din toate versiunile IE. De exemplu, textul „Cod HTML” va fi afișat în toate browserele, cu excepția IE6, dacă îl puneți într-un comentariu condiționat ca acesta:

cod HTML

Etichetă Rețineți că comentariile condiționate în IE pot fi folosite oriunde pe o pagină, nu doar pentru a declara foi de stil pentru versiunea de browser corespunzătoare. Folosind comentarii condiționate, puteți afișa câteva informații suplimentare pentru utilizatorii IE, care nu sunt vizibile pentru utilizatorii altor browsere.

Similar comentariilor condiționate, IE 5--IE 8 acceptă eticheta .... Această etichetă vă permite să ascundeți informații de la utilizatorii IE, astfel codul:

Acesta nu este Internet Explorer

Utilizatorii IE vor fi afișați ca: Acesta este Internet Explorer, iar utilizatorii altor browsere vor fi afișați ca: Acesta nu este Internet Explorer.

Eticheta nu este validă.

Hackuri CSS IE Pentru a nu aglomera codul HTML prin declararea mai multor foi de stil sau dacă trebuie să salvați un singur fișier CSS, puteți scrie stiluri separate care vor funcționa doar în IE. Mai mult, există o opțiune atât pentru IE6, cât și pentru IE7.

Pentru IE toate versiunile. Dacă prefixați o proprietate cu două bare oblice (//), aceasta va fi acceptată numai de browserele IE ale tuturor versiunilor. Alte browsere vor ignora această proprietate.

În IE6, este posibil să puneți un semn minus (-) sau un caracter de subliniere (_) în fața unei proprietăți fără ca IE7 să răspundă la aceasta. De asemenea, puteți utiliza următoarea construcție:

* html .style (...)

De exemplu:

Stil ( fundal: roșu; /* pentru browserele normale */ // fundal: verde; /* pentru toate IE */ - fundal: albastru; /* pentru IE6 */ ) * html .style ( fundal: albastru; /* altele metoda pentru IE6 */)

În acest caz, fundalul va fi roșu în browserele Opera și Firefox, verde în IE7 și albastru în Internet Explorer 6.

Exemplul modifică culoarea de fundal pentru diferite browsere. În practică, această metodă este utilizată pentru a obține o afișare identică și compatibilitate între browsere. Cel mai adesea trebuie să recurgeți la el atunci când poziționați și setați diferite valori pentru proprietăți precum stânga, sus, padding, margine, lățime și altele legate de dimensiuni, procente și pixeli.

Pentru IE7 se folosește un hack CSS:

*: primul copil+html .style ( ...)

*+html .style ( ...)

CSS pentru Firefox Există și hack-uri speciale CSS care vă permit să afișați stiluri numai în browserul Firefox.

html: root .style ( ...) /* funcționează și pentru Safari */

Stil, x: -moz-orice-link (...)

Pentru a schimba rapid parametrii CSS în Firefox apăsând F12, este disponibil instrumentul de dezvoltare Firebug (necesită instalare preliminară) - este cel mai bun dintre analogi.

CSS pentru Opera Hackurile CSS pentru browserul Opera sunt reprezentate de următoarele exemple:

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 abilitatea front-end-ului de a se adapta la o gamă largă de dispozitive diferite și de a oferi totuși o experiență de vizualizare optimă iese în prim-plan.

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.

1. Situația actuală

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%).

Ritmul accelerat de lansare a noilor versiuni de Google Chrome și Firefox ne permite să dezvoltăm 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 întrerupt la începutul lui 2016, indiferent de sistemul de operare. IE9 va fi acceptat numai pe Windows Vista, IE10 numai pe Windows Server 2012, IE11 pe Windows 7 și Windows 8.1:

Ca rezultat, trebuie să încetăm să dezvoltăm pentru IE6 și, la fel, pentru IE7. Pentru a justifica această strategie, iată câteva exemple de decizii luate de companii cunoscute: Google a încetat să mai susțină IE8 în noiembrie 2012 și IE9 în octombrie 2013.

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.

2. Analizează-ți publicul

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ă.

3. Probleme cu browserele vechi și cu diferite abordări de dezvoltare

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
Elemente semantice HTML5: nu sunt acceptate î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 folosind cele mai recente browsere și dispozitive vor fi tratați cu o versiune îmbunătățită progresiv a site-ului, cu toate cele mai recente funcții.

Pe de altă parte, utilizatorilor de browsere mai vechi și de conexiuni lente la Internet li se va oferi o versiune grafică a site-ului, dar încă funcțională.

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 stabilitate mai mare, deoarece puteți adăuga treptat noi funcții browserelor moderne. Dar necesită o planificare mai atentă;
Unii dezvoltatori susțin că nu are rost să accepte browsere învechite și că ar trebui utilizate cele mai recente 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.

4. Testare, testare, testare...

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 folosind o mașină virtuală în cloud;
Microsoft Virtual Machines - Dacă rulați Linux, nu veți avea acces la Internet Explorer. O soluție ar putea fi descărcarea imaginilor mașinii virtuale pentru IE6 în IE11, care pot fi apoi utilizate împreună cu Oracle VM Virtualbox sau Vagrant pentru testarea 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.

5. Normalize.css și CSS Autoprefixer

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 și proprietăți CSS necunoscute. 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.

Regulile CSS obișnuite vor fi procesate de plugin și prefixate 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; )

Folosind CSS Autoprefixer, se 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; )

6. Comentarii condiționate

Dacă trebuie să creați CSS alternativ sau să activați JavaScript între browsere pentru versiunile anterioare de Internet Explorer, puteți utiliza comentarii condiționate. Sunt acceptate în Internet Explorer 5-9, folosesc sintaxa comentariilor HTML în combinație cu valorile 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 exemplu clar al modului în care comentariile condiționate pot fi utilizate eficient în practică este HTML5 Boilerplate, care adaugă clase CSS specifice pentru versiunile vechi ale Internet Explorer:

7. Poliumpluturi

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ă o serie de polyfills care pot fi utilizate pentru a oferi suport pentru 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. Suportul parțial este disponibil cu 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.

8. Definirea funcțiilor cu Modernizr

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 să determinați direct funcționalitatea browserului, mai degrabă decât să încercați să instalați 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ă ne uităm la două exemple simple de 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”; )

Concluzie

Când vine vorba de design web receptiv pe browsere vechi, nu există o soluție universală. 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.