Der heutige Webbrowser ist weit weg von den verrückten Tagen, in denen jede Art von Browserübergreifender Konsistenz Wunschdenken war. Die heutigen Webbrowser sind alle sehr normkonform. Sie spielen gut zusammen und bieten eine ziemlich einheitliche Seitendarstellung in den verschiedenen Browsern. Dazu gehören die neuesten Versionen von Google Chrome, Microsoft Edge, Mozilla Firefox, Opera und Safari sowie die verschiedenen Browser, die sich auf den unzähligen mobilen Geräten finden, die heute für den Zugriff auf die Website verwendet werden.
Während bei Webbrowsern und bei der Darstellung von CSS sicherlich Fortschritte erzielt wurden, bestehen zwischen diesen verschiedenen Softwareoptionen immer noch Inkonsistenzen. Eine der häufigsten Inkonsistenzen besteht darin, wie diese Browser standardmäßig Ränder, Füllungen und Ränder berechnen.
Aufgrund dieser Aspekte des Box-Modells wirken sich alle HTML-Elemente auf alle HTML-Elemente aus. Da sie für das Erstellen von Seitenlayouts unerlässlich sind, bedeutet eine inkonsistente Anzeige, dass eine Seite in einem Browser großartig aussieht, in einem anderen jedoch etwas anders. Um dieses Problem zu bekämpfen, normalisieren viele Webdesigner diese Aspekte des Boxmodells. Diese Vorgehensweise wird auch als "Nullstellen" der Werte für Ränder, Auffüllung und Ränder bezeichnet.
Ein Hinweis zu den Browserstandards
Alle Webbrowser verfügen über Standardeinstellungen für bestimmte Darstellungsaspekte einer Seite. Beispielsweise sind Hyperlinks standardmäßig blau und unterstrichen. Dies ist bei verschiedenen Browsern konsistent. Auch wenn die meisten Designer diese an die Designanforderungen ihres spezifischen Projekts anpassen, erleichtert die Tatsache, dass sie alle mit denselben Standardeinstellungen beginnen, diese Änderungen. Leider haben die Standardwerte für Ränder, Füllungen und Rahmen nicht denselben Grad an Browserübergreifender Konsistenz.
Werte für Ränder und Auffüllung normalisieren
Um das Problem eines inkonsistenten Boxmodells zu lösen, setzen Sie am besten alle Ränder und Füllwerte von HTML-Elementen auf Null. Es gibt einige Möglichkeiten, dies zu tun, indem Sie diese CSS-Regel zu Ihrem Stylesheet hinzufügen:
Diese CSS-Regel verwendet das * oder Platzhalterzeichen. Dieses Zeichen bedeutet "alle Elemente" und würde im Grunde jedes HTML-Element auswählen und die Ränder und den Abstand auf 0 setzen. Obwohl diese Regel sehr unspezifisch ist, da sie sich in Ihrem externen Stylesheet befindet, weist sie eine höhere Spezifität als der Standardbrowser auf Werte tun. Da diese Standardeinstellungen das sind, was Sie überschreiben, wird dieser eine Stil das erreichen, was Sie vorhaben.
Eine weitere Option besteht darin, diese Werte auf die HTML- und body-Elemente anzuwenden. Da alle anderen Elemente auf Ihrer Seite Kinder dieser beiden Elemente sind, sollte die CSS-Kaskade diese Werte auf alle anderen Elemente anwenden.
Dadurch wird Ihr Design in allen Browsern an derselben Stelle gestartet. Beachten Sie jedoch Folgendes: Sobald Sie alle Ränder und Füllungen deaktiviert haben, müssen Sie sie für bestimmte Bereiche Ihrer Webseite selektiv wieder aktivieren, um das Aussehen zu erzielen und das Gefühl, dass Ihr Design verlangt.
Grenzen
Sie denken vielleicht "aber standardmäßig haben keine Browser einen Rahmen um das body-Element". Dies ist nicht unbedingt richtig. Ältere Versionen von Internet Explorer haben einen transparenten oder unsichtbaren Rahmen um Elemente. Wenn Sie den Rahmen nicht auf 0 setzen, kann dieser Rand Ihre Seitenlayouts durcheinander bringen. Wenn Sie sich entschieden haben, diese veralteten Versionen von IE weiterhin zu unterstützen, müssen Sie dies ansprechen, indem Sie Ihrem Body und Ihren HTML-Stilen Folgendes hinzufügen:
HTML, body {Marge: 0px;Polsterung: 0px; Grenze: 0px;} Ähnlich wie beim Deaktivieren der Ränder und der Polsterung werden mit diesem neuen Stil auch die Standardränder deaktiviert. Sie können dasselbe auch tun, indem Sie die Wildcard-Auswahl verwenden, die weiter oben im Artikel gezeigt wurde. Originalartikel von Jennifer Krynin. Bearbeitet von Jeremy Girard am 27.09.16.
