HTML-/CSS-Block in mehreren Größen testen
Fügen Sie ein HTML-Snippet mit dem zugehörigen CSS ein, um sofort zu prüfen, wie es auf Smartphone, Tablet und Desktop dargestellt wird – in einem isolierten Rahmen (Sandbox-iframe), der weder Skripte ausführen noch auf Ihre Seite zugreifen kann.
So funktioniert es
Das von Ihnen eingegebene HTML und CSS wird zu einem eigenständigen Mini-Dokument zusammengesetzt und über das Attribut srcdoc in ein <iframe>-Element eingefügt. Dieses iframe läuft im „Sandbox“-Modus, ist also vom Rest der Seite isoliert: Es kann keine Skripte ausführen (kein <script> ist erlaubt) und nicht auf den Rest der Website zugreifen, was vor jeglichem Risiko einer schädlichen Einschleusung durch den eingefügten Inhalt schützt. Wählen Sie ein vordefiniertes Format (Smartphone, Tablet, Desktop) oder geben Sie eine eigene Breite und Höhe ein, um das responsive Verhalten Ihres Blocks zu beobachten.
Wird JavaScript in der Vorschau ausgeführt?
Nein, und zwar absichtlich: Das iframe läuft in einer Sandbox ohne die Berechtigung allow-scripts, daher wird jedes <script> im eingefügten HTML ignoriert. Nur die HTML-Darstellung und die Anwendung des CSS werden in der Vorschau gezeigt.
Kann ich CSS-Media-Queries testen?
Ja: Die @media-Regeln in Ihrem CSS greifen ganz normal in Abhängigkeit von der für die Vorschau festgelegten Breite (Voreinstellung oder eigener Wert) – genau wie in einem echten Browser, dessen Fenstergröße geändert wird.
Ihr HTML und Ihr CSS werden niemals an einen Server gesendet: Die Darstellung wird vollständig lokal in Ihrem Browser erzeugt.