Czasami pierwszym elementem HTML jaki piszemy w nowym dokumencie jest element, który owija wszystko inne na stronie. Określenie wrapper jest w tym przypadku powszechne. Dajemy mu klasę, a ta klasa jest odpowiedzialna za enkapsulację wszystkich wizualnych elementów na stronie.
Zawsze zmagałem się z najlepszym sposobem na implementację tego. Znalazłem powiązany wątek na StackOverflow, który ma ponad 250 000 wyświetleń, więc oczywiście nie jestem jedynym, który się zastanawia! Podsumuję moje ostatnie przemyślenia w tym artykule.
Zanim się w to zanurzymy, zbadajmy najpierw różnicę między „wrapperem” a „kontenerem”.
„Wrapper” vs „Container”
Wierzę, że istnieje różnica między elementami wrappera i kontenera.
W językach programowania słowo kontener jest ogólnie używane dla struktur, które mogą zawierać więcej niż jeden element. Z drugiej strony, wrapper jest czymś, co owija się wokół pojedynczego obiektu, aby zapewnić mu większą funkcjonalność i interfejs.
Więc, moim zdaniem, ma sens posiadanie dwóch różnych nazw, ponieważ zamierzają one pełnić różne funkcje.
Mówiąc o wrapperze, powszechnie myśli się o <div>, który zawiera całą resztę HTML dokumentu. Jestem pewien, że wielu z nas przeżyło czas, w którym ustawiliśmy to na 960px szerokości i wyśrodkowaliśmy wszystkie nasze główne treści. Wrappery są również używane do takich rzeczy jak stosowanie lepkiej stopki.
Kontener, z drugiej strony, zazwyczaj ma na celu inny rodzaj zamknięcia. Taki, który czasami jest niezbędny do zaimplementowania zachowania lub stylizacji wielu komponentów. Służy on do grupowania elementów zarówno semantycznie jak i wizualnie. Jako przykład, Bootstrap ma „klasy kontenerów”, które mieszczą ich system siatki lub zawierają różne inne komponenty.
Pojęcia wrapper i kontener mogą również oznaczać to samo, w zależności od dewelopera i tego, co zamierzają. Mogą istnieć również inne konwencje, więc najlepszą radą jest zazwyczaj wdrożenie tego, co ma dla ciebie największy sens. Pamiętaj jednak, że nazewnictwo jest jedną z najbardziej podstawowych i najważniejszych części pracy programisty. Konwencje nazewnicze sprawiają, że nasz kod jest bardziej czytelny i przewidywalny. Wybieraj ostrożnie!
Oto przykład ogólnego elementu zawijającego stronę:
/** * 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
Ustawienie width elementu poziomu bloku uniemożliwi mu rozciąganie się do krawędzi jego kontenera (dobre dla takich rzeczy jak czytelne długości linii). Dlatego element zawijający zajmie podaną szerokość. Problem pojawia się, gdy okno przeglądarki jest węższe niż określona szerokość elementu zawijającego. Wywoła to poziomy pasek przewijania, który jest prawie zawsze niepożądany.
Użycie max-width zamiast, w tej sytuacji, jest lepsze dla węższych okien przeglądarki. Jest to ważne, gdy chcemy, aby strona była użyteczna na małych urządzeniach. Oto dobry przykład pokazujący ten problem.
Zobacz sztuczki CSS Pen: The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.
Pod względem responsywności, max-width jest lepszym wyborem!
Additional Padding
Widziałem, że wielu programistów zapomina o jednym szczególnym przypadku brzegowym. Załóżmy, że mamy wrapper z max-width ustawiony na 980px. Przypadek krawędziowy pojawia się, gdy szerokość ekranu urządzenia użytkownika wynosi dokładnie 980px. Wtedy treść będzie dokładnie przyklejona do krawędzi ekranu bez pozostawionego miejsca na oddech.
Zazwyczaj chcemy mieć trochę paddingu na krawędziach. Dlatego, gdybym musiał zaimplementować wrapper o całkowitej szerokości 980px, zrobiłbym to tak:
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}Dlatego właśnie dodanie padding-left i padding-right do twojego wrappera może być dobrym pomysłem, szczególnie na urządzeniach mobilnych.
Albo, rozważ użycie box-sizing, tak aby padding nie zmieniał całkowitej szerokości w ogóle.
Który element HTML wybrać
Obwoluta nie ma żadnego semantycznego znaczenia. Po prostu przechowuje wszystkie elementy wizualne i zawartość na stronie. Jest to po prostu ogólny pojemnik. Pod względem semantyki, <div> jest najlepszym wyborem. Element <div> również nie ma żadnego znaczenia semantycznego i jest po prostu ogólnym pojemnikiem.
Można by się zastanawiać, czy może element <section> mógłby pasować do tego celu. Jednak oto, co mówi specyfikacja W3C:
Element
<section>nie jest generycznym elementem kontenera. Gdy element jest potrzebny tylko do celów stylizacji lub jako ułatwienie dla skryptów, autorzy są zachęcani do używania elementu div zamiast niego. Ogólna zasada mówi, że element section jest odpowiedni tylko wtedy, gdy zawartość tego elementu jest wyraźnie wymieniona w konspekcie dokumentu.
Element <section> posiada własną semantykę. Reprezentuje on tematyczne zgrupowanie treści. Temat każdej sekcji powinien być zidentyfikowany, zazwyczaj poprzez dołączenie nagłówka (element h1-h6) jako elementu potomnego elementu section.
Przykładami sekcji mogą być rozdziały, różne strony w oknie dialogowym z zakładkami lub numerowane sekcje pracy dyplomowej. Strona główna witryny internetowej może być podzielona na sekcje wstępu, aktualności i informacji kontaktowych.
Na pierwszy rzut oka może się to wydawać niezbyt oczywiste, ale tak! Plain ol’ <div> najlepiej pasuje do wrappera!
Używanie tagu <body> vs. Użycie dodatkowego znacznika <div>
Warto wspomnieć, że w niektórych przypadkach będzie można użyć elementu <body> jako wrappera. Poniższa implementacja będzie działać bez zarzutu:
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}I spowoduje, że w Twoim znaczniku będzie o jeden element mniej, ponieważ możesz w ten sposób zrezygnować z niepotrzebnego wrappera <div>.
Jednakże nie polecam tego ze względu na elastyczność i odporność na zmiany. Wyobraź sobie, że na późniejszym etapie projektu zdarzy się któryś z tych scenariuszy:
- Trzeba wymusić, aby stopka „przykleiła się” do końca dokumentu (na dole rzutni, gdy dokument jest krótki). Nawet jeśli możesz użyć najnowocześniejszego sposobu na zrobienie tego – z flexboxem, potrzebujesz dodatkowego wrappera
<div>. - Potrzebujesz ustawić tło
background-colorcałej strony. Normalnie, jakiekolwiek tło ustawisz na elemencie<body>będzie się zachowywało tak, jakby było ustawione na elemencie<html>, jeśli nie ma on jeszcze tła. Po prostu dziwna rzecz w CSS. Ale jeśli twój<html>element ma już tło, a ty ustawisz ciało na coś innego, a ciało ma jakiekolwiek ograniczenia odstępów, tła będą dziwne. To skomplikowana rzecz.
Wnioskowałbym, że nadal najlepszą praktyką jest posiadanie dodatkowego elementu <div> do implementacji wrappera CSS. W ten sposób, jeśli wymagania specyfikacji zmienią się później, nie będziesz musiał dodawać wrappera później i radzić sobie z przenoszeniem stylów wokół. W końcu mówimy tylko o jednym dodatkowym elemencie DOM.