Manchmal ist das erste Stück HTML, das wir in ein neues Dokument schreiben, ein Element, das alles andere auf der Seite umhüllt. Dafür ist der Begriff Wrapper gebräuchlich. Wir geben ihm eine Klasse, und diese Klasse ist dafür verantwortlich, alle visuellen Elemente auf der Seite zu kapseln.
Ich habe immer mit dem besten Weg gekämpft, dies zu implementieren. Ich habe einen entsprechenden Thread auf StackOverflow gefunden, der mehr als 250.000 Aufrufe hat, also bin ich offensichtlich nicht der einzige, der sich das fragt! In diesem Artikel fasse ich meine letzten Überlegungen zusammen.
Bevor wir eintauchen, wollen wir zunächst den Unterschied zwischen „Wrapper“ und „Container“ untersuchen.
„Wrapper“ vs. „Container“
Ich glaube, dass es einen Unterschied zwischen Wrapper- und Container-Elementen gibt.
In Programmiersprachen wird das Wort Container im Allgemeinen für Strukturen verwendet, die mehr als ein Element enthalten können. Ein Wrapper hingegen ist etwas, das ein einzelnes Objekt umhüllt, um ihm mehr Funktionalität und eine Schnittstelle zu bieten.
Meiner Meinung nach macht es also Sinn, zwei verschiedene Namen zu haben, weil sie unterschiedliche Funktionen haben.
Als Wrapper kann man sich ein <div> vorstellen, das den ganzen Rest des HTML des Dokuments enthält. Ich bin mir sicher, dass viele von uns schon einmal erlebt haben, dass wir es auf eine Breite von 960 px eingestellt und unseren gesamten Hauptinhalt zentriert haben. Wrapper werden auch für Dinge wie das Anbringen einer klebrigen Fußzeile verwendet.
Der Container hingegen beabsichtigt normalerweise eine andere Art der Eingrenzung. Eine, die manchmal notwendig ist, um ein Verhalten oder ein Styling von mehreren Komponenten zu implementieren. Er dient dem Zweck, Elemente sowohl semantisch als auch visuell zu gruppieren. Bootstrap hat zum Beispiel „Container-Klassen“, die das Grid-System beherbergen oder verschiedene andere Komponenten enthalten.
Die Begriffe Wrapper und Container können auch dasselbe bedeuten, je nach Entwickler und dessen Absicht. Es kann auch andere Konventionen geben, so dass der beste Rat ist, das zu implementieren, was für Sie am meisten Sinn macht. Aber denken Sie daran, dass die Namensgebung einer der grundlegendsten und wichtigsten Teile der Entwickleraktivitäten ist. Namenskonventionen machen unseren Code besser lesbar und vorhersehbar. Wählen Sie sorgfältig!
Hier ist ein Beispiel für einen allgemeinen Seiten-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
Das Setzen des width eines Block-Level-Elements verhindert, dass es sich bis zu den Rändern seines Containers ausdehnt (gut für Dinge wie lesbare Zeilenlängen). Daher wird das Wrapper-Element die angegebene Breite einnehmen. Das Problem tritt auf, wenn das Browserfenster schmaler ist als die spezifische Breite des Wrappers. Dies führt zu einer horizontalen Bildlaufleiste, was fast immer unerwünscht ist.
Die Verwendung von max-width ist in dieser Situation besser für schmalere Browserfenster. Dies ist wichtig, um eine Website auch auf kleinen Geräten nutzbar zu machen. Hier ist ein gutes Beispiel, das das Problem verdeutlicht.
Siehe den Stift CSS-Tricks: The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.
In Bezug auf die Reaktionsfähigkeit ist max-width die bessere Wahl!
Additional Padding
Ich habe gesehen, dass viele Entwickler einen bestimmten Randfall vergessen. Nehmen wir an, wir haben einen Wrapper mit max-width auf 980px eingestellt. Der Randfall tritt ein, wenn die Bildschirmbreite des Geräts des Benutzers genau 980 Pixel beträgt. Der Inhalt klebt dann genau an den Rändern des Bildschirms und lässt keinen Spielraum mehr.
Gewöhnlich wollen wir an den Rändern ein wenig Polsterung. Wenn ich also einen Wrapper mit einer Gesamtbreite von 980px implementieren muss, würde ich es so machen:
.wrapper { max-width: 960px; /* 20px smaller, to fit the paddings on the sides */ padding-right: 10px; padding-left: 10px; /* ... */}Deshalb könnte es eine gute Idee sein, padding-left und padding-right zu deinem Wrapper hinzuzufügen, besonders auf mobilen Geräten.
Oder erwägen Sie die Verwendung von box-sizing, so dass das Padding die Gesamtbreite nicht verändert.
Welches HTML-Element ist zu wählen
Ein Wrapper hat keine semantische Bedeutung. Er enthält einfach alle visuellen Elemente und Inhalte auf der Seite. Er ist nur ein allgemeiner Container. In Bezug auf die Semantik ist <div> die beste Wahl. Das <div> hat ebenfalls keine semantische Bedeutung und ist nur ein allgemeiner Container.
Man könnte sich fragen, ob nicht vielleicht ein <section>-Element diesen Zweck erfüllen könnte. Hier ist jedoch, was die W3C-Spezifikation sagt:
Das
<section>-Element ist kein allgemeines Containerelement. Wenn ein Element nur für Styling-Zwecke oder als Bequemlichkeit für die Skripterstellung benötigt wird, sollten die Autoren stattdessen das div-Element verwenden. Eine allgemeine Regel besagt, dass das section-Element nur dann angemessen ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird.
Das <section>-Element hat eine eigene Semantik. Es stellt eine thematische Gruppierung des Inhalts dar. Das Thema jedes Abschnitts sollte gekennzeichnet werden, in der Regel durch eine Überschrift (h1-h6-Element) als Kind des Abschnitts-Elements.
Beispiele für Abschnitte wären Kapitel, die verschiedenen Registerkarten in einem Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer Diplomarbeit. Die Homepage einer Website könnte in Abschnitte für eine Einleitung, Nachrichten und Kontaktinformationen unterteilt werden.
Auf den ersten Blick mag es nicht sehr offensichtlich erscheinen, aber ja! Das einfache alte <div> eignet sich am besten für einen Wrapper!
Verwendung des <body> Tags vs. Verwendung eines zusätzlichen <div>
Es ist erwähnenswert, dass es einige Fälle geben wird, in denen man das <body>-Element als Wrapper verwenden könnte. Die folgende Implementierung wird perfekt funktionieren:
body { margin-right: auto; margin-left: auto; max-width: 960px; padding-right: 10px; padding-left: 10px;}Und es wird zu einem Element weniger in Ihrem Markup führen, weil Sie das unnötige Wrapper <div> auf diese Weise weglassen können.
Allerdings würde ich dies nicht empfehlen, wegen der Flexibilität und der Unempfindlichkeit gegenüber Änderungen. Stellen Sie sich vor, dass in einer späteren Phase des Projekts eines der folgenden Szenarien eintritt:
- Sie müssen eine Fußzeile erzwingen, die am Ende des Dokuments „klebt“ (am unteren Rand des Viewports, wenn das Dokument kurz ist). Selbst wenn Sie die modernste Methode dazu verwenden können – mit Flexbox – benötigen Sie einen zusätzlichen Wrapper
<div>. - Sie müssen das
background-colorder gesamten Seite festlegen. Normalerweise verhält sich der Hintergrund, den Sie für das<body>-Element festlegen, so, als ob er für das<html>-Element festgelegt worden wäre, falls es nicht bereits einen Hintergrund hat. Das ist eine seltsame Sache in CSS. Aber wenn Ihr<html>-Element bereits einen Hintergrund hat und Sie den Body auf etwas anderes setzen und der Body irgendeine Art von Abstandsbeschränkung hat, werden die Hintergründe seltsam. Das ist eine knifflige Sache.
Ich würde zu dem Schluss kommen, dass es immer noch die beste Praxis ist, ein zusätzliches <div> für die Implementierung eines CSS-Wrappers zu haben. Auf diese Weise müssen Sie, wenn sich die Anforderungen später ändern, den Wrapper nicht nachträglich hinzufügen und sich mit dem Verschieben der Stile herumschlagen. Schließlich handelt es sich nur um ein zusätzliches DOM-Element.