Ich generiere eine HTML-E-Mail, die ein internes Stylesheet verwendet, d. H.
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>In Google Mail werden anscheinend alle Stile im internen Stylesheet ignoriert. Es scheint, dass Google Mail alle Stile außer Inline-Regeln ignoriert, z
<h2 style="color: red">Email content here</foo>Ist dies meine einzige Option zum Stylen von HTML-E-Mails, wenn sie mit Google Mail angezeigt werden?
html
css
gmail
html-email
Dónal
quelle
quelle
<html>Tag zu verwenden;)Antworten:
Die Antworten hier sind zum heutigen 30. September 2016 veraltet. Google Mail bietet derzeit Unterstützung für das
styleTag inheadsowie Medienabfragen an. Wenn Google Mail Ihr einziges Anliegen ist, können Sie sicher Klassen wie einen modernen Entwickler verwenden!Als Referenz können Sie die offiziellen Google Mail-CSS-Dokumente überprüfen .
Nebenbei bemerkt war Google Mail der einzige große Client, der nicht unterstützt wurde
style( Referenz , bis sie trotzdem aktualisiert werden). Das bedeutet, dass Sie fast sicher aufhören können, Stile inline zu setzen. Einige der dunkeleren Clients benötigen sie möglicherweise noch.quelle
bodyTags anstelle desheadTags platziert hatte.Verwenden Sie Inline-Stile für alles. Diese Site konvertiert Ihre Klassen in Inline-Stile: http://premailer.dialect.ca/
quelle
Google Mail hat die grundlegende Unterstützung für Stil-Tags im Kopfbereich gestartet. Es wurde noch nichts offizielles gefunden, aber Sie können es einfach selbst ausprobieren.
Es scheint Klassen- und ID-Selektoren zu ignorieren, aber grundlegende Element-Selektoren funktionieren.
Es wird ein Style-Tag in seinem eigenen Kopfbereich erstellt, der auf das Div beschränkt ist, das den Mail-Body enthält
quelle
Ich stimme allen zu, die Klassen UND Inline-Stile unterstützen. Möglicherweise haben Sie dies bereits gelernt, aber wenn Ihr Stylesheet einen einzelnen Fehler enthält, wird er von Google Mail ignoriert.
Sie denken vielleicht, dass Ihr CSS perfekt ist, weil Sie es so oft gemacht haben. Warum sollte ich Fehler in meinem CSS haben? Führen Sie es durch den CSS-Validator (z. B. http://www.css-validator.org/). ) und sehen Sie, was passiert. Ich habe dies getan, nachdem einige Probleme mit der Google Mail-Anzeige aufgetreten waren, und zu meiner Überraschung wurden mehrere Microsoft Outlook-spezifische Stildeklarationen als Fehler angezeigt.
Was für mich Sinn machte, also entfernte ich sie aus dem Stylesheet und fügte sie
only for Microsoftwie folgt in einen Codeblock ein:Dies ist nur ein einfaches Beispiel, aber wer weiß, es könnte sich irgendwann als nützlich erweisen.
quelle
Wie andere gesagt haben, lesen einige E-Mail-Programme die CSS-Stile nicht. Wenn Sie bereits eine Web-E-Mail geschrieben haben, können Sie mit dem folgenden Tool von zurb alle Ihre Stile einbinden:
http://zurb.com/ink/inliner.php
Dies ist äußerst praktisch, wenn Sie Vorlagen wie die oben genannten von Mailchimp, Kampagnenmonitor usw. verwenden, da diese, wie Sie festgestellt haben, in einigen E-Mail-Programmen nicht funktionieren. Dieses Tool belässt Ihren Stilabschnitt für die Mail-Programme, die ihn lesen, und fügt alle Stile inline ein, um eine universellere Lesbarkeit in dem gewünschten Format zu erzielen.
quelle
Beachten Sie, dass Dienste und Tools zum Senden von E-Mails möglicherweise Ihr CSS für Sie einbinden können, sodass CSS aktiviert wird
<style>Tags in Google Mail funktionieren kann.Wenn Sie beispielsweise E-Mails mit MailChimp senden, wird Ihr CSS von
<style>Tags standardmäßig automatisch eingefügt. Mit Mandrill können Sie diese Funktion aktivieren (obwohl sie aus Leistungsgründen standardmäßig deaktiviert ist ), indem Sie das Kontrollkästchen "Inline-CSS-Stile in HTML-E-Mails" im Abschnitt " Standardeinstellungen senden" der Registerkarte "Einstellungen" aktivieren:quelle
Ich hatte das gleiche Problem beim Entwerfen einer Vorlage in Mailjet. Die Lösung des Problems war minimierter CSS-Code in
<style>Tags.quelle