CSS mit dem Seiteninspektor untersuchen

In diesem Tutorial lernen Sie, wie Sie mit dem Seiteninspektor des Browsers HTML-Elemente und ihre CSS-Eigenschaften untersuchen können. Dies hilft Ihnen, unerwarteten oder fehlerhaften Formatierungen auf den Grund zu gehen und diese zu beseitigen.

Seiteninspektor aktivieren

In jedem Browser können Sie durch F12 oder einen Rechtsklick mit der Maus ein Kontextmenü öffnen, das eine Ansicht des Quelltexts (des HTML-Dokuments), bzw. eine Untersuchung des betreffenden Elements erlaubt.

DOM inspizieren

Im Seiteninspektor wird das DOM einer Seite gezeigt. Hier werden nicht nur die HTML-Elemente, sondern auch Pseudoelemente und sogar das Shadow DOM (z.B. bei einem audio- oder input-Element) angezeigt.

Anwendungsbeispiele

falsch geschlossener br-Tag

Dieses Beispiel wurde als Frage im SelfHTML-Forum gestellt, da der Zeilenumbruch größer als gewohnt war.

Beispiel

 
  Dies ist ein Text 
 
  mit einem Zeilenumbruch.

br ist ein inhaltsleeres Element, das normalerweise nicht geschlossen werden muss. Ein Blick in den Seiteninspektor zeigt, dass der schließende br-Tag als zweites br-Element geparst wurde.

Blockelemente in p

Ein weiterer typischer Fehler ist das Einfügen von Blockelementen wie div innerhalb von Textabsätzen.

p {
  color: green;
}
div {
  color: red;
}

 
  Dies ist ein Text 
  
 mit einem div
  und noch etwas Text.

Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

Ein Blick in den Seiteninspektor zeigt, dass das p-Element vor dem neuen div geschlossen wird, da es keine Blockelemente als Kinder enthalten darf. Unterhalb des div wird plain text ohne Formatierung ausgegeben, da es kein Start-Tag gibt. Das schließende p-Tag wird als weiterer, jedoch leerer Absatz geparst.

Parsen fehlender Elemente

Dieser Beitrag aus dem SelfHTML-Forum beschreibt Probleme, die durch das Weglassen nicht notwendiger Elemente entstehen können.

Wenn Sie die head- und body-Tags weglassen, werden die Elemente implizit trotzdem erstellt. Im Traversieren im DOM-Baum bei DOM-Manipulationen kann es hier zu Problemen führen, wenn Elemente entgegen der Notation im Markup keine Kindelemente sind.

Mit dem Seiteninspektor arbeiten

Die Älteren unter uns werden sich noch erinnern. Zuerst wird die Webseite in einem Code-Editor bearbeitet, dann gespeichert; nun wird ein Browser geöffnet und das Zwischenergebnis betrachtet. Ausgehend von diesem Zwischenergebnis wird nun wieder der Code-Editor geöffnet - etwas geändert und der Kreislauf des Speichern, Testens und erneuten Änderns beginnt von vorn. Mit dem Seiteninspektor können Sie dies nun bequem und komfortabel im Browser erledigen.

HTML bearbeiten

Durch einen Rechtsklick auf das geparste Markup öffnet sich ein Kontextmenü, mit dem Sie das Markup ändern und neue HTML-Elemente sowie Inhalte hinzufügen können.

CSS bearbeiten

Das Layouten von Webseiten geht sogar noch einfacher. Durch einen Klick in das rechte, untere Feld können Sie

• CSS-Werte verändern
• neue CSS-Eigenschaften hinzufügen

und die Änderungen gleich sehen. Wenn das Layout passt, können Sie die ermittelten Eigenschaften und Werte in den Code-Editor kopieren und speichern.

Fazit

Durch browsereigene Tools wie den Seiteninspektor können Sie große Teile des Entwickelns und Debuggens direkt im Browser erledigen und benötigen keine externen Programme mehr. Dies ist eine große Vereinfachung und Zeitersparnis.