Soms is het eerste stukje HTML dat we in een nieuw document schrijven een element dat al het andere op de pagina omhult. De term wrapper is daar gebruikelijk voor. We geven het een klasse, en die klasse is verantwoordelijk voor het inkapselen van alle visuele elementen op de pagina.
Ik heb altijd geworsteld met de beste manier om dit te implementeren. Ik vond een verwante thread op StackOverflow die meer dan 250.000 views heeft, dus ik ben duidelijk niet de enige die zich dat afvraagt! Ik zal mijn laatste gedachten in dit artikel samenvatten.
Voordat we erin duiken, laten we eerst het verschil tussen de “wrapper” en de “container” onderzoeken.
“Wrapper” vs “Container”
Ik geloof dat er een verschil is tussen wrapper- en container-elementen.
In programmeertalen wordt het woord container over het algemeen gebruikt voor structuren die meer dan één element kunnen bevatten. Een wrapper daarentegen is iets dat zich om een enkel object wikkelt om er meer functionaliteit en interface aan te geven.
Dus, naar mijn mening, is het zinvol om twee verschillende namen te hebben omdat ze verschillende functies beogen.
Over de wrapper gesproken, het is gebruikelijk om te denken aan een <div> die de rest van de HTML van het document bevat. Ik weet zeker dat velen van ons een tijd hebben meegemaakt waarin we die op 960px breedte instelden en al onze hoofdinhoud centreerden. Wrappers worden ook gebruikt voor dingen als het toepassen van een sticky footer.
De container, aan de andere kant, is meestal bedoeld voor een ander soort insluiting. Een die soms nodig is om een gedrag of styling van meerdere componenten te implementeren. Het dient het doel van het groeperen van elementen zowel semantisch als visueel. Bootstrap heeft bijvoorbeeld “container classes” die hun grid systeem huisvesten of verschillende andere componenten bevatten.
De termen wrapper en container kunnen ook hetzelfde betekenen, afhankelijk van de ontwikkelaar en wat hij bedoelt. Er kunnen ook andere conventies zijn, dus het beste advies is meestal om te implementeren wat voor jou het meest logisch is. Maar onthoud, naamgeving is een van de meest fundamentele en belangrijke onderdelen van ontwikkelaarsactiviteiten. Conventies voor naamgeving maken onze code leesbaarder en voorspelbaarder. Kies zorgvuldig!
Hier volgt een voorbeeld van een algemene pagina-wrapper:
/** * 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
Door de width van een block-level element in te stellen, voorkom je dat het zich uitstrekt tot de randen van zijn container (goed voor dingen als leesbare regellengtes). Daarom zal het wrapper element de opgegeven breedte innemen. Het probleem ontstaat als het browservenster smaller is dan de specifieke breedte van de wrapper. Dat veroorzaakt een horizontale scrollbar, wat bijna altijd ongewenst is.
Het gebruik van max-width in plaats daarvan, is in deze situatie beter voor smallere browservensters. Dit is belangrijk als je een site bruikbaar wilt maken op kleine apparaten. Hier is een goed voorbeeld dat het probleem laat zien.
Zie de Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper door Kaloyan Kosev (@superKalo) op CodePen.
In termen van responsiveness, max-width is de betere keuze!
Extra padding
Ik heb veel ontwikkelaars een bepaald randgeval zien vergeten. Laten we zeggen dat we een wrapper hebben met max-width ingesteld op 980px. Het randgeval verschijnt wanneer de schermbreedte van het apparaat van de gebruiker precies 980px is. De inhoud wordt dan precies aan de randen van het scherm geplakt zonder dat er nog ademruimte over is.
Wij willen meestal een beetje padding aan de randen. Als ik daarom een wikkel moet implementeren met een totale breedte van 980px, zou ik het zo doen:
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}Daarom is het toevoegen van padding-left en padding-right aan je wikkel misschien een goed idee, vooral op mobiel.
Of overweeg om box-sizing te gebruiken, zodat de padding de totale breedte helemaal niet verandert.
Welk HTML-element te kiezen
Een wrapper heeft geen semantische betekenis. Het houdt gewoon alle visuele elementen en inhoud op de pagina vast. Het is gewoon een algemene container. In termen van semantiek is <div> de beste keuze. De <div> heeft ook geen semantische betekenis en het is gewoon een generieke container.
Je zou je kunnen afvragen of misschien een <section> element voor dit doel geschikt zou kunnen zijn. Maar dit is wat de W3C spec zegt:
Het
<section>element is geen generiek container element. Als een element alleen nodig is voor styling doeleinden of als een gemak voor scripting, worden auteurs aangemoedigd om in plaats daarvan het div element te gebruiken. Een algemene regel is dat het section element alleen geschikt is als de inhoud van het element expliciet in de outline van het document zou worden vermeld.
Het <section> element heeft zijn eigen semantiek. Het vertegenwoordigt een thematische groepering van inhoud. Het thema van elke sectie moet worden aangegeven, meestal door een kop (h1-h6-element) op te nemen als kind van het sectie-element.
Voorbeelden van secties zijn hoofdstukken, de verschillende pagina’s met tabbladen in een dialoogvenster met tabbladen, of de genummerde secties van een proefschrift. De startpagina van een website zou kunnen worden opgedeeld in secties voor een inleiding, nieuwsberichten en contactinformatie.
Het lijkt op het eerste gezicht misschien niet erg voor de hand liggend, maar ja! De gewone ouderwetse <div> past het beste voor een wrapper!
Gebruik van de <body> tag vs. Gebruik van een extra <div>
Het is de moeite waard te vermelden dat er enkele gevallen zullen zijn waarin je het <body> element als een wrapper zou kunnen gebruiken. De volgende implementatie werkt prima:
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}En het resulteert in een element minder in je markup omdat je die overbodige wrapper <div> op deze manier kunt laten vallen.
Het is echter niet aan te raden, vanwege de flexibiliteit en de bestendigheid tegen veranderingen. Stel je voor dat in een later stadium van het project een van de volgende scenario’s zich voordoet:
- Je moet een voettekst afdwingen om aan het eind van het document te “plakken” (onderkant van de viewport als het document kort is). Zelfs als je de modernste manier kunt gebruiken om dat te doen – met flexbox, heb je een extra wrapper nodig
<div>. - Je moet de
background-colorvan de hele pagina instellen. Normaal gesproken zal de achtergrond die je instelt op de<body>zich gedragen alsof die is ingesteld op het<html>element als dat nog geen achtergrond heeft. Gewoon een raar iets in CSS. Maar als je<html>element al een achtergrond heeft, en je stelt de body in op iets anders, en de body heeft een soort van spatiëring beperking, dan zullen achtergronden vreemd worden. Het is een lastig iets.
Ik zou concluderen dat het nog steeds best practice is om een extra <div> te hebben voor het implementeren van een CSS wrapper. Op deze manier hoef je, als de specificaties later veranderen, de wrapper later niet toe te voegen en de stijlen niet te verplaatsen. We hebben het tenslotte maar over één extra DOM element.