10 indicații de reținut în timpul creării unui site web cu browsere încrucișate

Teoretic, crearea unei pagini web este ușoară. Aspectele majore includ scrierea unui cod HTML, testarea acestuia pe un browser web și încărcarea acestuia. HTML și CSS sunt standarde, ceea ce înseamnă că o pagină web care funcționează bine într-un anumit browser poate să nu fie curată în alte browsere.

Desigur, lucrurile nu devin la fel de simple practic. Există o varietate de browsere, fiecare browser afișând HTML și CSS într-un mod diferit.

Pentru a vă asigura că paginile web funcționează uniform în toate browserele web, proiectanții web ar trebui să practice codificarea între browsere. În această postare, vom discuta 10 dintre trucurile încercate și testate pe care le puteți urma pentru a obține un site web fără erori și gata pentru cross-browser.

O scurtă introducere în CSS

CSS sau Cascading Style Sheets este un set de instrucțiuni de formatare web care controlează aspectul paginilor web. Unele browsere care sunt compatibile cu CSS sunt:

• IE
• Margine
• Firefox
• Crom
• Safari
• Operă
• iOS Safari
• Operă
• Browser Android
• Chrome pentru Android

Dar înainte de a ajunge la concluzia că vă va economisi mult timp, ar trebui să înțelegeți că majoritatea browserelor web nu acceptă pe deplin toate caracteristicile sale.

CSS acționează ca o componentă de portretizare care caracterizează componentele unei pagini web. În același timp, foile de stil în cascadă controlează designul diferitelor pagini în același timp.

Deși nu există niciun secret pentru a crea un site web perfect compatibil cu browsere încrucișate, care să asigure estetica nemaipomenită pe care o doriți, există câteva aspecte de care puteți avea grijă pentru a vă îmbunătăți șansele. Iată zece sfaturi ușor de urmat, dar eficiente pentru codificarea unui site web cu mai multe browsere.

1. Cu cât mai simplu, cu atât mai bine

Cu cât HTML și CSS devin mai complexe, cu atât sunt mai probabil ca acestea să fie predispuse la erori și erori. Încercați să păstrați aspectul elementar în faza de proiectare, adică: un antet, câteva coloane și un subsol. Dacă designul tău are mai multe casete din bara laterală, lucrurile se vor dovedi agitate pe măsură ce procesul avansează.

Evitați utilizarea multor elemente imbricate și integrați doar elementele necesare. Pentru a crea un meniu, utilizați ul și li în loc de un tabel sau o serie de p elemente.

2. Validați codul HTML, CSS și RSS

Nimic nu îl enervează pe un designer mai mult decât să stileze cu atenție o pagină web și, când vine timpul să o testeze, o eroare necunoscută continuă să apară. În astfel de situații, un designer ar trebui să-și păstreze nervii și să înceapă cu marcajul și validarea foilor de stil.

Există multe instrumente gratuite și plătite disponibile pe web pentru a vedea dacă marcajele HTML și CSS sunt legitime. Cu ajutorul acestor instrumente, poți fi sigur că markupurile sunt perfecte și că paginile web afișează conținutul așa cum vrei tu.

Firebug

Firebug este un depanator și editor all-in-one. Permite unui dezvoltator să lucreze la markupurile HTML, JavaScript și CSS. Puteți monitoriza markupurile în timp real, le puteți evidenția și, de asemenea, le puteți elimina.

Validator HTML

În timp ce validați sursa paginii, erorile și erorile sunt raportate. Și dacă nu puteți afla ce este în neregulă, instrumentul vă oferă câteva sugestii.

Validator.w3.org

Trebuie să încărcați fișierul pe care doriți să îl validați. Validatorul vă va arăta rezultatele în diferite formate, cum ar fi:

• cu recomandari
• ca un contur

jigsaw.w3.org

Instrumentul verifică marcajul pentru eventuale erori și erori. Puteți seta mai multe profiluri CSS, pentru a alege un anumit mediu pentru foaia de stil și pentru a controla informațiile din raport.

Relaxat.vse.cz

