crearea cross-Browser compatibil site-uri web
postat în performanță de WP Engine
Ultima actualizare pe 30 Mai, 2019
chiar dacă majoritatea oamenilor se rezumă la utilizarea unui singur browser, aveți zeci de opțiuni atât pentru desktop, cât și pentru Dispozitive mobile. În mod ideal, site-urile web s-ar afișa perfect indiferent de browserul pe care l-ați utilizat. Cu toate acestea, acest lucru nu este întotdeauna cazul, care este în cazul în care testarea cross-browser vine în.
cu o testare completă a browserului, vă puteți asigura că site-ul dvs. web arată și se comportă perfect în toate opțiunile populare. În acest fel, vizitatorii dvs. vor avea o experiență la fel de grozavă, indiferent dacă folosesc Chrome, Firefox, Opera sau opțiuni mai puțin cunoscute, cum ar fi SeaMonkey.
în acest articol, vom vorbi un pic mai mult despre importanța testării cross-browser. Apoi vom parcurge câțiva pași pentru a vă ajuta să creați un site web compatibil cu browserul încrucișat. Să trecem la treabă!
De Ce Este Importantă Compatibilitatea Între Browsere?
majoritatea oamenilor folosesc browsere cunoscute, cum ar fi Google Chrome, Safari, Firefox și Opera. Cu toate acestea, sunt mult mai multe opțiuni disponibile decât s-ar putea imagina. Acest lucru este bun pentru consumator, dar problema pentru dvs. este că fiecare browser este construit diferit. Asta înseamnă că site-ul dvs. web ar putea funcționa perfect pe Chrome, dar întâmpinați probleme pe Firefox (doar pentru a da un exemplu).
din experiența noastră, majoritatea erorilor pe care le veți vedea într-un browser, dar nu și în altul, sunt probleme relativ mici. Este posibil ca un element specific al site-ului dvs. să nu se uite la acesta sau o anumită caracteristică ar putea să nu funcționeze corect. Deși aceste probleme pot fi minore, acestea trebuie abordate dacă doriți să oferiți aceeași experiență tuturor vizitatorilor site-ului dvs.
în mod ideal, veți dori să proiectați site-ul dvs. web pentru a fi compatibil cu browserul încrucișat de la început. În acest fel, nu veți risca să înstrăinați utilizatorii unui anumit browser. În următoarele câteva secțiuni, vă vom arăta cum să faceți acest lucru.
cum se creează un site compatibil cu browserul încrucișat
ideea creării unui site compatibil cu browserul încrucișat ar putea părea descurajantă. Cu toate acestea, câțiva pași simpli pot merge mult spre asigurarea faptului că site-ul dvs. funcționează perfect pe majoritatea browserelor. Să vorbim despre ce sunt acestea!
Pasul 1: Setați un ‘Doctype’ pentru fișierele HTML
când un browser încarcă site-ul dvs. web, trebuie să-și dea seama ce versiune de HTML utilizați. Acest lucru este important, deoarece diferite versiuni ale HTML conțin reguli diferite.
un ‘doctype’ este o declarație care spune browsere: „Hei, aceasta este versiunea HTML pe care o vom folosi!”În acest fel, browserele nu vor trebui să facă presupuneri, ceea ce poate diminua numărul de erori pe care le vor întâlni utilizatorii dvs.
din fericire, acest pas este remarcabil de simplu. Tot ce trebuie să faceți este să adăugați următorul fragment de cod la documentele HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
după cum veți observa, acest fragment este pentru versiunea 4.01 a HTML. Dacă doriți să utilizați în schimb HTML5, puteți utiliza acest cod:
<!DOCTYPE html>
problema este că unele browsere încă nu se joacă frumos cu HTML5. În ciuda numeroaselor sale îmbunătățiri, utilizarea acestuia poate afecta compatibilitatea între browsere, deci va trebui să cântăriți acest fapt alături de avantajele sale.
Pasul 2: Utilizați regulile de resetare CSS
de obicei, CSS este principalul vinovat din spatele erorilor de compatibilitate a browserului. Asta pentru că fiecare browser are propriul set de reguli CSS. Cu alte cuvinte, CSS-ul site-ului dvs. ar putea face diferit în funcție de browserul pe care îl folosesc vizitatorii dvs.
o modalitate de a rezolva această problemă este de a utiliza o ‘resetare CSS’. Acestea sunt seturi de reguli pe care le puteți adăuga pe site-ul dvs. web, care stabilesc o linie de bază pentru modul în care funcționează CSS în browsere.
există mai multe opțiuni atunci când vine vorba de resetări CSS, dar una dintre preferatele noastre se numește normalizare.css, datorită cât de cuprinzătoare este:
puteți descărca normalizare.fișier css din biblioteca sa GitHub și folosiți-l ca punct de plecare pentru CSS-ul site-ului dvs. web. Acest lucru vă va ajuta să maximizați compatibilitatea între browsere pe site-ul dvs.
Pasul 3: Utilizați bibliotecile și cadrele compatibile cu browserul încrucișat
bibliotecile JavaScript și cadrele largi, cum ar fi fundația și Bootstrap, sunt incredibil de populare în aceste zile. Dacă aveți de gând să utilizați astfel de elemente pentru a vă construi site-ul web, vă puteți salva o mulțime de dureri de cap utilizând opțiuni prietenoase pentru browser.
unele biblioteci și cadre au fost dezvoltate de la zero pentru a lucra cu cât mai multe browsere posibil. În general, cele mai populare cadre – inclusiv cele două pe care tocmai le – am menționat-sunt construite pentru a fi compatibile cu cât mai multe browsere posibil.
doar pentru a fi în siguranță, totuși, asigurați-vă că verificați documentația pentru orice bibliotecă sau cadru pe care intenționați să îl utilizați. În cele mai multe cazuri, veți găsi informații despre compatibilitatea cross-browser destul de ușor. De exemplu, iată pagina de compatibilitate a fundației din documentația sa:
o mică cercetare vă va ajuta să oferiți o experiență uimitoare tuturor vizitatorilor dvs., nu doar celor care folosesc un anumit browser.
testare Cross-Browser
chiar dacă ați făcut un efort pentru a crea un site compatibil cross-browser, este încă o idee bună pentru a verifica și a vedea dacă totul funcționează așa cum ar trebui. Acest proces este relativ simplu – tot ce trebuie să faceți este să încărcați site-ul dvs. web folosind mai multe browsere și să verificați erorile.
problema este că există o mulțime de browsere acolo. Pentru a vă acoperi bazele, vă recomandăm să vă concentrați pe primele cinci opțiuni în funcție de cota de piață, care sunt:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
este posibil să observați că Microsoft Edge nu a făcut lista. Cota sa de piață este destul de mică în aceste zile, dar este încă o practică bună să vă asigurați că site-ul dvs. funcționează și cu acesta.
desigur, instalarea a cinci sau șase browsere diferite pe computer poate fi o durere. De aceea, există o mulțime de servicii care vă permit să efectuați teste cross-browser online. Acest lucru simplifică foarte mult procesul, iar taxele implicate sunt de obicei minore.
nu vă sacrificați experiența digitală
nu toți vizitatorii site-ului dvs. web vor folosi același browser. Aceasta înseamnă că, dacă doriți să vă asigurați că fiecare utilizator se bucură de site-ul dvs. web, va trebui să faceți unele teste cross-browser.
rețineți, totuși – chiar dacă site-ul dvs. funcționează perfect în toate browserele, trebuie să utilizați o gazdă web de cea mai bună calitate dacă doriți să oferiți cea mai bună experiență digitală posibilă. Cu WP Engine, veți obține performanțe uimitoare și acces la Asistență la nivel de experți, așa că consultați Planurile noastre!