---
title: "13. Live-Vorschau"
description: "## 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…"
url: "https://layercraftstudio.de/docs/12-live-vorschau/"
updated: "2026-05-17"
category: LCS Custom CSS Dokumentation DE
---

# 13. Live-Vorschau

## 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