Dispoziție între browsere. Aspect cross-browser în condiții moderne - o înțelegere generală a principiului necesar
Atunci când creați un site web, mai ales dacă scopul este să îl faceți ușor de utilizat, compatibilitatea între browsere sau compatibilitatea cu diferite browsere este una dintre cele mai frecvente probleme cu care se confruntă dezvoltatorii web.
Pe scurt, „compatibilitatea între browsere” implică afișarea și funcționalitatea identice a proiectului atunci când este vizualizat în oricare dintre cele mai comune browsere web. Acesta este cu siguranță unul dintre cele mai dificile și în același timp importante aspecte de luat în considerare în procesul de proiectare a site-ului web.
De exemplu, unele caracteristici CSS3 nu sunt încă acceptate de toate browserele majore, iar unele nu sunt acceptate deloc, ceea ce poate duce la probleme serioase de performanță. Mai mult, uneori nici nu vorbim despre diferiți dezvoltatori de browser, ci despre diferite versiuni ale aceluiași browser. 
Una dintre opțiunile pentru rezolvarea problemei cu utilizarea CSS este de a crea fișiere de stil modificate pentru diferite browsere și de a le încărca în funcție de care este utilizat în prezent de către vizitator.
Desigur, este puțin probabil ca perspectiva instalării mai multor browsere simultan și de a te deranja cu ele de fiecare dată pentru a testa aspectul paginilor dezvoltate este puțin probabil să atragă pe nimeni. Prin urmare, merită să acordați atenție soluțiilor automate.
Puteți verifica afișarea site-ului folosind servicii specializate care vă permit să vedeți cum va arăta aspectul paginilor în cele mai comune browsere și la diferite rezoluții de ecran. 
O altă tendință importantă care a venit la noi din Occident și care câștigă în mod activ amploare în RuNet este designul adaptiv (aspect) sau designul responsive.
Odată cu utilizarea pe scară largă a smartphone-urilor și tabletelor, numărul de probleme pe care un dezvoltator web trebuie să le rezolve a crescut semnificativ. Este suficient să creați doar o versiune desktop a site-ului sau să vizați și alte platforme? Ar trebui să ne limităm la versiunea mobilă sau să dezvoltăm o versiune suplimentară pentru tablete? Dar dispozitivele de înaltă definiție, cum ar fi iPad-ul cu Retina Display? Toate problemele de mai sus pot fi rezolvate prin utilizarea aspectului adaptiv. 
Esența acestui design este de a adapta aspectul și structura conținutului în funcție de dispozitivul pe care îl vizualizează utilizatorul în prezent. Adică, site-ul va arăta la fel de bine atât pe un computer desktop sau laptop, cât și pe ecranul unei tablete sau smartphone. Aspectul diferitelor blocuri se va schimba în funcție de modul în care a fost intenționat de creatorii săi. Astfel, se realizează multiplatformă, ceea ce are un efect pozitiv asupra experienței utilizatorului de a lucra cu resursa. 
Aspectul adaptiv este definit printr-o abordare care presupune că un site web conceput de dezvoltatori ar trebui să răspundă comportamentului utilizatorului și mediului în care este utilizat, ținând cont de caracteristici precum rezoluția și orientarea ecranului, precum și platforma utilizată. Acest lucru se realizează printr-o combinație de aspect, grafică și stiluri CSS, care vă permite să adaptați automat aspectul site-ului atunci când utilizatorul trece, de exemplu, de la un computer desktop la o tabletă. Cu alte cuvinte, vorbim de tehnologie care permite site-ului să răspundă automat la preferințele utilizatorilor. Acest lucru elimină nevoia de a dezvolta o soluție separată pentru fiecare gadget nou care intră pe piață.
În domeniul design-ului web, dezvoltatorii au ajuns rapid într-un punct în care a devenit imposibil să țină pasul cu fluxul nesfârșit de dispozitive noi apărute. Ar fi o prostie să suferi pierderea utilizatorilor de pe un canal, dând preferință forțată altuia. Și utilizarea aspectului adaptiv și a compatibilității între browsere poate rezolva această problemă.
Astăzi, există câteva dintre cele mai populare browsere pe care oamenii le folosesc pentru a naviga pe internet. Și durerea de cap constantă a oricărui designer web este că același cod HTML arată diferit în browsere diferite. Mai mult, același cod arată diferit în diferite versiuni ale aceluiași browser.
Desigur, orice webmaster trebuie să se asigure că site-ul arată la fel în cel mai mare număr de browsere. Această abilitate (atunci când codul arată la fel în browsere diferite) este numită „aspect HTML cross-browser”. Capacitatea de a introduce un astfel de cod este foarte utilă și este apreciată de potențialii angajatori. De foarte multe ori, această cerință este una dintre primele în condițiile pe care trebuie să le îndeplinească un potențial candidat pentru un post vacant de programator web într-o companie serioasă.
De ce site-ul arată diferit în diferite browsere?
Există mai multe motive pentru care un site poate arăta diferit pe browsere diferite.
1. Utilizarea caracteristicilor HTML non-standard.
Designerul poate folosi caracteristici care nu sunt incluse în standardul HTML. Într-adevăr, browserele pot suporta multe atribute diferite de etichetă care nu sunt descrise în standard. Nu se recomandă utilizarea acestor funcții. Dintr-un motiv simplu - dacă ceva nu este descris în standard, este posibil ca oricare dintre browsere să nu îl accepte. Iar creatorii unui astfel de browser vor avea perfectă dreptate. Nu este nevoie să utilizați funcții non-standard.
Verificați întotdeauna codul pe care îl scrieți pentru a vă asigura că respectă standardul.
Permiteți-mi să vă dau un exemplu clasic. Luați în considerare următorul cod HTML pentru un tabel simplu.
Salut Lume |
Acest cod afișează un tabel format dintr-o celulă. Designerul web dorește ca înălțimea primului rând al acestui tabel să fie de 100 de pixeli. Cu toate acestea, în standardul HTML eticheta
În acest caz, eroarea nu este mare, deoarece atributul de înălțime al etichetei
Soluția corectă pentru exemplul de tabel este utilizarea stilurilor. Iată cum ar putea arăta codul „corect”:
Salut Lume |
Această opțiune va apărea (sau cel puțin ar trebui) la fel în toate tipurile de browsere.
2. Valori implicite ale atributelor.
Fiecare element HTML are multe atribute. Aceasta include culoarea, distanța față de elementele adiacente, alinierea și multe altele. Atunci când proiectează codul HTML, designerul stabilește de obicei valorile acelor atribute care sunt importante pentru prezentarea elementelor pe pagină. Ce ar trebui să facă browserul cu valorile atributelor nespecificate? În acest caz, browserele folosesc valori implicite. Și aici este pericolul. Valorile implicite pot varia între browsere. De exemplu, dimensiunea implicită a fontului poate varia. Din acest motiv, textul va ocupa mai mult spațiu în unele browsere decât în altele. Care, la rândul său, poate duce la diferențe de afișare a paginii.
Cum pot rezolva această problemă? În primul rând, un sfat universal: verificați afișarea site-ului în cât mai multe browsere posibil. În al doilea rând, puteți seta valorile implicite în fișierul css pentru toate elementele care sunt utilizate pe pagină. Acest lucru va salva browserul de a trebui să „gândească” valorile proprietăților elementelor HTML. Puteți face acest lucru, de exemplu, astfel:
html, body, div, span, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, citat bloc, pre,
a, prescurtare, acronim, adresa, mare, cita, cod,
del, dfn, em, font, img, ins, kbd, q, s, samp,
mic, grevă, puternic, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
set de câmpuri, formular, etichetă, legendă,
masa, legenda, tbody, tfoot, thead, tr, th, td (
marja: 0;
umplutură: 0;
chenar: 0;
contur: 0;
font-weight: mostenire;
font-style: moștenire;
dimensiunea fontului: 14px;
font-family: mostenire;
vertical-align: top;
fundal: transparent;
font: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
culoare de fundal: alb;
}
Astfel, toate elementele de pe pagină vor avea proprietățile specificate în acest fișier. Dacă este necesar ca un element să aibă proprietăți care diferă de proprietățile implicite, atunci acestea trebuie suprascrise în mod explicit.
3. „Caracteristici” ale unor browsere.
Cu toate acestea, chiar dacă webmasterul folosește numai funcții HTML standard și și-a setat atributele implicite pentru toate elementele, site-ul poate arăta în continuare diferit în browsere diferite. Acest lucru se datorează faptului că browserele în sine pot să nu fie conforme cu standardul HTML. Browserele, ca orice software, pot conține erori. Aceste erori sunt de obicei remediate rapid, dar există întotdeauna posibilitatea ca utilizatorul să nu aibă instalată cea mai recentă versiune a browserului.
De asemenea, este posibil ca producătorii de browsere (MicroSoft este în mod special vinovat de acest lucru) să creadă că știu mai bine cum să afișeze cutare sau cutare element.
Deoarece Internet Explorer este principalul vinovat pentru problemele de incompatibilitate, au fost create multe soluții posibile pentru a face un site să arate la fel în IE ca și în alte browsere.
Cea mai comună modalitate este comentariile condiționate pentru IE. Microsoft, ca și cum ar fi conștient de problemele browserului său, a oferit dezvoltatorilor o modalitate de a executa cod HTML numai pe o versiune specială a IE. De exemplu, următorul cod va include un fișier CSS special pentru browserul IE versiunea 7 și o versiune ulterioară: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Comentariile condiționate au un dezavantaj. O pagină care include astfel de comentarii nu este o pagină HTML validă. După cum puteți vedea, Microsoft încalcă standardul și aici.
Dintre toată varietatea de browsere existente în prezent precum Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox și, bineînțeles, browserul Amigo, care are capacitatea de a se instala spontan pe computere, trebuie doar să te uiți la link. Și oricare dintre browsere are un număr mare de versiuni care apar una după alta. Prin urmare, fiecare versiune nouă a fiecărui browser are propriile sale caracteristici. Și pentru ca site-ul să funcționeze corect în fiecare dintre ele trebuie să le folosești aspect cross-browser.
Și atunci când un site web este creat, acesta trebuie testat pe toate browserele. Dacă acest lucru nu se face, atunci după ce site-ul este livrat, pot apărea defecte neplăcute.
Cel mai „distractiv” dintre browsere, desigur, este browserul Internet Explorer, deși, cu toate acestea, majoritatea utilizatorilor încă folosesc acest browser. Deci, dacă site-ul a fost verificat anterior pe Chrome, apoi este deschis în Explorer și, oh, groază. Blocurile sunt amestecate, butoanele de meniu se ciocnesc unele de altele, imaginile sunt afișate incorect, în general, haos complet.
Prin urmare, pentru ca utilizatorul să lucreze convenabil cu site-ul dvs. prin orice browser și să nu vadă o astfel de groază, aspectul între browsere este obligatoriu pentru orice site. Pe baza a tot ceea ce a fost scris mai sus, tragem concluzia că aspect html și css între browsere– acesta este un aspect al site-ului web care vizează crearea unui site web care este afișat la fel de corect în fiecare browser.
Având în vedere o astfel de varietate de browsere, precum și necesitatea ca site-ul să fie universal și să poată fi afișat corect în toate browserele, angajatorii solicită designerilor de layout să compilați layout-uri încrucișate. Înțelegerea motivelor pentru afișarea incorectă a unui site, precum și abilitățile de aranjare între browsere, vine cu timpul și printr-o practică îndelungată. Numai prin încercare și eroare o persoană poate afla ce browsere au care probleme. Cu experiență, designerul de layout încearcă să compună codul astfel încât să fie adaptat în orice mod posibil pentru fiecare dintre browsere, iar în timpul procesului de layout tot ce rămâne este să corecteze micile greșeli.
Cauzele problemelor cu afișarea site-ului web.
Acum să vedem de ce apar astfel de probleme cu percepția codului în diferite browsere.- Aspectul nu se potrivește unele standarde HTML.
- /i>Noile biblioteci și reguli CSS sunt actualizate constant și apar. Ele sunt reproduse perfect de versiunile actualizate ale browserelor, dar este posibil să nu fie afișate corect de versiunile mai vechi.
- Internet Explorer. Cel mai ciudat browser care nu înțelege jumătate din toate regulile și, prin urmare, noi hack-uri sunt inventate constant pentru a ocoli aceste probleme IE.
- Valoarea implicită a atributului. Această valoare poate fi diferită în fiecare browser. Atributele sunt culorile elementelor, fonturile și dimensiunea acestora. Toate acestea trebuie descrise în foaia de stil, altfel browserul va introduce în mod independent valorile specificate în toate în mod implicit. Prin urmare, în fiecare dintre ele site-ul va fi afișat diferit.
Sfat 1. Rezolvarea problemei atributelor este destul de simplă, deși poate fi puțin plictisitoare. Pentru a face acest lucru, trebuie doar să specificați toate atributele din foaia de stil. În acest fel, browserele nu trebuie să introducă valori așa cum doresc.
Sfatul 2. Instalați toate browserele populare pe computerul dvs. de lucru, precum și toate versiunile de Internet Explorer. Deoarece nu este ușor să instalați mai multe versiuni pe un computer fără să dansați mult cu o tamburină, puteți instala Internet Explorer Tester. Acest program face posibilă verificarea unui site pe mai multe versiuni de browser simultan.
Sfatul 3. Alegeți opțiunea de aspect în avans. Există două opțiuni aici. Primul este să proiectați un site web complet potrivit pentru un singur browser și apoi să remediați problemele în fiecare browser ulterior. Opțiunea a doua este să verificați fiecare element de cod așa cum este scris în toate browserele. Alegând prima opțiune, puteți evita problemele inutile, rescriind complet codul. Dar alegerea este întotdeauna a ta.
Sfat 4. Utilizați pluginuri pentru a găsi rapid erorile de cod pentru fiecare browser. De exemplu, puteți testa aceste pluginuri:
- Pentru Chrome la getfirebug.com
- Pentru Opera pe site-ul oficial Opera
- Pentru Mozila pe site-ul suplimente mozila
- Pentru IE la birou. Site-ul Microsoft
Să tragem o concluzie din toate cele de mai sus. Dispoziție între browsere– nu este înfricoșător și, uneori, este distractiv. În lumea modernă, este foarte important pentru a deveni un designer de layout de succes. Principalul lucru pentru a stăpâni acest aspect este experiența, multă experiență. Prin urmare, va trebui să exersați mult. În timp ce te antrenezi, folosește strategii diferite, încearcă diferite metode și instrumente (de exemplu, folosește cadre gata făcute în munca ta, care pot grăbi dezvoltarea site-ului web și pot crea cu ușurință machete de site adaptabile). După ceva timp, veți putea găsi exact strategia dvs. pentru cum să faceți un aspect cross-browser și să scrieți un site web care să fie afișat corect în fiecare dintre browserele populare.
Aflați aspectul între browsere și vă mulțumim pentru atenție.
Dispoziție între browsere- acesta este aspectul site-ului cu aceeași vizibilitate în diferite browsere. Pentru a spune adevărul, această sarcină nu este ușoară, deoarece fiecare browser are propriile caracteristici și dezavantaje. Prin urmare, un browser este pentru un web designer ceea ce Kryptonite este pentru Superman. Viața pentru designerii web din întreaga lume ar fi mult mai bună dacă browserele ar reda modele frumoase fără erori sau capcane. Dar, din păcate, acest lucru nu se va întâmpla niciodată. Este momentul să ne regândim modul în care folosim browserul. Atunci când facem aspectul cross-browser, trebuie să luăm în considerare toate caracteristicile fiecărui browser, deoarece utilizatorul se conectează din browserul cu care este obișnuit și nu îl putem forța să treacă la alt software și trebuie să se adapteze la acesta.
Imprimare și aspect web
Aspectul web modern este foarte diferit și are o serie de dezavantaje în comparație cu designul tipărit, unde practica mondială a fost creată de secole. Deși un design imprimat nu poate fi poziționat din cauza naturii sale fixe, imprimarea are avantaje în alte domenii precum culoarea și contrastul datorită calității hârtiei sau a imprimării.
Browserele sunt cei mai notorii distrugători ai modelelor bune, la fel ca în vechile setări de imprimare sau de calitate slabă a hârtiei, modelele tipărite distruse. Dar, spre deosebire de industria de imprimare globală, web-ul nu se poate baza pe experiența globală și pe metode dovedite pentru a gestiona discrepanțe. O altă caracteristică unică a muncii unui designer de layout este că nu poate obține rezultate pentru a controla calitatea imprimării, ca în tipărire. Nu știm ce browser va alege utilizatorul sau ce monitor va folosi. Prin urmare, indiferent de aspectul între browsere, vor exista în continuare diferențe pe ecranele utilizatorilor. Dar sarcina noastră este să minimizăm diferențele de design atunci când îl afișăm în fereastra browserului utilizatorului.
Browsere diferite pentru oameni diferiți
Browserele și companiile, la fel ca orice altă companie din lume, au concurență între ele. Dar dacă ar exista un fel de organizare a standardelor web, atunci nu ar avea rost să creăm browsere diferite și s-ar pierde competiția între ele. Există un singur browser uimitor, cred că l-am numi WebKit. Dar, deoarece browserele concurează pentru utilizatori, diferențele dintre browsere au ca rezultat atragerea publicului.
În lumea tipăririi (tipăririi), companiile concurează între ele prin adăugarea de noi caracteristici și profile de culoare diferite. În plus, inginerii lor iau în considerare caracteristicile audienței utilizatorilor produsului lor. De exemplu, imprimantele Canon sunt folosite mai mult pentru imprimarea comercială. Imprimantele Ricoh nu au o gamă de culori atât de intensă ca cele anterioare, așa că sunt folosite pentru tipărirea documentației interne în companii (rapoarte, protocoale, acte...). Cred că analogia este clară pentru dezvoltatorii de design cross-browser. Dacă sunteți un designer care face tipărire de semnalizare pentru companii comerciale mari, probabil că veți alege o imprimantă cu o calitate excelentă a imprimării și o gamă largă de culori, mai degrabă decât una de calitate pentru afaceri sau personală.
Browserele sunt similare cu imprimantele. Unele sunt construite pentru a face față structurilor grele, altele sunt construite mai mult pentru documente. IE este construit mai mult pentru un public tehnic sau de afaceri, cum ar fi Chrome, Firefox, pentru a satisface un public mai creativ.
Deoarece progresul web al următorului deceniu va duce la și mai multe diferențe și la mai multe browsere cu propriile lor idiosincrazii, ar trebui să ne gândim și să căutăm modalități de a crea mai multe modele de browsere pentru a face față compatibilității browserelor și aspectului nostru.
Au trecut de mult vremurile în care totul arăta la fel în browsere, așa că trebuie să cauți soluții pentru aspectul între browsere sau să faci un design mai simplu și plictisitor. Aceste browsere noi ne vor obliga să regândim modul în care proiectăm browserele încrucișate.
Calitate cross-browser
Calitatea este un concept flexibil. Pentru că proiectele simple vor fi mult mai ușor de realizat decât un fel de capodopera de designer. Prin urmare, atunci când lucrați cu un client, trebuie să țineți cont de complexitatea proiectului în raport cu aspectul său încrucișat. Deoarece este aproape imposibil să realizați un design cu adevărat cool, încrucișat, creativ, dinamic, prin urmare, atunci când lucrați cu un client, trebuie să subliniați deficiențele sau, mai precis, diferențele în rezultatul unor elemente de design în browsere diferite. Trebuie să le lăsați să vadă calitatea aspectului în browserele principale (populare) și în cele minore, apoi le oferiți posibilitatea de a alege. Dacă cunoașteți atât de bine diferențele dintre browsere încât le puteți indica în proiect atunci când creați un aspect în Photoshop, atunci acesta este doar un plus pentru munca dvs. cu clientul.
Cu experiență, atunci când evaluați calitatea aspectului încrucișat, puteți crea un șablon general sau un tabel care să arate diferențele dintre unele browsere și să îl utilizați pentru a lucra cu clientul.
Câteva sfaturi pentru aspectul între browsere:
Să tragem concluziile:
În viitor, ne așteaptă noi surprize cu aspectul între browsere. Să ne pregătim pentru ele și să căutăm noi alternative (soluții alternative). Poate că viteza mare a internetului, computerele puternice și noile tehnologii web, cum ar fi Flash și altele, ne vor ajuta în acest sens.
- Cunoști publicul? Poate că publicul dvs. nu are nevoie de noi clopote și fluiere sau de noi capabilități de browser.
- Susține-ți marca cu o culoare, logo și coerență stilului. Nu ucideți brandul cu idei noi de design. Marca este calitate și tradiție.
- Asigurați-vă că browserul nu interferează cu scopul site-ului dvs. Conținutul paginii și sensul general al site-ului ar trebui să fie separate.
- Similar cu sfaturile de mai sus, conținutul (conținutul paginii) ar trebui separat de design și stil. Într-un fel, conținutul ar trebui să fie clar vizibil și să nu se îmbine într-o imagine de ansamblu sau într-un set de blocuri și simboluri.
- Dacă vă proiectați site-ul web personal, atunci verificați în mod constant compatibilitatea între browsere a designului său în noile versiuni de browser, pentru a nu pierde utilizatori.
Dacă adunați o mulțime de browsere moderne, le puteți sorta în diferite moduri: în funcție de dispozitiv, de platformă, de tipul de lucru și chiar de culoarea pictogramei. Cel mai util lucru pentru un dezvoltator este să le poată sorta în motoare. Motorul, adică nucleul browserului, este cel care determină modul în care funcționează cu aspectul dvs.
Unele browsere funcționează doar pe o singură platformă: Edge și IE sunt disponibile numai pe Windows, Safari numai pe macOS și iOS. Au fost odată încercări de intervenție, dar nimic nu a ieșit. Desigur, acest lucru complică testarea. Din fericire, există servicii precum BrowserStack care vă oferă acces la toate browserele existente, iar Microsoft face disponibile imagini compacte Windows pentru testarea Edge și IE în mașinile virtuale.
BINE! Acum știm despre browsere. Dar dacă același browser, același motor - dar rezultatul este diferit pe platforme diferite? Dar nu se poate face nimic! În realitate, browserele pot varia foarte mult în funcție de platformă sau dispozitiv. Cea mai mare diferență între browserele desktop și cele mobile este că acestea din urmă au o mulțime de optimizări și doar magie. Dar puteți observa și comportamente diferite pe desktop Windows și macOS.
Cred că înțelegi deja la ce vreau să ajung. Compatibilitatea între browsere este acel unicorn curcubeu pe care toată lumea îl urmărește, dar nimeni nu îl poate prinde. Scopul urmăririi este, desigur, nobil: să facă site-urile să arate și să funcționeze la fel de bine pe toate browserele și pe toate platformele. Și dacă putem garanta mai mult sau mai puțin dimensiunile indentărilor, fonturilor, înălțimii liniilor, culorilor, atunci este mai bine să nu încercăm nici măcar să aducem netezirea textului, estomparea umbrelor, randarea grafică și aspectul controalelor de sistem la un nivel general. aspect.
Deci, dacă pentru tine pixel perfect înseamnă a intra în grilă și dimensiunile orizontale ale blocurilor, atunci mai ai o șansă. Dar dacă modifici netezirea textului, numărul de linii pe paragraf sau dimensiunile verticale ale blocurilor de conținut strict în funcție de aspect, îți pierzi timpul. În mod ideal, un site cu browsere încrucișate va arăta la fel de străin pe toate platformele - la urma urmei, fiecare are propriile caracteristici care sunt familiare utilizatorilor.
Și mai multe despre testare. Indiferent cât de bine imită emulatorul Chrome DevTools dispozitivele și browserele, acesta este doar un indiciu despre cum vor arăta acestea în realitate. Este important să verificați rezultatul pe platforme și dispozitive reale, cel puțin: Windows, Android, macOS și iOS. Degete reale pe un dispozitiv real, browsere reale în habitatul lor natural vă vor spune multe despre cum vor fi folosite interfețele dvs. Acest lucru este mult mai important decât cât de asemănătoare sunt cu aspectul.
Abonați-vă la știrile browserului pe Twitter, instalați Chrome Canary, Firefox Nightly, Safari Technology Preview. Porniți steaguri, încercați, rămâneți informat și, cel mai important, nu mai urmăriți pixelii și începeți să creați interfețe bune. Site-urile web nu ar trebui să arate la fel în toate browserele.
Versiune video
