Der Unterschied zwischen <html> und <body> ist leicht zu übersehen. Es scheint eines dieser Dinge zu sein, die in die Kategorie des Trivialen fallen. Zugegebenermaßen habe ich die Angewohnheit, alle globalen Stile auf <body> anzuwenden, und wenn das nicht ausreicht, wechsle ich gedankenlos zu <html>.
Es gibt jedoch Unterschiede, und es ist eine gute Idee, sich dessen bewusst zu sein, unabhängig davon, ob wir CSS-Veteranen oder Neulinge sind. Wir werden diese in diesem Beitrag behandeln und einige praktische Anwendungen betrachten, bei denen die Gestaltung des einen gegenüber dem anderen sinnvoll sein könnte.
Wie HTML und Body zusammenhängen
Betrachten Sie diese Standardstruktur für ein einfaches HTML-Dokument
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and such -->
</head>
<body>
<!-- Where the content begins -->
<body>
</html>Die Spezifikation definiert <html> als Wurzelelement eines Dokuments, und wir können das im obigen Beispiel deutlich sehen: Das <html>-Element ist die oberste Ebene aller anderen Elemente. Dort endet es, da es keine weiteren Ebenen gibt, von denen Stile geerbt werden könnten.
Von dort aus bilden <head> und <body> die einzigen beiden Elemente, die sich direkt innerhalb von <html> befinden. Tatsächlich definiert die Spezifikation <body> direkt im Gegensatz zu <head>, da dies die einzigen beiden Elemente sind, die unterschieden werden müssen.
Die Quintessenz hier ist also, dass <html> das Wurzelelement eines Dokuments ist, während <body> ein Nachfahre ist, der darin enthalten ist. Tatsächlich gibt es in CSS einen :root-Selektor. Diese zielen auf exakt dasselbe ab
:root {
}
html {
}Außer dass :root eine höhere Spezifität hat: (0, 0, 1, 0) vs. (0, 0, 0, 1).
Sollten wir also immer globale Stile auf <html> anwenden, richtig?
Es ist verlockend zu denken, dass alle Stile, die wir überall erben lassen wollen, direkt auf <html> angewendet werden sollten, da es das Wurzelelement des Dokuments ist. <html> übertrifft <body> in der Hierarchie, daher folgt daraus, dass es alle globalen Stile enthalten muss.
Aber das ist nicht ganz richtig. Tatsächlich wurden Inline-Attribute für die folgenden Elemente ursprünglich der <body>-Spezifikation zugewiesen:
- background
- bgcolor
- marginbottom
- marginleft
- marginright
- margintop
- text
Während diese Attribute jetzt als veraltet gelten, ist die Empfehlung, stattdessen CSS mit den entsprechenden CSS-Eigenschaften zu verwenden:
| Inline-Attribut | CSS-Eigenschaft |
| background | background |
| bgcolor | background background-color |
| marginbottom | margin-bottom |
| marginleft | margin-left |
| marginright | margin-right |
| margintop | margin-top |
| text | font |
Da diese CSS-Eigenschaften von Inline-Attributen stammen, die für <body> geschrieben wurden, wäre es angebracht, sie auch in CSS direkt auf <body> anzuwenden, anstatt sie in das <html>-Element zu verschieben.
Also sollten wir globale Stile immer auf <body> anwenden, richtig?
Nun, nicht ganz. Es kann Situationen geben, in denen es sinnvoller ist, Stile auf <html> anzuwenden. Betrachten wir ein paar dieser Szenarien.
Arbeiten mit rem-Einheiten
Die rem-Einheit ist relativ zur Dokumentenwurzel. Wenn Sie zum Beispiel so etwas schreiben:
.module {
width: 40rem;
}ist die rem-Einheit relativ zur font-size des <html>-Elements, das die Dokumentenwurzel ist. Was auch immer also als Standard des Benutzers auf der Wurzelebene festgelegt ist, daran wird sich die .module-Klasse orientieren.
Jonathan Snook hat einen klassischen Beitrag, der schön veranschaulicht, wie die Einstellung der font-size auf <html> als Prozentwert als Reset beim Arbeiten mit rem-Einheiten verwendet werden kann.
Eigenartige background-color
Es gibt eine seltsame Sache in CSS, bei der die background-color auf <body> den gesamten Viewport ausfüllt, selbst wenn die Maße des Elements selbst diesen Bereich nicht abdecken. Es sei denn, die background-color wird auf das html-Element gesetzt, dann tut sie das nicht.
Wenn das Auffüllen das Ziel ist, kann es sinnvoll sein, es von vornherein auf das html-Element zu setzen.
Zusammenfassend
Hoffentlich wirft dies Licht auf die wesentlichen Unterschiede zwischen der Verwendung von <html> und <body> in CSS. Es gibt auch JavaScript-Unterschiede. Zum Beispiel müssen Sie nicht nach beiden suchen, html ist document.rootElement und body ist document.body.
Wir könnten sicherlich weitere technische Unterschiede zwischen den beiden ziehen, aber der Punkt hier ist, unser Verständnis zu verbessern, um bessere Entscheidungen beim Schreiben von CSS zu treffen.
Haben Sie weitere Beispiele, wo es sinnvoller ist, das eine gegenüber dem anderen zu gestalten? Oder haben Sie vielleicht eigene Kriterien, wann Sie das eine gestalten? Lassen Sie es uns in den Kommentaren wissen!
Normalerweise neige ich dazu, background-color auf das html zu werfen und das body als Wrapper zu verwenden.
So muss ich keinen zusätzlichen div-Container mit der Klasse „wrapper“ oder etwas Ähnlichem definieren.
Auch danke für die Erwähnung, dass :root eine höhere Spezifität als der html-Selektor hat. Das wusste ich nicht! <3
Prost.
Nun, ich fühle mich wie ein Narr. Es ist mir nie in den Sinn gekommen, body als Wrapper zu verwenden. Ich schätze, ich hatte immer angenommen, dass es heilig sei und niemals für schmutzige alte Stile verwendet werden dürfe, und dass es nur Hintergrund- und Schriftstile, aber niemals Margen usw. enthalten dürfe. Ich weiß nicht, woher ich diese Theorien habe, es ist einfach eines dieser Dinge, wenn man sie in der Praxis nie anders verwendet sieht.
Ich habe früher den body für die Hintergrundfarbe und das Hauptelement für das Wrapping verwendet, aber dann habe ich festgestellt, dass das Hauptelement für die Barrierefreiheit dem Haupt-ARIA-Rolle zugeordnet sein sollte. Also bin ich zu einem div.container übergegangen. Ich habe nie daran gedacht, body als Wrapper zu verwenden. Interessant…
Es sei denn, Sie erstellen einen sehr einfachen persönlichen Blog und wissen, was Sie tun – die Verwendung von body als Wrapper ist wahnsinnig großartig. Sie könnten sogar verrückt werden und das Titel-Element als sichtbaren Seitentitel anzeigen lassen!
Okay, das Zweite ist übertrieben und wird nicht von allen Browsern unterstützt.
Aber sobald Sie zu Websites wechseln, die mehr Funktionen benötigen, müssen Sie zu einem anderen Wrapper-Element übergehen. Leider gibt es zu viele Probleme mit z. B. Drittanbieter-Bildbetrachtern und HTML-Dialogen. Was auch, wenn Sie eine Seite benötigen, auf der eine Zeile wieder volle Breite haben muss?
Der Versuch, all das zu beheben, wird zu einer Website führen, die niemand pflegen möchte.
Die Idee, body als Wrapper zu verwenden, ist gut! Ich mag sie sehr, ich werde sie auf meinen zukünftigen Websites implementieren.
Ich mag Ihre Denkweise. Es ärgert mich immer, wenn ich sehe
<
div class=”wrapper”> direkt nach einem BODY-Tag.
Rene, Sie haben einen Punkt bezüglich der vollen Breite, aber ich hatte noch nie Probleme mit body-als-Wrapper und Drittanbieter-JS, und ich habe es auf mittelgroßen bis großen Websites verwendet.
document.rootElementgibtnullzurück, wenndocument.documentElementdashtml-Element zurückgibt.Wann ist das der Fall?
Das. Ich stimme zu,
document.documentElementgibt dashtml-Element zurück.https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement
Ich sehe das Gleiche auf OS X/Chrome 42.
https://dl.dropboxusercontent.com/u/67362/latest-chrome-rootElement-docElement.jpg
Ich wusste nicht, dass
:rooteine höhere Spezifität alshtmlhat und habe mich schon immer gefragt, was der Unterschied ist. Toller Tipp, Geoff.Ich bin mir nicht sicher, woher
document.rootElementkommt, aber es gibt *nicht* das<html>-Element zurück. (Ich habe es in Chrome, Firefox und Spartan getestet.) Die Standardeigenschaft ist stattdessendocument.documentElement(siehe DOM-Spezifikation).Interessant. Ich bin sicher, dass
document.rootElementfrüher in Webkit/Blink funktioniert hat. Jetzt erscheint es in der Konsole als Eigenschaft in der Autovervollständigung, hat aber einennull-Wert.Unabhängig davon ist, wie andere gesagt haben, die Standard-DOM-Eigenschaft
document.documentElement.html {
transform: translate(-60px, 0px);
}
@philtune Ich schätze, es ist irgendwie heilig, weil es ein Wrapper ist, den man nicht entfernen kann, also müssen alle Ihre Seiten dessen Stil erben. Wenn Sie einen .wrapper div hineinwerfen, können Sie sich davon ausnehmen.
Aber in Bezug auf grundlegende Stile wie Hintergrund, Schriftstil usw. stimme ich zu. Dafür ist body da.
Außer dass es einfach ist, eine Klasse auf den Wrapper selbst zu werfen, um zwischen den Bedürfnissen verschiedener Seiten zu unterscheiden. Sie können grundlegende Stile auf das body-Element anwenden und dann mit Klassen wie .body-home oder .body-about Anpassungen vornehmen.
Ich glaube, was er meint, ist, dass wenn Sie möchten, dass ein Bild die gesamte Breite des Viewports einnimmt und Text eine festgelegte Breite hat, Sie am Ende dieses zusätzliche Wrapper-Element im HTML hinzufügen werden.
Wenn es eine einfache Website ist, dann ja.
html
head
Körper
header
.wrapper
main
.wrapper
img
.wrapper
footer
.wrapper
Das Festlegen der Hintergrundfarbe im html-Tag scheint sehr früh im Rendering-Prozess zu erfolgen, und wenn Sie viele Inklusionen im head-Bereich vor dem body-Bereich haben, wird Ihre Seite mit der Hintergrundfarbe gerendert, bevor die anderen Dinge geladen werden.
Guter Punkt. Das würde ich als ein weiteres Argument dafür zählen, den Seitenhintergrund auf
<html>zu legen. Damit Sie eher das Gefühl haben, dass "hier etwas passiert".Ich setze oft
um zu verhindern, dass die Seitenbreite „zuckt“. Denken Sie, dass
htmldas richtige Element für diese Regel ist?Ja. Es gibt kein Element, das die Standard-Scrollleiste überlappen kann, sodass es sich wirklich um eine Scrollleiste am Wurzelpunkt der Seite (sogar des Fensters) handelt.
Sie könnten sich auch für die Verwendung von :root entscheiden, aber das ist im Grunde dasselbe.
Ich benutze generell das html-Tag für sitewide Angelegenheiten (genau wie Modernizr-Klassen) und das body-Tag für seitenspezifische Klassen, wenn das Sinn macht.
Ich neige dazu, Höhe und Breite des body zusammen mit dem html-Tag zu setzen, wenn ich eine an das Fenster angepasste Website erstelle.
In der Eigenart bezüglich Hintergrundfarben sagen Sie
Diese Schlussfolgerung scheint der ersten Aussage zu widersprechen. Lese ich das richtig oder verstehe ich etwas falsch?
Unten beantwortet.
Gott sei Dank, das ist etwas, das ich einfach nicht wusste
http://klinikkandungananak.com
Selbst Google hat HTML/CSS-Fehler…
http://www.richard-visav.com
Schöner Link-Spam da. Erwarten Sie nicht, dass ich darauf klicke.
Vielleicht erwähnenswert, dass die Hintergrundfarbe von html die Farbe der Scrollleiste in Safari für Mac beeinflusst. Dies kann verwirrend sein, wenn Sie eine absolut positionierte Seitenleiste mit weißem Hintergrund neben der Scrollleiste haben, während der html-Hintergrund schwarz ist. Rendert die Scrollleiste fast unsichtbar (weiß auf weiß). http://codepen.io/anon/pen/ZGzgPg
Wow, hatte keine Ahnung, dass Macs die Scrollleistenfarbe dynamisch rendern…
Danke für diesen Beitrag, sehr interessante Sachen. Habe nie von root gehört, also werde ich mich damit sicherlich etwas näher befassen.
Ich bin verwirrt. Sie sagten: „Es gibt eine seltsame Sache in CSS, bei der die background-color auf
<body>den gesamten Viewport ausfüllt … Wenn das Auffüllen das Ziel ist, kann es sinnvoll sein, es von vornherein auf das html-Element zu setzen.“???
Wenn Sie ein BODY-Element haben, das nicht den gesamten Platz des HTML-Elements einnimmt, und Sie eine Hintergrundfarbe für BODY festlegen und keine Hintergrundfarbe für das HTML-Element, dann füllt diese Hintergrundfarbe die gesamte Seite aus (die vermutlich dieselben Dimensionen wie das HTML-Element hat), was bedeutet, dass diese Eigenart dazu führt, dass die auf das BODY-Element gesetzte Hintergrundfarbe so funktioniert, als wäre sie auf das HTML-Element gesetzt worden. Wenn also Ihr BODY-Element nicht den gesamten Platz einnimmt, den Ihr HTML-Element einnimmt, und Sie möchten, dass eine Hintergrundfarbe alles abdeckt, was das HTML-Element abdeckt, dann macht es etwas mehr Sinn, die Hintergrundfarbe auf das HTML-Element zu setzen, anstatt sich auf die Eigenart zu verlassen, die Arbeit zu erledigen.
Die Spezifikationen besagen ausdrücklich, dass ein Hintergrund auf dem body-Element auf das html-Element propagiert werden sollte (wenn kein Hintergrund auf html gesetzt wurde) und daher keine Angabe der background-color von html erforderlich ist, und es wird sogar für Autoren von html-Seiten empfohlen, den Canvas-Hintergrund für body anstelle von html anzugeben.
http://www.w3.org/TR/css3-background/#body-background
Es ist keine „Eigenart“ an sich, sondern ein wichtiger Teil der Spezifikationen.
Ich glaube, in den „meisten Fällen“ sind die einzigen Eigenschaften, die Sie auf html setzen möchten, font-size, Reset-Margin/Padding, box-sizing und gelegentlich Höhe (für 100 %-Layouts). Ansonsten lassen Sie es einfach für beste Ergebnisse in Ruhe.
Auch die Verwendung von body als Wrapper war historisch schlecht und verursachte allerlei Probleme in IE7 und darunter, und obwohl diese Browser heutzutage kein Problem mehr darstellen, gibt es immer noch Probleme mit Zoom in neueren IE-Versionen, sodass ich auch hier denke, dass Sie durch die Einsparung eines Wrapper-Elements all diese Probleme auf einmal vermeiden können.
Das einzige Problem bei der Verwendung von body als Wrapper anstelle von z. B. einem div ist, dass Sie manchmal Dinge in body verschachteln möchten, die außerhalb der Hauptbeschränkungen des Dokuments liegen. Zum Beispiel Inhalte in den Rändern. Wenn Sie den body auf z. B. 75 % des Viewports verkleinern, können Sie immer noch Inhalte zu den Rändern hinzufügen, aber das führt zu sehr unschönem Code.
Ob Sie es glauben oder nicht, Leute wussten, was sie taten, als sie die Heiligkeit des body pushten. Die Verwendung anderer Elemente, um die Hauptgrenzen des Inhalts zu bilden (ich schlage drei oder vier vor – header, footer und article… dann vielleicht nav als vierte oder als Teil von header &&/|| footer &&/|| article.
Viel zu diskutieren hier.
html { height:100% }
body { min-height:100% }
Korrigieren Sie mich, wenn ich falsch liege, aber ich sehe einen Widerspruch im Text
„Es gibt eine seltsame Sache in CSS, bei der die background-color auf
<body>den gesamten Viewport ausfüllt (…) Wenn die background-color auf das html-Element gesetzt wird, dann nicht.“Bis hierhin, alles gut, aber dann sagen Sie
Wenn das Auffüllen das Ziel ist, kann es sinnvoll sein, es von vornherein auf das html-Element zu setzen.”
Dieses gleiche Anliegen wurde anderswo in diesem Thread beantwortet.
Ich benutze
<body>für alle globalen Stile aus einem bestimmten Grund: Ich verwende<html>als heiliges Element, auf das ich niemals benutzerdefinierte Stile anwende, damit ich JavaScript-Berechnungen darauf basieren kann, wissend, dass ich seine Attribute nicht irgendwo im CSS-Mix durcheinanderbringe. Das hat mir schon mehr als einmal geholfen, ist aber vielleicht nicht für jeden notwendig.