13. Live-Vorschau #
Allgemeines:
– Der Hinweis zur Live-Vorschau sitzt als `(i)`-Button direkt neben `Live-Vorschau (Beta)`.
– Der Hinweis zum Picker sitzt als `(i)`-Button direkt neben `Selektor folgt Cursor`.
– Pseudo-Elemente wie `::before` und `::after` können nicht als eigener Knoten gerendert werden; es wird das Basis-Element gezeigt
– Skripte im IFrame werden entfernt, um jQuery- oder Plugin-Fehler zu vermeiden; dynamische Funktionen können dadurch fehlen
– `CSS-Inhalt` und Vorschau teilen sich eine eigene Vollbreiten-Zeile unter Formular und Explorer
– Auf breiten Ansichten steht der Editor links, die Vorschau rechts; auf schmalen Ansichten werden beide untereinander angeordnet
– Wenn die Vorschau ausgelagert ist, bleibt rechts ein schmaler Vorschau-Steuerbereich neben dem Editor stehen
– Auf breiten Ansichten nutzt der Editor dann ca. 2/3 der Breite, der Steuerbereich ca. 1/3
– Unter ca. 1280px bleibt das bestehende Stapelverhalten erhalten
– Explorer und Vorschau sind getrennte Bereiche; der Explorer bleibt oben rechts sticky und überdeckt die Vorschau nicht
– Editor- und Vorschau-Fenster können direkt in ihrer Box grösser oder kleiner gezogen werden
– CSS wird live injiziert, ohne speichern zu müssen
– Beim Andocken wird eine manuell veränderte Editor-Größe wieder auf den Standard zurückgesetzt
Funktionen:
– Modi: (3) **Seitenansicht** und (4) **Elementansicht**
– (7) **Element wählen**: Picker im Seiten-IFrame; Klick setzt den Selektor und schaltet auf Elementansicht
– (8) **Selektor folgt Cursor**: übernimmt den Selektor der aktuellen Regel im Editor
– (6) `Vorschau neu laden` lädt die URL neu
– (1) `Vorschau auslagern` öffnet die Live-Vorschau in einem separaten Fenster, z. B. für einen zweiten Bildschirm
– Solange die Vorschau ausgelagert ist, wechselt der Button auf `Vorschau andocken`
– `Andocken` holt die ausgelagerte Vorschau wieder in den Editor zurück
