CSS-Viewer für jedes Element: CSS-Werte ansehen & kopieren
Ein CSS-Viewer, mit dem du das CSS jedes Elements auf einer Website ansehen kannst. Lies Schrift, Farben, Abstände und Box-Modell ab und kopiere CSS-Werte in deine Zwischenablage.
Aktualisiert am
Ag
- Ink
- Amber
- Paper
Du öffnest in den DevTools das Elements-Panel, um das CSS eines einzelnen Elements zu finden, und stehst vor einer Wand aus Regeln. Ein CSS-Viewer macht es umgekehrt. Du zeigst auf das Element, und SuperchargeInspect zeigt dir die Styles, die dich interessieren: die Schrift, die Farben und die Abstände. Du liest sie ab und klickst dann auf einen beliebigen Wert, um ihn zu kopieren. SuperchargeInspect ist eine CSS-Viewer-Erweiterung, die direkt auf der Seite funktioniert, auf der du gerade bist, ohne die DevTools zu öffnen.
Was der CSS-Viewer anzeigt
Das Panel gliedert alles in drei Bereiche: Typografie, Farben und Box.
Typografie. Die Schriftfamilie ist der deklarierte font-family-Stack. Das Panel zeigt die erste Schriftfamilie der Liste an und kopiert den vollständigen Stack, wenn du ihn übernimmst. Das ist die Schrift, die die Seite anfordert. Es wird nicht geprüft, welche Schrift tatsächlich gerendert wird. Außerdem erhältst du die Schriftgröße, die Schriftstärke und die Zeilenhöhe.
Farben. Du erhältst die Textfarbe, die Hintergrundfarbe und, falls vorhanden, die Rahmenfarbe. Deckende Farben werden als Hex-Wert angezeigt. Eine teilweise transparente Farbe wird als unveränderter rgba()-Wert angezeigt, eine vollständig transparente als transparent.
Box. Padding und Margin werden für alle vier Seiten angezeigt. Das Panel listet gap, border-radius und display auf. Ein Box-Modell-Diagramm zeigt die Margin-, Rahmen- und Padding-Ebenen rund um den Inhalt, mit Breite und Höhe des Inhalts in CSS-Pixeln.
CSS-Werte kopieren
Du kopierst CSS-Werte einzeln. Jeder Wert im Panel ist ein Button. Klick darauf, und genau dieser eine Wert landet in deiner Zwischenablage, sodass du nur padding-top oder nur die Textfarbe einfügen kannst.
Wenn du alles auf einmal brauchst, nutze „Nur Text kopieren“ im Menü „Weitere Kopieroptionen“. Darin ist die vollständige Liste der erfassten Styles für das Element enthalten: die Schriftfamilie, die Schriftgröße, die Farben, das Layout, gap, Padding und Margin für jede Seite sowie der Radius.
Das sind die berechneten Werte, die die Seite für dieses Element ermittelt hat. Die Schriftfamilie bleibt der deklarierte Stack. Die Kopie stellt weder die Quellregeln des Autors noch die Komponentendefinitionen oder das ursprüngliche Stylesheet wieder her. Sie ist eine Momentaufnahme dessen, was du siehst, nicht der Code, den die Website geschrieben hat.
DevTools oder CSS-Viewer?
Chrome DevTools ist das richtige Werkzeug, wenn du die Regeln ändern musst. Dort bearbeitest du ein Stylesheet, verfolgst die Kaskade und findest heraus, warum sich ein Wert gegen einen anderen durchsetzt.
Ein CSS-Viewer beantwortet eine kleinere Frage. Er ist zum Ablesen und Kopieren da, nicht zum Umschreiben der Regeln einer Website. Du kannst CSS ohne DevTools untersuchen. Zeig auf das gewünschte Element und übernimm die Werte, die du brauchen kannst. Die Tabelle stellt beides gegenüber.
| Elements-Panel der Chrome DevTools | SuperchargeInspect | |
|---|---|---|
| Wo die Styles angezeigt werden | Jede Regel in Kaskadenreihenfolge | Die berechneten Styles des Elements |
| Einen Wert kopieren | In der Liste der berechneten Styles suchen, dann von Hand kopieren | Auf den Wert klicken, um ihn zu kopieren |
| Schriftfamilie | In der Liste der berechneten Styles | Der deklarierte font-family-Stack |
| So startest du | DevTools öffnen, dann den Knoten im Baum suchen | Alt+Shift+E, dann auf das Element zeigen |
Nutze die DevTools, um die eigenen Regeln der Website zu bearbeiten und zu debuggen. Nutze einen CSS-Viewer, um ein einzelnes Element abzulesen und seine Styles an ein anderes Werkzeug weiterzugeben.
Navigation per Tastatur
Du kannst den gesamten Ablauf steuern, ohne die Maus anzufassen. Drück Alt+Shift+E, um zu starten. Mit den Pfeiltasten wechselst du zum vorherigen oder nächsten Element. Drück Ctrl+Up oder Ctrl+Down, um zum übergeordneten oder zu einem untergeordneten Element zu springen. Unter macOS verwendest du Option+Up und Option+Down.
Drück Enter, um das aktuelle Element zu fixieren. Drück erneut Enter, um eine Notiz zu schreiben, und dann Ctrl+Enter (Cmd+Enter unter macOS) für „Referenz kopieren“. Drück Esc, um zur Auswahl zurückzukehren oder das Panel zu schließen. Mit ? öffnest du jederzeit eine Übersicht aller Tastenkürzel.
Alles bleibt auf deinem Gerät
SuperchargeInspect läuft lokal. Es stellt keine Netzwerkverbindungen her und sendet nichts irgendwohin. Es gibt kein Konto, und im Hintergrund werden keine Daten gesammelt.
Die Styles, die du untersuchst, verlassen nie dein Gerät. Das Einzige, was dein Gerät verlassen kann, ist eine Datei, die du bewusst speicherst, oder ein Wert, den du in eine andere App einfügst. Wenn du den Browser schließt, wird das zuletzt gemerkte Element gelöscht.
Bereit für die Übergabe an ein Coding-Tool? Zeig einem KI-Coding-Tool genau, welches Element geändert werden soll.
Häufig gestellte Fragen
Was ist ein CSS-Viewer und was unterscheidet ihn von den DevTools?
Kann ich damit das CSS jedes Elements einer Website kopieren?
Erkennt es, welche Schriftart eine Seite verwendet?
In welchen Farbformaten werden Farben kopiert?
Werden Seitendaten irgendwohin gesendet?
Ähnliche Funktionen
Zeig deinem KI-Coding-Tool genau das Element, das geändert werden soll
Zeig auf das Element, schreib eine Notiz dazu und kopiere eine Referenz mit annotiertem Screenshot und beobachteten Styles – dann füge sie in das KI-Coding-Tool ein, das du bereits nutzt.
CSS-Abstände prüfen: Box-Modell auslesen und kopieren
Ein Tool für CSS-Abstände, das das Box-Modell eines Elements anzeigt – Padding und Margin an jeder Kante, Gap, Border-Radius und Display – und jeden Wert per Klick kopiert.
Website-Farben untersuchen: den Hex-Code jedes Elements finden
Prüfe die Farben jeder Website direkt auf der Live-Seite. Zeig auf das Element, und im Bereich „Farben“ siehst du Text-, Hintergrund- und Rahmenfarben. Ein Klick kopiert den Hex-Code.