Dnešný webový prehliadač sa dostal ďaleko od bláznivých dní, keď akýkoľvek druh konzistencie medzi rôznymi prehliadačmi bol zbožný. Dnešné webové prehliadače sú v súlade s normami. Hrajú pekne a prinášajú pomerne konzistentné zobrazenie stránok v rôznych prehliadačoch. To zahŕňa najnovšie verzie prehliadačov Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari a rôznych prehliadačov, ktoré sa nachádzajú na nespočetných mobilných zariadeniach, ktoré sa dnes používajú na prístup k webovým stránkam.
Hoci sa určite dosiahol pokrok v oblasti webových prehliadačov a spôsobu ich zobrazovania, stále existujú nejednotnosti medzi týmito rôznymi softvérovými možnosťami. Jednou z častých nezrovnalostí je to, ako tieto prehliadače predvolene vypočítajú okraje, polstrovanie a okraje.
Kvôli týmto aspektom efektu modelu boxu všetky prvky HTML a preto, že sú nevyhnutné pri vytváraní rozloženia stránok, nekonzistentný zobrazenie znamená, že stránka môže vyzerať skvele v jednom prehliadači, ale v inom prehliadači sa mierne pozerá. Na boj s týmto problémom mnohí web dizajnéri normalizujú tieto aspekty boxového modelu. Táto prax je tiež známa ako "vynulovanie" hodnôt pre okraje, polstrovanie a hranice.
Poznámka k predvoleným nastaveniam prehliadača
Webové prehliadače majú všetky predvolené nastavenia pre určité aspekty zobrazenia stránky. Napríklad, odkazy sú modré a štandardne podčiarknuté. Toto je v rôznych prehliadačoch konzistentné a aj keď je to, čo väčšina návrhárov mení, aby vyhovovali projektovým potrebám konkrétneho projektu, skutočnosť, že všetci začínajú s rovnakými predvolenými nastaveniami, uľahčuje tieto zmeny. Bohužiaľ, predvolená hodnota pre okraje, polstrovanie a hranice nemá rovnakú úroveň konzistencie medzi rôznymi prehliadačmi.
Normalizácia hodnôt pre okraje a výplň
Najlepším spôsobom, ako vyriešiť problém nekonzistentného modelu krabice, je nastavenie všetkých okrajov a políčok hodnôt prvkov HTML na nulu. Existuje niekoľko spôsobov, ako to urobiť, je pridať toto pravidlo CSS do vášho štýlu šablón:
* (rozpätie: 0; polstrovanie: 0; }Toto pravidlo CSS používa znak * alebo zástupný znak. Tento znak znamená "všetky prvky" a v podstate by si vybral každý prvok HTML a nastavil okraje a polstrovanie na 0. Aj keď je toto pravidlo veľmi nešpecifické, pretože je vo vašom externom štýle šablón, bude mať vyššiu špecifickosť ako predvolený prehliadač hodnoty. Keďže tieto predvolené hodnoty sú to, čo prepisujete, tento štýl dosiahne to, čo chcete.
Ďalšou možnosťou je použiť tieto hodnoty na prvky HTML a telo. Keďže všetky ostatné prvky na vašej stránke budú deťmi týchto dvoch prvkov, kaskáda CSS by mala tieto hodnoty aplikovať na všetky ostatné prvky.
html, body {margin: 0; polstrovanie: 0; }To začne váš dizajn na rovnakom mieste na všetkých prehliadačoch, ale jedna vec, ktorú si pamätajte, je, že akonáhle sa obrátiť všetky okraje a padding off, budete musieť selektívne zapnúť ich späť na konkrétne časti vašej webovej stránky, aby sa dosiahla vzhľad a cítiť, že váš dizajn vyžaduje.
hranice
Možno si myslíte, že "žiadne prehliadače nemajú hranicu okolo prvku telo v predvolenom nastavení". To nie je striktne pravdivé. Staršie verzie programu Internet Explorer majú priehľadné alebo neviditeľné hranice okolo prvkov. Pokiaľ nastavíte okraj na hodnotu 0, táto hranica môže narušiť rozloženie vašej stránky. Ak ste sa rozhodli, že budete naďalej podporovať tieto zastarané verzie IE, musíte to riešiť pridaním nasledujúceho textu do vášho tela a HTML štýlov:
HTML, body {
okraj: 0px;
polstrovanie: 0px;
okraj: 0px;
}
Podobne ako ste vypínali okraje a polstrovanie, tento nový štýl tiež vypne predvolené hranice. Môžete tiež urobiť to isté pomocou voľby zástupných znakov zobrazených skôr v článku.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 27.9.16.