Acest instrument nu folosește regulile W3C pentru validare, ci se bazează pe protocoalele personalizate încorporate. Puteți alege din versiunea de HTML pe care doriți să o utilizați, dacă doriți să vedeți codul sursă și multe alte opțiuni.

3. Nu lucrați cu modul Detalii ale browserului

Unele browsere web au un mod ciudate. În acest sens, browserul se luptă cu versiunile sale anterioare, care sunt adesea pline de erori. Deși permite unui site web mai vechi să fie compatibil cu browserele web de astăzi, devine o sarcină destul de mare dacă sunteți în căutarea unor pagini web standardizate. Acest lucru se datorează faptului că într- un mod ciudate , paginile web nu sunt afișate într-o manieră standardizată, ci într-un mod unic.

În mod implicit, un browser web comută la modul ciudate dacă nu includeți declarația tipului de document sau DOCTYPE. Prin urmare, ar trebui să vă amintiți întotdeauna să adăugați un DOCTYPE valid la sfârșitul paginii web.

4. Practicați regulile de resetare CSS

Fiecare browser web are propriile valori implicite pentru anumite aspecte, cum ar fi înălțimea și lățimea liniei. Aceste valori implicite sunt adesea în conflict cu regulile CSS personalizate și distorsionează aspectul general al paginilor web.

Pentru a evita dilema de a personaliza fiecare regulă CSS pe care o scrieți, puteți efectua toată această resetare la începutul fișierului dvs. CSS. Odată ce ați adăugat aceste reguli în foaia de stil, puteți fi sigur că lucrați din același punct pentru toate browserele.

5. Folosiți Firefox

În general, dezvoltatorii testează paginile web într-un singur browser simultan. Apoi, merg la alte browsere și continuă să facă modificările necesare pe măsură ce trec de la un browser la altul. Aceasta este o abordare ideală, mai degrabă decât validarea unui site web pe toate browserele într-o singură rulare.

Pentru a vă crea site-ul web, Firefox este cel mai preferat browser, deoarece facilitează rezolvarea oricăror probleme de compatibilitate față de alte browsere. Firefox vine cu o multitudine de suplimente, ceea ce îl face destul de ușor de dezvoltat. Dacă paginile web devin curate pe Firefox, poți fi sigur că vor funcționa bine pe alte browsere.

6. Testare

Browserele web din ziua de azi au deficiențe de redare, așa că devine responsabilitatea dezvoltatorului să testeze markupurile pe fiecare. Iată o listă a browserelor web principale:

• Internet Explorer
• Firefox
• Safari
• Opera (44.0.2510.1218)
• Microsoft Edge
• Browser UC

Ca o abordare rapidă, puteți alege un serviciu de testare online. Există multe site-uri web, cum ar fi Browsershots, care fac capturi de ecran ale site-ului dvs. și vă arată cum vor apărea acestea pe diferite sisteme de operare și browsere web. Aceste capturi de ecran sunt trimise prin e-mail sau pur și simplu puse la dispoziție pentru descărcare. Unele dintre instrumente sunt plătite, dar cu siguranță vă anunță în prealabil problemele de compatibilitate cu care se pot confrunta paginile web.

Trucurile CSS nu dau roade dacă nu le puteți testa pe principalele browsere web. Iată câteva instrumente utile pentru a autentifica compatibilitatea între browsere a markupurilor HTML și CSS:

Mod ciudat

Acesta este o modalitate ușoară, dar eficientă de a urmări erorile între browsere. Quirksmode interpretează CSS-ul și afișează toate preocupările posibile.

Capturi din browser

Instrumentul Browsershots face capturi de ecran ale paginilor web și vă arată cum va fi afișat site-ul dvs. pe diferite browsere web și sisteme de operare.

Tester IE

Aceasta este o aplicație web de încredere, care vă permite să analizați aspectul paginilor web pe diferite versiuni de Internet Explorer. Instrumentul testează șablonul pe diferite versiuni de browsere și sisteme de operare și afișează rezultatele într-o interfață similară cu Ms Word.

