Das CSS einer E-Mail einbetten
Outlook und mehrere Webmailer ignorieren einen <style>-Block oder werfen ihn raus. Das Einbetten ist der langweilige, mechanische Schritt zwischen einem Entwurf, der im Browser funktioniert, und einem, der im Posteingang funktioniert.
- Läuft vollständig in deinem Browser
- Funktioniert offline
- Kein Upload
- Keine Anmeldung
- Kein Wasserzeichen
Werkzeug wird geladen…
So funktioniert es
- Füg das HTML samt seinem <style>-Block ein.
- Klick auf „Inline the CSS“ (CSS einbetten).
- Kopier das Ergebnis oder lade es herunter, und sieh es dir in der Vorschau unten an.
Warum nichts hochgeladen wird
Alles, was auf dieser Seite passiert, erledigt Code, der im Tab deines Browsers läuft — mit derselben Engine, die auch Webseiten darstellt. Die Datei wird von der Festplatte in den Speicher des Tabs gelesen, dort umgewandelt und als Download wieder herausgeschrieben. Sie wird nirgendwohin geschickt — weder zu uns noch zu Dritten.
Prüf es selbst nach
- Öffne die Entwicklerwerkzeuge deines Browsers (F12) und wähle den Tab „Netzwerk“.
- Lade deine Datei und starte das Werkzeug.
- Die einzigen Anfragen, die du siehst, holen den Code des Werkzeugs selbst — und bei ein paar schweren Werkzeugen dessen Open-Source-Engine von einem öffentlichen CDN — dazu ein kleines Seitenaufruf-Signal an loreatec.jp (Adresse und Titel der Seite, mehr nicht). Keine davon trägt deine Datei.
Häufige Fragen
Warum lassen sich Media Queries nicht einbetten?
Weil an einem Inline-Style keine Bedingung hängt — er gilt immer. Eine Media Query ist eine Bedingung, sie kann also nur in einem <style>-Block stehen. Deshalb braucht eine reaktionsfähige E-Mail beides: Inline-Styles für den Grundentwurf und einen <style>-Block für das Layout auf dem Handy — in dem Wissen, dass die Programme, die <style> rauswerfen, den Grundentwurf zeigen.
Was passiert mit :hover?
Dasselbe Problem, dieselbe Antwort: Es bleibt im <style>-Block. Behandle Hover-Effekte als Zugabe für die Programme, die sie unterstützen, nie als etwas, worauf die Nachricht angewiesen ist.
Was gewinnt: mein vorhandener Inline-Style oder das Stylesheet?
Deiner. Was schon in einem style-Attribut steht, bleibt erhalten und wird hinter die Regeln aus dem Stylesheet gesetzt, überschreibt sie also weiterhin — genau wie im Browser.
Macht mein Newsletter-Werkzeug nicht dasselbe?
Die meisten betten beim Versand ein, ja. Das hier ist für den Fall, dass du das HTML jemand anderem übergibst, über eine API verschickst oder herausfinden willst, warum eine Regel nicht überlebt hat.