Dnešní webový prohlížeč prošel dlouhou cestou od těch bláznivých dnů, kdy byl jakýkoli druh konzistence mezi různými prohlížeči zbožný. Dnešní webové prohlížeče jsou kompatibilní s mnoha standardy. Hrají pěkně dohromady a poskytují poměrně konzistentní zobrazení stránek v různých prohlížečích. Zahrnuje nejnovější verze prohlížečů Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari a různých prohlížečů nalezených na mnoha mobilních zařízeních, která jsou dnes přístupná k webu.
Zatímco jistě bylo dosaženo pokroku, pokud jde o webové prohlížeče a způsob zobrazování CSS, stále existují nesrovnalosti mezi těmito různými možnostmi softwaru. Jednou z běžných nesrovnalostí je, jak tyto prohlížeče počítají okraje, polstrování a hranice ve výchozím nastavení.
Vzhledem k těmto aspektům efektu krabicového modelu mají všechny prvky HTML a protože jsou podstatné při vytváření rozvržení stránky, nekonzistentní zobrazení znamená, že stránka může vypadat skvěle v jednom prohlížeči, ale v jiném vypadá lehce. V boji s tímto problémem mnoho webových designérů normalizuje tyto aspekty modelu boxu. Tato praxe je také známá jako "vynulování" hodnot pro okraje, polstrování a hranice.
Poznámka k výchozím parametrům prohlížeče
Webové prohlížeče mají výchozí nastavení pro určité aspekty zobrazení stránky. Například hypertextové odkazy jsou modré a podtržené jako výchozí. To je v různých prohlížečích konzistentní a přestože se většina návrhářů změní tak, aby vyhovovala návrhovým potřebám jejich konkrétního projektu, skutečnost, že všechny začínají se stejnými výchozími hodnotami, usnadňuje tyto změny. Je smutné, že výchozí hodnota pro okraje, polstrování a hranice nemá stejnou úroveň konzistence mezi prohlížeči.
Normalizační hodnoty pro okraje a vycpávky
Nejlepší způsob, jak vyřešit problém nekonzistentního modelu krabice, je nastavit všechny hranice a hodnoty vycpávky prvků HTML na nulu. Existuje několik způsobů, jak to udělat, je přidat toto pravidlo CSS do svého stylu:
* {margin: 0; polstrování: 0; }}Toto pravidlo CSS používá znak * nebo zástupný znak. Tento znak znamená "všechny prvky" a v podstatě by si zvolil každý element HTML a nastavil okraje a polstrování na 0. I když je toto pravidlo velmi nespecifické, protože je ve vašem externím stylu, bude mít vyšší specifičnost než výchozí prohlížeč hodnoty. Vzhledem k tomu, že tyto výchozí hodnoty jsou to, co přepsáte, tento jeden styl splní to, co chcete.
Další možností je použít tyto hodnoty na prvky HTML a tělo. Protože všechny ostatní prvky na vaší stránce budou dětmi těchto dvou prvků, kaskáda CSS by měla tyto hodnoty aplikovat na všechny ostatní prvky.
html, tělo {margin: 0; polstrování: 0; }}Tím se spustí váš návrh na stejném místě ve všech prohlížečích, ale jedna věc, kterou si vzpomínáte, je, že jakmile otočíte všechny okraje a vycpávky, budete je muset selektivně zapnout pro určité části webové stránky, abyste dosáhli vzhledu a pocit, že váš návrh vyžaduje.
Hranice
Možná si myslíte, že "žádné prohlížeče nemají hranici kolem prvku těla ve výchozím nastavení". To není přísně pravdivé. Starší verze aplikace Internet Explorer mají průhledné nebo neviditelné hranice kolem prvků. Pokud nastavíte okraj na hodnotu 0, může toto ohraničení narušit uspořádání stránek. Pokud jste se rozhodli, že budete nadále podporovat zastaralé verze IE, budete muset toto řešit přidáním následujícího textu do stylu vašeho těla a HTML:
HTML, tělo {
margin: 0px;
polstrování: 0px;
hranice: 0px;
}}
Stejně jako vypnutí okrajů a polstrování, tento nový styl také vypne výchozí hranice. Stejnou věc můžete udělat také pomocí voliče zástupných znaků, který byl dříve uveden v článku.
Původní článek Jennifer Krynin. Editoval Jeremy Girard dne 27.9.16.