7. Folosiți comentarii condiționate

Există momente când încerci cel mai bine nivelul tău, dar totuși, nu poți obține rezultatele dorite pe anumite browsere, în special pe Internet Explorer. Aici, aveți nevoie de niște hack-uri de încredere și testate pentru a fi adevărate.

O alternativă ușoară pentru aceasta, puteți include doar marcajul IE cu comentarii. Cu acest truc simplu, puteți prezenta HTML sau JavaScript suplimentar numai pentru IE.

8. Faceți IE6 compatibil cu formatul PNG

PNG sunt prodigioase. Puteți avea peste 250 de grade de transparență într-o imagine. Pentru a crea imagini optimizate pentru retină, vă puteți demonstra abilitățile de design, cum ar fi adăugarea de chenaruri netede și fundaluri personalizate.

Dar Internet Explorer nu este capabil să afișeze în mod eficient PNG-uri transparente și să arate casete greșite acolo unde ar trebui să fie transparente. Cu puțină optimizare, puteți face PNG-urile să funcționeze fără probleme în IE6. Acest lucru nu vă va cere să faceți modificări majore în CSS.

Puteți utiliza IE PNG Fix pentru același lucru.

9. Adăugați alternative

Majoritatea browserelor web sunt compatibile cu Flash și JavaScript. Este posibil să se folosească alternative în cazul în care browserul web al unui vizitator nu acceptă astfel de caracteristici.

De exemplu, în cazul lui Safari pe iPhone, meniurile de navigare Flash sunt inutile, deoarece browserul nu acceptă Flash.

Iată o fișă rapidă pentru a economisi timp la experimentarea cu diferite fișiere media:

• Imagini : la fiecare etichetă img, adăugați un atribut alt care descrie imaginea.
• Filme Flash : evitați utilizarea Flash pentru funcții principale, cum ar fi navigarea.

10. Optează pentru codare manuală

Acesta poate fi un punct de discuție între designerii web. Mulți webmasteri din zilele noastre folosesc instrumente automate pentru a economisi timp. Sunt utile mai ales dacă nu sunteți bine versat cu HTML. Dar, este important de remarcat că astfel de instrumente nu se potrivesc cu flexibilitatea și eleganța unui designer care codifică manual cu pricepere markupurile HTML între browsere.

Codarea manuală a markupurilor HTML, XHTML și CSS este un drum lung. Dețineți controlul total asupra a ceea ce dezvoltați și modificați întotdeauna programul în funcție de nevoile preferințelor.

Dacă vi se pare agitat codarea manuală, puteți utiliza un editor de pagini Web bazat pe text. Există multe astfel de instrumente disponibile pe internet. Puteți încerca oricare dintre următoarele:

• CKEditor
• Cană de cafea
• Atom Sublim Text
• Coda

Încheierea

Iată o listă de verificare rapidă pe care o puteți lua în considerare după ce ați terminat de codat un site web între browsere:

• Fiecare browser web are un curs individual de acțiune. Cu codarea HTML în documentele CSS, ar trebui să marcați paginile web în așa fel încât să apară curate în fiecare browser.
• Pentru a vă menține site-ul fără erori și erori, scăpați de codurile XHTML, HTML sau CSS nevalide care pot fi evidențiate de instrumentele menționate mai sus.
• Verificați browserele care aduc trafic maxim către site-ul dvs.
• Efectuați o verificare fundamentală a site-ului dvs. pentru a măsura eficiența browserelor.
• Explorați modelul casetei CSS pentru a afla mai multe despre formatele cross-browser.
• Folosiți cu îndemânare planurile de umbrire și nuanțe de stil de text.
• Rețineți că stabiliți îmbunătățirea conținutului, aranjarea și spațiul.

Petrecerea unui timp suplimentar pentru ca paginile web să funcționeze impecabil pe cât mai multe browsere posibil, se plătește întotdeauna. Nu numai că te vei asigura că site-ul este accesibil publicului maxim, dar vei menține și vizitatorii fericiți, ceea ce este important.