Pentru a face ca pagina să fie afișată la fel de bine în diferite browsere, trebuie să lucrați la compatibilitatea cu browserul încrucișat. Acest lucru este ajutat de testarea paginii și depanarea html / css markup. Dar există instrumente care vă vor ajuta să reduceți ordonarea în stiluri și să vă asigurați că stilurile de bază sunt aceleași în diferite browsere. Care sunt aceste instrumente, de ce și cum să le folosiți - vom analiza în continuare.
Browsere și stiluri de bază
Faptul este că fiecare browser are implicit un anumit set de stiluri de bază care se aplică paginii implicite. Și dacă vom crea o pagină pe html "goală" fără aspect și stiluri, browserul va afișa în continuare eticheta cu dimensiuni mari și cu caractere aldine,
dimensiune ușor mai mică și așa mai departe. Browserul va evidenția textul din etichetă italice subliniază și - Bold.Acest lucru se va întâmpla deoarece browserul are deja stiluri proprii pentru elementele care, în mod implicit, se aplică paginilor pe care le deschide. Și faptul că în diferite browsere aceste reguli sunt ușor diferite, de la browser la browser. Acum 10 ani, aceste diferențe au fost direct cardinale și foarte izbitoare. Acum sunt minime, dar încă acolo.
Pentru a elimina aceste diferențe și a face afișarea implicită a paginii în toate browserele la fel - utilizați un fișier .css special: reset.css sau normalize.css
reset.css - ceea ce face și cum se utilizează
Primul fișier a fost reset.css. Acest fișier css conține o enumerare a tuturor etichetelor html posibile și resetează valoarea lor la zero. Acest lucru elimină toate indentările posibile, face ca fontul să fie același în toate etichetele, renunțând la toate stilurile de text. Deci, toate titlurile și paragrafele sunt afișate în text simplu, de o mărime și fără indentare. Ca rezultat, vom reinițializa stilurile implicite în toate browserele.
Acest lucru funcționează astfel, în primul rând pe pagină conectăm fișierul reset.css și după acesta fișierul cu stilurile. Ca rezultat, vom reseta mai întâi toate stilurile, iar apoi în stil.css am setat designul tag-urilor html. În acest fel, realizăm că toate browserele își vor reseta stilurile implicite, iar toate marcările se vor baza pe acele stiluri pe care le-am setat în stil.css.
Descărcați reset.css
Descărcați reset.css la cssreset.com
Sau puteți descărca versiunea lui Eric Meyer "Reset CSS" 2.0 pe butonul de mai jos, de pe blogul meu:
normalize.css - cum funcționează și care este diferența
După ce reset.css este conectat la pagină, toate stilurile trebuie să fie re-scrise. Și de fiecare dată când antrenează această ocupație. Prin urmare, un alt instrument - normaliza - a înlocuit resetarea. Normailze - așa cum sugerează și numele, nu reseta toate stilurile, însă le normalizează, le aduce într-o singură vizualizare în toate browserele. După aplicarea sa, stilurile de bază ale afișării anteturilor, dimensiunea fontului, indentarea ... - sunt unificate și afișate în toate browserele în același mod. Utilizarea acestuia - puteți salva o anumită perioadă de timp, care în cazul restituirii ar fi cheltuită pentru prescrierea stilurilor aruncate.
Dacă nu ați folosit încă normalize.css, atunci vă recomand să încercați în următorul dvs. proct și cine știe, poate că nu veți mai putea să-l refuzați 😉
Descărcați normalize.css
Sau descărcați de pe blogul meu:
Ce este mai bine decât resetarea sau normalizarea?
Nu există un răspuns neechivoc.
Primul - resetează toate stilurile, al doilea - duce la un singur numitor. Creatorii experimentați care utilizează reset.css au, de obicei, un set propriu de stiluri care sunt conectate imediat după resetare pentru a crea conținutul. Și nu trebuie să redefinească stilurile elementelor de bază de fiecare dată într-un aspect nou. Asa fac si eu. Este convenabil pentru mine și știu ce stiluri am setat implicit și cum funcționează.
normalizați este convenabil dacă studiați structura sa, o puteți modifica singură - stabilind aspectul elementar al etichetelor. Și lucrul cu acesta va fi, de asemenea, convenabil pe flux - atunci când trebuie să facă mult și adesea.
Fiecare instrument este bun, principalul lucru este să-l folosești corect 😉
Îți place postul? Distribuiți link-ul cu prietenii, aceștia vor aprecia:
Distribuiți pe Facebook
Trimiteți-le prietenilor: