Până în prezent, există mai multe dintre cele mai populare browsere pe care oamenii le folosesc pentru munca lor pe Internet. Și durerea de cap constantă a oricărui web designer este că același cod HTML arată diferit în diferite browsere. În plus, același cod arată diferit în diferite versiuni ale aceluiași browser.
Firește, orice maestru web ar trebui să aibă grijă ca site-ul să pară la fel în cel mai mare număr de browsere. Este această abilitate (când codul pare același în diferite browsere) și se numește "rendering HTML încrucișat în browser". Abilitatea de a tasta un astfel de cod este foarte utilă și apreciată de potențialii angajatori. Foarte adesea o astfel de cerință este una dintre primele condiții în care un candidat potențial pentru vacanța unui programator web trebuie să se întâlnească într-o companie serioasă.
De ce site-ul arată diferit în diferite browsere?
Există mai multe motive pentru apariția diferitelor tipuri de site-uri pe diferite browsere.
1. Utilizarea caracteristicilor non-standard ale HTML.
Designerul poate folosi funcții care nu fac parte din standardul HTML. Într-adevăr, browserele pot susține multe atribute de etichete diferite care nu sunt descrise în standard. Nu se recomandă utilizarea acestor funcții. Din simplul motiv - dacă ceva nu este descris în standard, oricare dintre browsere ar putea să nu o accepte. Și creatorii unui astfel de browser vor avea absolut dreptate. Nu utilizați caracteristici non-standard.
Verificați întotdeauna codul pe care l-ați scris pentru a respecta standardul.
Îți dau un exemplu clasic. Luați în considerare următorul cod HTML pentru tabelul cel mai simplu.
Bună ziua |
Acest cod afișează un tabel format dintr-o singură celulă. Designerul web dorește ca înălțimea primului rând al acestei mese să fie de 100 de pixeli. Cu toate acestea, în standardul HTML pentru etichetă
În acest caz, eroarea nu este mare, deoarece atributul de înălțime al etichetei
Soluția corectă pentru un exemplu cu un tabel este utilizarea de stiluri. Iată cum arată codul "corect":
Bună ziua |
Această opțiune va fi (sau, cel puțin, ar trebui) afișată în același mod în toate tipurile de browsere.
2. Valorile atributelor implicite.
Fiecare element HTML are multe atribute. Aceasta este culoarea și distanța față de elementele vecine, alinierea și multe altele. Când se introduce cod HTML, designerul stabilește de obicei numai acele atribute care sunt importante pentru reprezentarea elementelor din pagină. Ce ar trebui să facă browserul cu valorile atributelor nespecificate? În acest caz, browserele utilizează valori implicite. Și acolo se află pericolul. Valorile implicite pentru diferite browsere pot varia. De exemplu, mărimea implicită a fontului poate fi diferită. Din acest motiv, în unele browsere textul necesită mai mult spațiu decât în altele. Care, la rândul său, poate duce la diferențe în afișarea paginii.
Cum poți rezolva această problemă? În primul rând, sfatul universal: să verificați afișarea site-ului în cât mai multe browsere posibil. În al doilea rând, puteți specifica în fișierul css valorile implicite pentru toate elementele utilizate pe pagină. Acest lucru va scuti browserul de necesitatea de a "gândi" la valorile proprietăților elementelor HTML. Puteți face acest lucru, de exemplu, astfel:
html, corp, div, span, applet, obiect, iframe,
h1, h2, h3, h4, h5, h6, p, bloc, pre,
a, abbr, 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,
câmpul, forma, eticheta, legenda,
tabel, caption, tbody, tfoot, thead, tr, th, td marja: 0;
umplutura: 0;
frontieră: 0;
contur: 0;
font-weight: moștenire;
font-style: moștenire;
font-size: 14px;
font-family: inherit;
vertical-aliniere: partea de sus;
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ăți specificate în acest fișier. Dacă este necesar ca proprietățile oricărui element să difere de proprietățile implicite, atunci acestea trebuie să fie redefinite în mod explicit.
3. "Caracteristicile" unor browsere.
Cu toate acestea, chiar dacă vrăjitorul web utilizează numai caracteristici HTML standard, setați atributele sale implicite pentru toate elementele, site-ul poate totuși să pară diferit în diferite browsere. Acest lucru se datorează faptului că este posibil ca browserele să nu respecte standardul HTML. Browserele, ca orice software, pot conține erori. Aceste erori sunt de obicei repede rezolvate, dar există întotdeauna posibilitatea ca utilizatorul să nu aibă instalată ultima versiune a browserului.
De asemenea, este posibil ca furnizorii de browsere (în special păcatele MicroSoft) să creadă că știu mai bine cum să afișeze acest element sau acel element.
Având în vedere că principalul vinovat de problemele de incompatibilitate cu standardul - acesta este Internet Explorer, a fost inventat de multe ocoluri posibile, modul de a face un site web în IE arata la fel ca și în alte browsere.