CSS Element untersuchen und Element-Informationen

CSS Element untersuchen

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.

18-12-15 SITEMAP

Wenn das CSS nicht funktioniert

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.

Unbenutztes CSS finden und löschen

Auch dafür kann die Browser-Konsole herhalten. Die Entwickler-Tools in Chrome öffnen und mit Shift Command P nach Coverage suchen. Im unteren Abschnitt der Chrome-Console den Reload-Button klicken und eine CSS-Datei für den Check aussuchen.

Unbenutztes CSS in Chrome-Konsole
Mit Rot gekennzeichnet: CSS-Regeln, die auf dieser Seite bei diesem Browserfenster nicht genutzt wird.

Die Suche nach ungenutzten CSS-Regeln / Deklarationen ist auch mit der Hilfestellung ein aufwändiges Unterfangen. Um sicher zu gehen, dass .pagination-single wirklich nirgendwo gebraucht wird, reicht es nicht, sich eine einzelne Seite anzusehen.

Vielmehr müssten wir einen großen Teil der Seiten kontrollieren, wenn nicht sogar alle. Und selbst diese Prüfung reicht nicht, denn die Seiten müssten mit verschieden großen Browserfenstern untersucht werden. Vielleicht auch noch in verschiedenen Zuständen: Angemeldet, nicht angemeldet, Flasche Wein im Warenkorb oder Apfelsinen auf der Einkaufsliste.

Natürlich gibt es Tools, die automatisch alle Seiten nach ungenutztem CSS abgrasen.

  • UnusedCSS – in der kostenlosen Version zeigt UnusedCSS aber nur einen Teil der Änderungen. Für mehr fallen monatliche Kosten an.
  • PurgeCSS – braucht ein paar Stunden zum Einlesen, gute Dokumentation, aber natürlich auf Englisch.
  • UnCSS – erfordert ebenfalls Geduld und Sorgfalt bei der Konfiguration, aber untersucht auch CSS, das von Javascript erzeugt wird.

Kein Tool ist perfekt und ohne sorgfältige Nachkontrollen entstehen immer wieder Ausrutscher. Solange es nicht um die ungenutzten Reserven von CSS-Frameworks wie Bootstrap / Foundation geht, wo fast immer kaum 50% des CSS genutzt wird, ist die Komprimierung auf dem Server der wichtigste Schritt zu einem CSS-Leicht(er)gewicht.

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