HTML Viewer

HTML-Datei im Browser ansehen

Drei Schritte, keiner davon lädt etwas hoch. Renderer und Anmerkungen sind ein einziges Skript auf dieser Seite, das Ganze funktioniert also auch ohne Netz.

1. Quelltext öffnen. Zieh die .html-Datei auf das Feld, nimm den Dateidialog oder füg den Quelltext direkt ein. Dateien werden mit der FileReader-API des Browsers gelesen, es wird also nichts übertragen.
2. Ansehen — und dann schmal ansehen. Die Darstellung erscheint in einem Sandbox-Frame. Stell ihn auf 360 px für ein Handy und auf 768 px für ein Tablet: derselbe Quelltext, bei genau den Breiten, an denen Layouts üblicherweise auseinanderfallen.
3. Die Anmerkungen darunter lesen. Jede Anmerkung trägt ihre Zeile: Verweise, an die der Frame nicht herankommt, ein über http geladenes Bild, das eine sichere Seite verwirft, ein fehlender viewport, der die schmale Vorschau schöner aussehen lässt als die Wirklichkeit.

Wie dieser Viewer deine Datei darstellt

Der Quelltext geht per srcdoc direkt in ein iframe, mit sandbox="allow-scripts" und bewusst ohne allow-same-origin. Praktisch bedeutet das dreierlei. Deine Skripte laufen, eine Seite, die sich beim Laden selbst aufbaut, baut sich also wirklich auf. Der Frame sitzt in einem eigenen, undurchsichtigen Origin und kommt damit weder an diese Seite noch an ihren Speicher oder ihre Cookies. Und CSS, Schriften und Bilder von öffentlichen Hosts laden ganz normal, eine auf einem CDN gebaute Seite sieht hier also so aus, wie ein Besucher sie sähe.

Zwei Kategorien lösen bewusst nicht auf, und die Anmerkungen sagen das, statt dich raten zu lassen. Verweise auf Dateien neben dem Original — stil.css, bilder/kopf.png — haben innerhalb des Frames keinen Ordner, gegen den sie auflösen könnten. Verweise in dein eigenes Dateisystem laden in keinem Browser-Tab, diese Einschränkung ist die des Browsers, nicht unsere. Wenn das Layout ungestylt aussieht, lies erst die Anmerkungen, bevor du das CSS durchsuchst.

Warum „wird nicht hochgeladen" hier mehr ist als ein Werbesatz

Bei den meisten Online-Viewern ist der Upload die Voraussetzung: Du wählst eine Datei, sie geht an einen Server, der Server schickt ein Bild zurück. Für den privaten Entwurf ist das gleichgültig. Für alles, was in einer deutschen Firma oder Behörde entsteht, ist es die Frage, an der die Benutzung des Tools scheitert — und zwar bevor jemand auf die Qualität der Darstellung schaut.

• Auftragsverarbeitung. Sobald in dem Entwurf personenbezogene Daten stecken — ein Kundenname, eine E-Mail-Adresse in einer Mailvorlage, eine Teilnehmerliste — ist das Hochladen zu einem fremden Dienst eine Verarbeitung im Auftrag. Dafür bräuchte es einen Vertrag nach Art. 28 DSGVO, den für ein Gratis-Werkzeug niemand abschließt.
• Drittlandtransfer. Steht der Server in den USA, kommt Kapitel V der DSGVO dazu. Das ist lösbar, aber nicht nebenbei und nicht durch Anklicken eines Häkchens.
• Geheimhaltung ohne Datenschutzbezug. Preislisten, Angebote, ein noch nicht angekündigtes Landing-Page-Layout: Da geht es gar nicht um die DSGVO, sondern um die Verschwiegenheitsvereinbarung mit deinem Kunden. Eine Datei, die den Rechner nicht verlässt, kann diese Vereinbarung nicht verletzen.

Auf dieser Seite gibt es deshalb keinen Upload-Schritt, den man weglassen könnte — es gibt ihn schlicht nicht. Die Datei wird mit FileReader im Tab gelesen, in ein srcdoc-iframe gegeben und danach vergessen; es gibt kein Konto, keine Sitzung und keine Serveranfrage. Der ehrliche Zusatz dazu: Wenn dein Quelltext selbst Schriften, Skripte oder Bilder von fremden Hosts holt, dann lädt der Frame die — genau wie ein Besucher es täte. Diese Hosts stehen mit Zeilennummer in den Anmerkungen, du siehst also, wer dabei etwas mitbekommt.

Soll die Seite anschließend wirklich online, gehört die Datenschutzerklärung ohnehin dazu; was in Deutschland vor dem Veröffentlichen zu klären ist, steht auf HTML-Datei online stellen.

Die Seite in Handy-Breite ansehen

Die meisten Viewer geben dir eine Spalte in der Breite, die das Fenster gerade hat. Dieser gibt dem Frame drei: 360 px, ungefähr ein Handy im Hochformat; 768 px, ein kleines Tablet; und voll, so breit die Spalte eben ist. Der Frame ist ein echter Browsing-Kontext, Media Queries, Container Queries und der Umbruch von Flexbox reagieren also auf die Breite, die du wählst, und nicht auf deinen Monitor.

Ein Vorbehalt, den dir die Anmerkungen von selbst melden: Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> rendert ein Handy überhaupt nicht mit 360 CSS-Pixeln. Es setzt die Seite mit etwa 980 und skaliert das Ergebnis herunter, die Schrift wird winzig, und deine sorgfältigen Mobil-Styles greifen nie. Die schmale Vorschau ist nur ehrlich, wenn dieses Tag da ist — genau deshalb steht es unter dem Frame.

Der zweite Vorbehalt betrifft deutschen Text und fällt genau bei 360 px auf: Deutsche Beschriftungen sind länger als ihre englischen Vorlagen. Aus Save wird Speichern, aus Settings wird Einstellungen, aus Shipping address wird Lieferanschrift, und Komposita wie Zahlungsbedingungen haben keine Stelle zum Umbrechen. Ein Button, der in der englischen Fassung passte, sprengt in der deutschen die Zeile oder erzeugt einen waagerechten Scrollbalken. In voller Breite sieht man davon nichts; bei 360 px sieht man es sofort.

Die Anmerkungen unter dem Frame — und warum ein Viewer sonst keine hat

Die Darstellung beantwortet „sieht es richtig aus". Sie kann nicht beantworten „sieht es woanders auch noch richtig aus", und dort wohnen die meisten Überraschungen. Jede Anmerkung hängt deshalb an einer Zeilennummer und an genau einer konkreten Folge:

• Ein Bild über http:// wird von jeder sicheren Seite verworfen. Wenn das Beispiel geladen ist, siehst du gerade eines: Das Logo fehlt oben, und die Anmerkung zeigt auf die Zeile.
• Ein Pfad in die eigene Festplatte erscheint auf deinem Rechner und sonst nirgends. In diesem Sandbox-Frame erscheint er auch hier nicht, was eine faire Vorschau auf die Erfahrung aller anderen ist.
• Ein fehlendes <!DOCTYPE html> versetzt den Browser in den Quirks-Modus, wo Box-Modell und geerbte Zeilenhöhen Regeln von vor 2001 folgen. Die Vorschau oben ist dann die Vorschau auf nichts, was du willst.
• Ein Modul statt eines Dokuments — Quelltext, der mit import oder export default anfängt — ist überhaupt nicht darstellbar. Besser, man sagt es dir, als dass du einen leeren Frame anstarrst.

$ npm i -g @clize/clize && clize login
$ clize claim deinname
$ clize deploy ./ordner --domain deinname.clize.app