Welche Tools zum automatischen Inline-CSS-Stil zum Erstellen von E-Mail-HTML-Code? [geschlossen]


122

Wenn Sie sich http://www.campaignmonitor.com/css/ ansehen , erfahren Sie, dass Sie Inline-Stile in Ihren HTML-Code einbetten müssen, damit Ihre E-Mail in einem beliebigen E-Mail-Client gelesen werden kann.

Kennen Sie Tools oder Skripte zum automatischen Konvertieren einer HTML-Datei mit einer deklarierten Datei in eine HTML-Datei mit nur Inline-CCS-Stilattributen?

Bearbeiten : Irgendeine Javascript-Lösung (dh: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ )? Mit jQuery?


3
Ich habe gerade eine ähnliche Frage zu Software-Empfehlungen als Folge dieser gestellt: softwarerecs.stackexchange.com/questions/9983/…
Grzegorz Oledzki

Ich musste nur genau das für eine Abteilung bei der Arbeit lösen. Diese Frage lieferte die notwendigen Schritte zur Lösung des Problems.
Gopherkhan

Antworten:


80

Überprüfen Sie dazu den Online-Konverter premailer.dialect.ca oder dieses Python-Skript .


10
Es sieht so aus, als wäre Premailer zu einer neuen URL umgezogen
Matt Huggins

2
Mail Chimp bietet hier einen großartigen Inliner: beaker.mailchimp.com/inline-css
dhornbein

1
premailer.dialect.ca ist großartig, aber es erstickt auf vielen Seiten. Es ist mehr als die Hälfte in meinen Tests. Versuchen Sie zum Beispiel diese Seite.
Nick Woodhams

Führen Sie Ihren eigenen Premailer-Server aus ... github.com/TrackIF/premailer-server Einfach auf ec2 auszuführen: docs.aws.amazon.com/elasticbeanstalk/latest/dg/…
Adam Lane

Keiner von ihnen entfernt tatsächlich das STYLE-Tag, das das Hauptproblem ist, mit dem Sie sich befassen werden
Coldstar

33

Hier ist eine Liste von webbasierten, gebrauchsfertigen Inlining-Tools, von denen einige bereits erwähnt wurden. Wenn ich etwas verpasst habe, können Sie es jederzeit bearbeiten und hinzufügen. Ich kann nicht versprechen, dass jedes Werk wie angekündigt funktioniert. Lassen Sie also Kommentare fallen, aber schießen Sie nicht auf den Messenger ...

Und hier ist eine, die umgekehrt funktioniert (Aufheben der Inlining Ihres CSS)


3
MailerMailer war der einzige, der für mich funktioniert hat, während die Formatierung intakt blieb.
Jeshurun



8

Ich habe eine Node.js-Bibliothek namens Styliner geschrieben , die CSS in serverseitigem Javascript integriert.

Es unterstützt auch WENIGER Stylesheets (und Plugins für andere Formate).


7

Vielleicht möchten Sie einen Blick auf PostageApp werfen .

Eine seiner wirklich starken Eigenschaften ist, dass es ein sehr robustes Template-System hat, das HTML und CSS ohne Probleme automatisch einbinden kann.

( Vollständige Offenlegung: Ich bin der Produktmanager für PostageApp.)


Sie führen also CSS-Inlining am Ende der Verarbeitungskette durch (kurz bevor Sie die E-Mail an jemanden senden)?
Zazi

6

Dies mag etwas zu spät sein, aber wenn Sie Ihren HTML- Code für das E-Mail-Marketing optimal gestalten möchten (indem Sie Ihr CSS einbinden und eine Reihe anderer cooler Tools verwenden), verwenden Sie den Premailer . Es ist kostenlos und wird natürlich in Zusammenarbeit mit CampaignMonitor selbst erstellt.

Ich hoffe es hilft.


+1 für Premailer. Es verfügt sowohl über ein Webformular als auch über eine API, mit der Sie es in jede Plattform integrieren können. Wenn Sie node.js verwenden, da ein Wrapper hier .
Jed Watson

6

Ich bin etwas spät dran, aber hoffentlich hilft das jemandem.

Ich habe diese nette kleine jQuery / Javascript-Methode gefunden, die in eine Seite eingebettet werden kann - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery /.

Ich habe es ein wenig bearbeitet, um den IE zu unterstützen und um eine Seite mit mehreren angehängten CSS-Dateien zu unterstützen, die Stile in der richtigen Reihenfolge anwenden.

$(document).ready(function ($) {
            var rules;
            for(var i = document.styleSheets.length - 1; i >= 0; i--){
                if(document.styleSheets[i].cssRules)
                    rules = document.styleSheets[i].cssRules;
                else if(document.styleSheets[i].rules)
                    rules = document.styleSheets[i].rules;
                for (var idx = 0, len = rules.length; idx < len; idx++) {
                    if(rules[idx].selectorText.indexOf("hover") == -1) {
                        $(rules[idx].selectorText).each(function (i, elem) {
                            elem.style.cssText = rules[idx].style.cssText + elem.style.cssText;
                        });
                    }
                }
            }
            $('style').remove();
            $('script').remove();
            $('link').remove();
        });

Die Seite kann dann kopiert / in den E-Mail-Text eingefügt werden.


Warum entfernst du das Skript? Und diese entfernen die Ausführung, von der ich denke, dass sie außerhalb der for-Schleife liegen sollten.
Jcubic

@jcubic Sie haben Recht bezüglich: Die Platzierung der Entfernung zum Entfernen werde ich bearbeiten. Das Entfernen des Skripts erfolgte in meinem ursprünglichen Code. Ich wollte saubereres HTML mit nur dem, was wirklich zum Anzeigen der Seite erforderlich war.
John C

Vielen Dank für dieses prägnante Skript. Ich habe stundenlang gesucht und dies ist die sauberste Lösung, die ich gefunden habe.
Kerzek

1
War im selben Boot wie @kerzek. Dies funktionierte bis zu einem gewissen Grad, aber einige Stile wurden durcheinander gebracht. Diese Version des Codes funktionierte jedoch hervorragend (getestet und alles): devintorr.es/blog/2010/05/26/…
radu.luchian

5

Es reicht nicht aus, Ihr CSS einfach zu integrieren. Es gibt keine beobachteten Standards, wie eine HTML-E-Mail in dem verwendeten E-Mail-Client angezeigt wird. Sie alle machen es anders und je mehr Sie Ihre E-Mail gestalten, desto wahrscheinlicher ist es, dass eine größere Anzahl von Kunden davon betroffen ist. Viele Fachleute in diesem Bereich verwenden einfach Bilder und Tabellen und möglicherweise einige Hintergrundfarben, aber sonst nichts. Fügen Sie immer einen Link zu einer Website hinzu, die eine Arbeitskopie der E-Mail enthält, und geben Sie immer eine Nur-Text-Variante an.




Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.