Aproape fiecare browser are un motor grafic pe care il foloseste pentru a randa o pagina.
Acest motor grafic este folosit atunci cand un browser interpreteaza codul CSS si se gandeste cum ar trebui sa arate un element in pagina.
Desi toate regulile CSS si modul in care acestea ar trebui sa fie interpretate, sunt standardizate si majoritatea browserelor moderne respecta aceste standarde, exista totusi mici diferente intre ele.
Ce este un motor de randare
Aproape fiecare browser are propriul motor de randare, dar unele sunt folosite de mai multe browsere:
Un motor de randare este folosit de un browser atunci cand interpreteaza codul HTML si CSS si trebuie sa se decida cum va arata pagina pe ecran.
Diferentele dintre ele
Din fericire diferenta dintre aceste motoare nu este atat de mare astazi fata de acum cativa ani. Unul din motivele pentru aceasta este standardizarea regulilor.
Dar aceste standarde nu sunt perfecte. Acestea pot fi ambigue si astfel browserele le interpreteaza gresit, unele motoare nu respecta in totalitate standardatul sau pur si simplu exista bug-uri in motorul de randare.
De aceea este bine sa stim ca aceste diferente ne pot afecta atunci cand:
-
o regula CSS este interpretata altfel de la un motor la altul
Aceasta problema poate fi subtila si greu de observat. De exemplu daca vrem neaparat sa folosim un font in pagina si folosim regula
@font-face, acel font va aparea cu mici diferente in diferite browsere:
-
o regula CSS functioneaza intr-un browser si nu in altul
Acest lucru poate fi foarte descurajant pentru cineva care incepe cu CSS, pentru ca o regula care functioneaza perfect in Chrome si in Firefox, vedem ca nu face nimic Internet Explorer.
De cele mai multe ori nu este de vina cel care a scris regula ci browser-ul, dar noi trebuie sa fim constienti daca o regula nu este adoptata de un browser.
Pentru a verifica daca o regula poate fi folosita intr-un browser putem folosi site-ul caniuse.com unde putem cauta de exemplu ce browsere suporta regula @font-face.
Acest site este foarte folositor pentru ca putem afla daca putem folosi anumite elemente HTML (sau atribute), anumite regulie CSS sau chiar anumite functii Javascript.
Solutii
Solutia cea mai simpla la aceste probleme este sa testam pagina in cat mai multe browsere.
Dar acest lucru nu este chiar atat de usor de facut. Adica da, putem testa pe Windows folosind Chrome, IE si Firefox, dar mai avem si Linux si Mac OS X drept sisteme de operare.
Asta neluand in calcul multitudinea de dispozitive mobile: tablete sau telefoane ce folosesc iOS, Android sau Windows. Iar pe fiecare sistem avem browsere diferite.
Asadar lista de dispozitive creste imediat.
Dar putem reduce aceasta lista daca stim de dinainte de pe ce browser va vizita cineva site-ul nostru. Atunci ne putem concentra pe acel browser de pe acel sistem de operare (de exemplu Chrome pe Windows 7) si apoi sa ne ocupam de altele.
Asa ca cel mai bine este sa testam o pagina pe 2-3 browsere pe un PC si pe cel putin un dispozitiv mobil (de exemplu, un telefon cu Android).
O alta solutie ar fi sa aflam dinainte diferentele dintre browsere (folosind site-uri precum caniuse.com) si sa scriem CSS astfel incat sa ocolim acea problema.
Dar acest lucru se invata in timp, prin exercitiu.
Din fericire si browserele mai vechi (precum IE 8-9) care cauzau o groaza de probleme, nu mai sunt asa de folosite si urmasii lor respecta mai bine standardele si specificatiile CSS.