Někdy je první částí HTML, kterou napíšeme v novém dokumentu, element, který obaluje vše ostatní na stránce. Běžně se pro to používá termín wrapper. Dáme mu třídu a ta je zodpovědná za zapouzdření všech vizuálních prvků na stránce.
Vždy jsem se potýkal s tím, jak to nejlépe implementovat. Na StackOverflow jsem našel související vlákno, které má více než 250 000 zobrazení, takže zřejmě nejsem jediný, kdo si s tím láme hlavu! Své poslední myšlenky shrnu v tomto článku.
Než se do toho ponoříme, prozkoumejme nejprve rozdíl mezi „wrapperem“ a „kontejnerem“.
„Wrapper“ vs „kontejner“
Myslím si, že mezi prvky wrapper a kontejner je rozdíl.
V programovacích jazycích se slovo kontejner obecně používá pro struktury, které mohou obsahovat více než jeden prvek. Naproti tomu wrapper je něco, co obklopuje jeden objekt a poskytuje mu více funkcí a rozhraní.
Podle mého názoru tedy dává smysl mít dva různé názvy, protože zamýšlejí různé funkce.
Mluvíme-li o wrapperu, běžně si představíme <div>, který obsahuje celý zbytek HTML dokumentu. Mnozí z nás jistě zažili dobu, kdy jsme jej nastavili na šířku 960px a veškerý hlavní obsah zarovnali na střed. Wrappery se také používají k takovým věcem, jako je použití lepící patičky.
Kontejner naproti tomu obvykle zamýšlí jiný druh omezení. Takový, který je někdy nutný k implementaci chování nebo stylování více komponent. Slouží k seskupení prvků jak sémanticky, tak vizuálně. Jako příklad lze uvést Bootstrap, který má „kontejnerové třídy“, v nichž je umístěn jejich mřížkový systém nebo které obsahují různé další komponenty.
Pojmy wrapper a kontejner mohou také znamenat totéž v závislosti na vývojáři a jeho záměru. Mohou existovat i další konvence, takže nejlepší radou je obvykle implementovat to, co vám dává největší smysl. Nezapomeňte však, že pojmenování je jednou z nejzákladnějších a nejdůležitějších součástí činnosti vývojáře. Pojmenovací konvence činí náš kód čitelnějším a předvídatelnějším. Vybírejte pečlivě!“
Tady je příklad obecného obalu stránky:
/** * 1. Centers the content. Yes, it's a bit opinionated. * 2. See the "width vs max-width" section * 3. See the "Additional Padding" section */.wrapper { margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */}width vs max-width
Nastavení width prvku na úrovni bloku zabrání jeho roztažení až k okrajům kontejneru (což je dobré například pro čitelné délky řádků). Obalový prvek tedy zabere zadanou šířku. Problém nastane, když je okno prohlížeče užší než konkrétní šířka obalového prvku. To vyvolá horizontální posuvník, což je téměř vždy nežádoucí.
Použití max-width místo toho je v této situaci lepší pro užší okna prohlížeče. To je důležité při vytváření webu použitelného na malých zařízeních. Zde je dobrý příklad demonstrující tento problém.
Přečtěte si článek Pen CSS-Tricks:
Z hlediska responzivity je max-width lepší volbou!
Dodatečný padding
Viděl jsem, že mnoho vývojářů zapomíná na jeden konkrétní okrajový případ. Řekněme, že máme obal s max-width nastaveným na 980px. Okrajový případ se objeví, když je šířka obrazovky zařízení uživatele přesně 980px. Obsah se pak přesně přilepí k okrajům obrazovky a nezbude žádný prostor pro dýchání.
Obvykle chceme na okrajích trochu výplně. Proto pokud bych potřeboval implementovat wrapper s celkovou šířkou 980px, udělal bych to takto:
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}Proto by bylo vhodné přidat do wrapperu padding-left a padding-right, zejména na mobilních zařízeních.
Nebo zvažte použití box-sizing, aby výplň vůbec nezměnila celkovou šířku.
Jaký element HTML zvolit
Obal nemá žádný sémantický význam. Jednoduše uchovává všechny vizuální prvky a obsah stránky. Je to jen obecný kontejner. Z hlediska sémantiky je nejlepší volbou <div>. Prvek <div> také nemá žádný sémantický význam a je to jen obecný kontejner.
Někoho by mohlo napadnout, zda by tomuto účelu nemohl vyhovovat prvek <section>. Zde je však uvedeno, co říká specifikace W3C:
Element
<section>není generický kontejnerový element. Pokud je prvek potřebný pouze pro účely stylování nebo jako usnadnění skriptování, doporučujeme autorům, aby místo něj použili prvek div. Obecným pravidlem je, že prvek oddíl je vhodný pouze tehdy, pokud by byl jeho obsah explicitně uveden v osnově dokumentu.
Prvek <section> nese vlastní sémantiku. Představuje tematické seskupení obsahu. Téma každé sekce by mělo být identifikováno, obvykle zahrnutím nadpisu (prvek h1-h6) jako potomka prvku sekce.
Příkladem sekcí mohou být kapitoly, různé stránky s kartami v dialogovém okně s kartami nebo číslované části diplomové práce. Domovská stránka webu by mohla být rozdělena na sekce pro úvod, novinky a kontaktní informace.
Na první pohled se to nemusí zdát příliš zřejmé, ale ano! Pro obal se nejlépe hodí obyčejný starý <div>!
Použití tagu <body> vs. Použití dalšího <div>
Je třeba zmínit, že v některých případech bude možné použít jako obalový prvek <body>. Následující implementace bude fungovat naprosto v pořádku:
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}A ve výsledku bude ve vašem značení o jeden prvek méně, protože tímto způsobem můžete vypustit onen nepotřebný wrapper <div>.
Tento postup bych však nedoporučoval z důvodu flexibility a odolnosti vůči změnám. Představte si, že v pozdější fázi projektu nastane některý z těchto scénářů:
- Potřebujete prosadit, aby se patička „přilepila“ na konec dokumentu (spodní část viewportu, když je dokument krátký). I když k tomu můžete použít nejmodernější způsob – pomocí flexboxu, potřebujete další obal
<div>. - Potřebujete nastavit
background-colorcelé stránky. Za normálních okolností se jakékoliv pozadí, které nastavíte na<body>, bude chovat stejně, jako kdyby bylo nastaveno na prvku<html>, pokud ten již pozadí nemá. Prostě divná věc v CSS. Pokud však váš prvek<html>již pozadí má a vy nastavíte tělu něco jiného a tělo má jakékoliv distanční omezení, pozadí bude divné. Je to ošemetná věc.
Dospěl bych k závěru, že je stále nejlepší praxí mít další <div> pro implementaci obalu CSS. Tímto způsobem, pokud se později změní požadavky na specifikaci, nemusíte později přidávat wrapper a řešit přesouvání stylů. Koneckonců se jedná pouze o jeden prvek DOM navíc.