Browserul web de astăzi a parcurs un drum lung din zilele nebune în care orice fel de consecvență încrucișată cu browser-ul a fost dorință. Web browserele de astăzi sunt compatibile cu standardele. Acestea joacă frumos împreună și oferă o afișare destul de consistentă a paginii în diferitele browsere. Acestea includ cele mai recente versiuni ale Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari și diferitele browsere găsite pe nenumăratele dispozitive mobile folosite pentru a accesa site-ul web astăzi.
Deși s-au făcut cu siguranță progrese în ceea ce privește browserele web și modul în care acestea afișează CSS, există încă incoerențe între aceste opțiuni software diferite. Una dintre inconsecvențele comune este modul în care acele browsere calculează în mod prestabilit margini, plăcuțe și frontiere.
Datorită acestor aspecte ale efectului modelului cutie toate elementele HTML și datorită faptului că sunt esențiale pentru crearea layout-urilor de pagini, afișarea inconsistentă înseamnă că o pagină poate arăta grozav într-un singur browser, dar arata ușor în altă pagină. Pentru a combate această problemă, mulți designeri web normalizează aceste aspecte ale modelului de cutie. Această practică este, de asemenea, cunoscută sub numele de "eliminarea" valorilor pentru margini, umplutură și granițe.
O notă privind setările implicite ale browserului
Toate browserele Web au setări implicite pentru anumite aspecte ale unei pagini afișate. De exemplu, hyperlink-urile sunt albastre și subliniate în mod implicit. Acest lucru este consecvent în diferite browsere și, deși este ceva care majoritatea designerilor se schimbă pentru a se potrivi nevoilor de proiectare ale proiectului lor specific, faptul că toate încep cu aceleași setări implicite face mai ușoară efectuarea acestor modificări. Din păcate, valoarea implicită pentru margini, umpluturi și margini nu se bucură de același nivel de coerență între browsere.
Valorile de normalizare pentru margini și garnituri
Cea mai bună modalitate de a rezolva problema modelului cutie inconsistentă este setarea la zero a tuturor marjelor și valorilor de umplutură ale elementelor HTML. Există câteva moduri în care puteți face acest lucru: adăugați această regulă CSS în foaia dvs. de stil:
* {marja: 0; umplutura: 0; }Această regulă CSS folosește caracterul * sau caracterul wildcard. Acest caracter înseamnă "toate elementele" și ar selecta în esență fiecare element HTML și va stabili margini și umplutură la 0. Chiar dacă această regulă este foarte nespecifică, deoarece este în foaia de stil externă, va avea o specificitate mai mare decât browserul implicit valorile fac. Deoarece acele valori implicite sunt cele pe care le suprimați, acest stil va realiza ceea ce vă propuneți să faceți.
O altă opțiune este de a aplica aceste valori elementelor HTML și corpului. Deoarece toate celelalte elemente de pe pagina dvs. vor fi copii ai acestor două elemente, cascada CSS ar trebui să aplice aceste valori tuturor acestor elemente.
html, organism {margine: 0; umplutura: 0; }Acest lucru va incepe designul dvs. in acelasi loc pe toate browserele, dar un lucru de retinut este ca odata ce transformati toate marginile si padding off, va trebui sa le intoarceti selectiv pentru anumite parti ale paginii dvs. web pentru a obtine aspectul și simțiți că designul dvs. solicită.
Frontiere
S-ar putea să vă gândiți "dar niciun browser nu are o graniță în jurul elementului corpului în mod implicit". Acest lucru nu este strict adevărat. Versiunile mai vechi ale Internet Explorer au o graniță transparentă sau invizibilă în jurul elementelor. Cu excepția cazului în care setați marginea la 0, marginea respectivă vă poate afecta aspectul paginilor. Dacă ați decis că veți continua să sprijiniți aceste versiuni anterioare ale IE, va trebui să abordați acest lucru prin adăugarea următoarelor elemente în corpul dvs. și în stilurile HTML:
HTML, corp {
margine: 0px;
padding: 0px;
frontieră: 0px;
}
Similar cu modul în care ați oprit margini și umplutură, acest nou stil va opri de asemenea marginea implicită. De asemenea, ați putea face același lucru utilizând selectorul de săgeată afișat mai devreme în articol.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 9/27/16.