CSS Element untersuchen und Element-Informationen

Element-Informationen: Einblick in die CSS-Stile, und herausfinden, welches CSS auf ein HTML-Element wirkt

Die Entwickler-Tools der Browser untersuchen nicht nur Javascript und das Document Object Model, sondern öffnen einen direkten Weg zum CSS jedes einzelnen Elements.

Ein Klick auf ein Element zeigt alle Stile, die hier wirken. Oder eben nicht wirken … und kann sie kurzfristig für Experimente und die Fehlersuche ändern.

Auch wenn CSS in einzelnen Regeln einfach ist, kommt es vor, dass Änderungen von CSS-Eigenschaften ohne die gewünschte Wirkung bleiben. Häufig liegt dann eine weitere CSS-Regel für dasselbe Element an anderer Stelle – z.B. im style-Tag im Head der HTML-Datei. Manchmal ist es auch nur ein kleiner Schreibfehler, der eine CSS-Eigenschaft außer Kraft setzt.

Ein Rechtsklick auf die Seite ist der schnellste Weg zu den Entwickler-Werkzeugen für CSS, wenn sich ein Element standhaft gegen eine neue CSS-Eigenschaft wehrt. Alle modernen Browser unterstützen das Untersuchen der Elemente und zeigen die Maße und die CSS-Eigenschaften in einem Abschnitt unter oder neben der Seite an.

Elemente untersuchen mit der Chrome-Console
Firefox-Console aufrufen
HTML / CSS Console mit Element untersuchen aufrufen
Edge Element-Informationen zeigt CSS und HTML

CSS – Elemente untersuchen

Was für Javascript-Entwickler die Browser-Console, ist Elemente oder Untersuchen oder Element-Informationen unter den Entwickler-Tools der Browser für die Entwicklung von komplexen Stylesheets.

Das Cursor-Symbol auf der linken Seite (Safari rechts mit ) wählt ein Element aus und zeigt die aktuellen Maße.

Unter Elements zeigen die Browser das HTML-Markup der Seite, unter Styles oder Stile – je nach Browser – sind die CSS-Eigenschaften für das markierte Element aufgelistet. Dazu zeigen die Browser den Namen der CSS-Datei und die Zeile. Das erspart langes Suchen in den CSS-Dateien.

Chrome Elemente und Stile anzeigen
Elemente und Stile in Chrome

Ihre eigenen Stile zeigen die Browser ebenfalls an – das ist das user-agent-stylesheet.

Safari Elemente und Stile anzeigen
Elemente und Stile in Safari anzeigen

CSS online ändern

In der CSS-Console lassen sich Stile online und direkt im Browser ändern. Diese Änderungen werden natürlich nicht gespeichert, aber schneller und einfacher ist keine andere Test-Methode.

Mit der Maus über die Stile im Stile-Bereich rechts hovern, um Stile mit der Checkbox zu deaktiveren oder mit einem Doppelklick in den Text zu ändern. Ein gelbes Warndreieck zeigt, ob das CSS korrekt oder falsch geschrieben ist. Wenn der Browser eine CSS-Eigenschaft nicht unterstützt, ist sie durchgestrichen.

Änderungen direkt speichern

In den Developer-Tools von Chrome lassen sich die Änderungen am HTML und auch am CSS auch dauerhaft direkt in den betroffenen Dateien ändern. So müssen die Ergebnisse von Tests nicht erst kopiert und in die Dateien übertragen werden:

Bei einem Rechtsklick mit der Maus in das linke Panel schlägt Chrome Add Folder to Workspace vor. Änderungen lassen sich dann in einen lokalen Arbeitsordner übertragen.

Dabei lassen sich nur Änderungen an CSS-Dateien speichern, nicht aber Änderungen am HTML.

{ } Zurück Vorwärts Neu laden Speichern unter … Drucken … Streamen … Übersetzen in Deutsch Seitenquelltext anzeigen Untersuchen Seite speichern unter… Seite bei Pocket speichern Hintergrundgrafik anzeigen Alles markieren Seitenquelltext anzeigen Seiteninformationen anzeigen Element untersuchen Zurück Seite neu laden In Dashboard öffnen Seitenquelltext einblenden Seite sichern unter … Seite drucken … Element-Informationen Alles auswählen Drucken Element untersuchen Quelltext <div> <progress id="progress" value="0" max="100"></progress> <span id="msg"></span> <div id="dlist"></div> <div id="flist"></div> </div> Elements Console Sources progress | 560x18.88 progress { -webkit-appearance: none; appearance: none; height: 1.2em; background-image: linear-gradient( -45deg, white 33%, cornflower background-size: 35px 1.2em, 100% 100%, 100% 100%; } Styles upload.style.css:155 progress { -webkit-appearance: progress-bar; box-sizing: border-box; display: inline-block; height: 1em; width: 10em; vertical-align: -0.2em; } user-agent-stylesheet Elemente Ressourcen Timelines Speicher Konsole 73 ! <div> <progress id="progress" value="0" max="100"></progress> <span id="msg"></span> <div id="dlist"></div> <div id="flist"></div> </div> -webkit-appearance: none;appearance: none; height: 12px; width: 100%; height: 1.2em; border: none; border-radius: 0.6em; background-image: linear-gradient(-45deg, white 33%, ; background-size: 35px 1.2em, 100% 100%, 100% 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; Knoten Stile Layer