Warum meldet der Linter Fehler bei Flexbox oder Grid?

Die meisten E-Mail-Clients, insbesondere Outlook (das Microsoft Word zum Rendern nutzt), unterstützen kein Flexbox oder Grid. Verwenden Sie stattdessen Tabellen-Layouts.

Was bewirkt die Option 'Strenge'?

Sie filtert die Meldungen: 'Streng' zeigt alle Hinweise inklusive Barrierefreiheit, während 'Nachsichtig' nur kritische Fehler ausgibt.

Warum sollte CSS in E-Mails inline sein?

Viele E-Mail-Clients, wie Gmail auf Mobilgeräten, entfernen -Blöcke im Header. Inline-Styles garantieren eine konsistente Darstellung.

Kann dieser Linter meine E-Mail in echten Clients rendern?

Nein, dies ist ein statischer Regel-Prüfer. Für visuelle Tests sollten Sie Dienste wie Litmus oder Email on Acid nutzen.

Was bedeutet die Warnung bezüglich 'role=presentation' bei Tabellen?

Dieses Attribut teilt Screenreadern mit, dass die Tabelle nur für das Layout und nicht für tabellarische Daten verwendet wird, was die Barrierefreiheit verbessert.

Elysia Tools

Mobile Navigation

Development

E-Mail-HTML-Linter

Prüft Cross-Client-Kompatibilität von E-Mail-HTML-Vorlagen: nicht unterstützte Flex/Grid, nicht-inline CSS, Outlook-Word-Rendering-Fallen, Tabellen-Layout-Probleme und Barrierefreiheits-Mängel. Deckt die bekannten Einschränkungen von Gmail/Outlook/Apple Mail.

Einzelheiten

Wobei dieses Tool hilft

Fängt die HTML-E-Mail-Bugs, die nur in Outlook, Gmail und Apple Mail auftauchen — vor dem Senden.

Warum E-Mail-HTML anders ist. E-Mail ist weitgehend HTML aus den 90ern, gerendert von inkonsistenten Engines: Outlook nutzt Microsoft Word, Gmail entfernt die meisten <style>, Apple Mail ist am nachsichtigsten. Flexbox, Grid und position:fixed brechen in den meisten Clients.

Was geprüft wird. Nicht unterstütztes CSS, nicht-inline CSS, Outlook-Fallen (VML), Tabellen-Layout (role/cellpadding), Bilder (alt/width), Barrierefreiheit (lang, Kontrast, Formulare/Script).

Stufen. 🔴 Error, 🟡 Warning, 🔵 Info. Strict zeigt Info; Lenient nur Fehler und wichtigste Warnungen.

Grenzen. Dies ist ein statischer Regel-Prüfer — kann die E-Mail nicht in echten Clients ausführen.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Modernes CSS in E-Mail (flex + grid)

Vorlage mit Flexbox und Grid — beides in Outlook nicht unterstützt. Der Linter markiert sie als Fehler mit Tabellen-Alternativen.

<div class="em-root">2 errors: display:flex and display:grid unsupported in Outlook. Fix: use tables or inline-block.

Kugelsicheres Tabellen-Email (sauber)

Ein korrekt gebautes Tabellen-Email: role=presentation, cellpadding=0, Bilder mit alt und width, Inline-Styles. Der Linter findet keine Probleme.

<div class="em-root em-clean">✓ No issues found.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

2 Optionen

InhaltHaupteingaben einfügen oder eingeben.1

E-Mail-HTMLtextareaPflicht

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.1

StrengeselectOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

E-Mail-HTML-Linter

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Behebung von Flexbox-Layoutfehlern für Outlook

2. Validierung einer barrierefreien E-Mail-Tabelle

FAQ

HTML mit Bildern Proben

HTML-Beispiele

PDF-Beispiele

WebRTC Echtzeitkommunikation Beispiele

Barrierefreiheitspruefer

Data-URI-Generator

Barrierefreiheits-Auditbericht-Generator

PDF-Bild- und Caption-Extraktor

Tools fur Bildformat-Konvertierung und animierten Export

Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung

HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools

Bildmetadaten-, EXIF- und Datenschutz-Bereinigungs-Tools