HTML sollte mehr als nur ein Begriff sein, und wissen was CSS ist und wie es in den Grundzügen funktioniert hilft ebenfalls dabei, aus dem schlau zu werden, was einem Browsertools verraten.
Egal ob Firefox, Chrome, Opera oder Edge – Browser können nicht nur dafür genutzt werden, Websites anzusehen, sondern auch, um Websites zu untersuchen. Ein Weg dahin führt über den Punkt »Element untersuchen« (Firefox, Opera, Edge), oder »Untersuchen« (Chrome) den man über das Kontextmenü mit der rechten Maustaste aktiviert (in Ausnahmefällen gesperrt, was allerdings niemanden der es will daran hindert, an den Quelltext zu gelangen, daher ist die Maßnahme sinnlos).
Es öffnet sich eine Sektion (meist unterhalb) mit einem DOM-Explorer, in dem man die HTML-Struktur der Seite auf der man sich grade befindet, betrachten und untersuchen kann. In der rechten Spalte sind die CSS-Stile zu sehen, die auf das aktuell ausgewählte Element zutreffen. Direkt auf ein Element (ID, Klasse, Tagname) angewendete Stile kommen, falls es sie gibt, zuerst, vererbte Stile umso weiter darunter, je weiter entfernt das vererbende Element ist. Das Ganze ist hierarchisch organisiert, d.h. .elementname {color:#ffffff;} würde von .elternelement .elementname {color:#000000;} überschrieben.
Durch Hinzufügen von Stildefinitionen im CSS-Bereich oder die Deaktivierung (das bei Hover sichtbare Häkchen vor der Definition entfernen, dabei achten auf Mehrfachdeklarationen der gleichen Art) können auf diesem Weg Fehler ermittelt oder geprüft werden, ob eine Modifikation einzelner Property-Werte zu Verbesserungen führt. Auch die Quelle des CSS wird angezeigt, wobei das nicht so hilfreich ist, wenn Funktionalität eingesetzt wird, die zur Optimierung mehrere Stylesheet-Dateien zu einer temporären Datei vereint.
Auf der anderen Seite können beispielsweise Klassenbezeichner aus HTML-Tags vorübergehend entfernt (oder hinzugefügt) werden, um zu ermitteln, welchen Einfluss die Klasse (oder ID) auf das Erscheinungsbild eines Elements hat. Aufschlussreich ist es manchmal auch, einzelne Elemente oder Sektionen zu löschen (z.B. um einzugrenzen, in welchem Bereich sich ein für eine Fehldarstellung zuständiges Element befindet).
Interessant sind solche Einblicke bei Darstellungsfehlern, aber auch, um kleine Änderungen (z.B. an der Farbe oder Schriftgröße) ohne viel Aufwand in Echtzeit zu testen.
HTML-Referenz bei w3schools
CSS-Referenz bei w3scholls
Google Chrome Developer Tools
Microsoft Edge DOM-Explorer
Website Firefox Tools für Webentwickler
Opera Dragonfly (Developer Tools)
Schreibe einen Kommentar