CSS pane: ein Live-CSS-Editor auf jeder Seite, ohne DevTools
Der Standard-Workflow zum CSS-Experimentieren: DevTools öffnen, Elements anklicken, den Knoten finden, Inline-Style bearbeiten, neu laden — und alles ist weg. JustZix v2.13.40+ hat CSS pane — eine schwebende Textarea, auf der Seite injiziert, mit Live-<style>-Injektion. Du tippst CSS, du siehst die Änderung in 200 ms, der Inhalt bleibt im Tab über Reloads erhalten. Keine DevTools, kein F5.
Was es eigentlich ist
Ein CSS pane ist ein kleines ziehbares Fenster auf der Seite (fixed, z-index 2147483640) mit einem Header (farbiger Punkt + Name) und einer Textarea darin. Was du tippst, geht über einen 200-ms-Debounce in <style id="jz-pane-style-{id}"> im <head> — du siehst den Effekt sofort. Der Inhalt lebt im sessionStorage dieses Tabs — Seite neu laden, Inhalt bleibt; Tab schließen, weg (absichtlich: ein Pane ist ein Notizzettel, kein dauerhafter Speicher).
Dein erstes Pane in 30 Sekunden
- Öffne die JustZix-Optionen → wähle einen Ordner, eine Gruppe oder Regel mit URL-Matching.
- Klicke „CSS panes (0)" → Modal mit der Liste. Klicke „+ Neues CSS pane hinzufügen".
- Gib einen Namen ein („Test"), wähle eine Punktfarbe — automatisch gespeichert.
- Besuche eine Seite, die dem Scope entspricht. In der oberen rechten Ecke (Standard-Anker) erscheint das Pane.
- Tippe
body { background: red; }— der Seitenhintergrund wird nach 200 ms rot.
Live-Vorschau — Debounce und Leeren
Der 200-ms-Debounce existiert, damit schnelles Tippen die Reflows nicht spammt. In der Praxis nicht wahrnehmbar — nach 0,2 s ist die Änderung sichtbar. Um alle Styles zu löschen: leere die Textarea. Das Pane schreibt intern einen leeren String ins <style>, also ist auch das Leeren sofort wirksam.
Selektoren: schreib sie genauso, wie du es in einer echten Regel würdest. !important ist oft nötig, weil die Host-Seite ihre eigenen Styles hat. Du nutzt das Pane vor allem zum Testen — wenn dir das Ergebnis gefällt, kopierst du das CSS in eine echte Regel (CSS-Tab auf einer Regelkarte) für den dauerhaften Einsatz.
Persistenz pro Tab (sessionStorage)
Alles, was du tippst, landet in sessionStorage['jz_pane_{id}_content'] des aktuellen Tabs. Konsequenzen:
- F5 / Navigation im Tab — der Inhalt bleibt. Das Pane mountet neu, die Textarea liest aus dem Storage zurück.
- Neuer Tab auf demselben Scope — das Pane erscheint leer. Jeder Tab ist ein eigener Notizzettel.
- Tab schließen — der Inhalt ist weg. Es gibt kein „ich habe versehentlich eine halbe Stunde Arbeit verloren" — Schließen = bewusstes Verwerfen des Notizzettels.
Wenn du etwas gebaut hast, das du behalten willst — verschiebe es in eine reguläre CSS-Regel in den Optionen. Das Pane ist kein Ort, um Code langfristig aufzubewahren.
Multi-Pane — 3 Fenster auf einer Seite
Du kannst beliebig viele CSS panes im selben Scope haben. Jedes ist ein eigenes <style> im Head, jedes besitzt seinen Inhalt im sessionStorage. In der Praxis:
- Pane 1: „Header-Overrides" — Experimente mit der oberen Leiste.
- Pane 2: „Werbung ausblenden" — verschiedene Varianten von Ad-Blocking-Selektoren.
- Pane 3: „Formular-Fixes" — Input-Breiten, Label-Schriftgrößen.
Jedes in einer anderen Punktfarbe (grün, rot, blau). Visuell auf einen Blick klar, dass du 3 unabhängige Style-Sets hast.
Scope-Hierarchie (Ordner → Gruppe → Regel)
Ein Pane kann an einen Ordner, eine Gruppe oder Regel angehängt werden:
| Scope | Wann das Pane erscheint | Anwendungsfall |
|---|---|---|
| Ordner | URL passt auf folder.urlPatterns | Seitenweite CSS-Experimente über den ganzen Shop |
| Gruppe | Ordner-Match + Gruppen-URL-Filter | Experimente pro Bereich (z. B. Checkout) |
| Regel | Ordner + Gruppe + Regel-URL-Filter | Experimente auf einer bestimmten Seite |
Vererbung: in einer Gruppenansicht siehst du eigene Panes + vom Ordner geerbte. In einer Regelansicht — eigene + Gruppe + Ordner. Genau wie bei CSS/JS-Regeln — volle Hierarchie.
Mit einem Kollegen teilen
Panes laufen durch denselben Sync-Mechanismus wie Regeln. Erzeuge einen Freigabe-Link → der Empfänger bekommt auch deine Panes. Anwendungsfall:
- Ein Frontend-Berater steigt in den Shop eines Kunden ein, experimentiert in einem Pane „Header-Redesign".
- Klickt „Teilen" — Link 24 h gültig.
- Der Kunde öffnet den Link in seinem Chrome → importiert → das Pane „Header-Redesign" erscheint bei ihm.
- Der Kunde sieht das Ergebnis in seinem Tab. Genehmigt? Der Berater kopiert den Pane-Inhalt in eine dauerhafte CSS-Regel.
Fallstricke
- sessionStorage kann blockiert sein (sandboxed iframe, privater Modus usw.) — der Inhalt bleibt dann nicht erhalten, aber die Live-Injektion funktioniert weiterhin.
- Das CSS pane ist kein CodeMirror — eine einfache Textarea, kein Syntax-Highlighting im MVP. Ein CodeMirror-Upgrade ist geplant, aber für den Notizzettel-Einsatz reicht es.
- Das Pane kann wichtige Seitenelemente verdecken — zieh es am Header in eine andere Ecke. Die Position bleibt pro Browserfenster erhalten (chrome.storage), sodass andere Tabs sich erinnern.
- 3+ Panes auf einem kleinen Viewport können sich überlappen. Snap-Verbindungen (ein Pane auf ein anderes ziehen) erzeugen eine „Gruppe" — verschieb eins, die Gruppe folgt.
Was kommt als Nächstes
Das CSS pane ist der erste von 4 „Fenster auf der Seite"-Typen in JustZix. Die nächsten zwei sind JS pane (Run-on-demand-JavaScript) und JS Console (REPL mit ↑↓-Verlauf). Über sie haben wir in separaten Beiträgen geschrieben.
Installiere JustZix und hör auf, die DevTools offen zu lassen, nur um gelegentlich einen Selektor einzuwerfen.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.