Jakie narzędzia do automatycznego wstawiania stylu CSS do tworzenia kodu HTML wiadomości e-mail? [Zamknięte]

122

Gdy spojrzysz na http://www.campaignmonitor.com/css/, zauważysz, że musisz osadzić style w kodzie HTML, aby wiadomość e-mail była czytana w dowolnym kliencie pocztowym.

Czy znasz jakieś narzędzia lub skrypty do automatycznej konwersji pliku HTML z zadeklarowanym w do pliku HTML z wbudowanymi atrybutami stylu CCS?

Edycja : jakieś rozwiązanie JavaScript (np .: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ )? Z jQuery?

Pierre-Jean Coudert
źródło
3
Właśnie zadałem podobne pytanie na temat zaleceń dotyczących oprogramowania jako uzupełnienie tego: softwarerecs.stackexchange.com/questions/9983/ ...
Grzegorz Oledzki
Po prostu musiałem rozwiązać to dokładnie dla działu w pracy. To pytanie zapewniło niezbędne kroki w celu rozwiązania problemu.
Gopherkhan

Odpowiedzi:

80

Sprawdź konwerter online premailer.dialect.ca lub ten skrypt w języku Python, aby to zrobić.

Saleh Al-Zaid
źródło
10
Wygląda na to, że Premailer został przeniesiony pod nowy adres URL: premailer.dialect.ca
Matt Huggins
2
Mail szymp oferuje tutaj świetny stylowy inliner
dhornbein
1
premailer.dialect.ca jest świetny, ale dusi się na wielu stronach. W moich testach to ponad połowa. Na przykład wypróbuj tę stronę.
Nick Woodhams,
Uruchom własny serwer premailer ... github.com/TrackIF/premailer-server Łatwy do uruchomienia na ec2: docs.aws.amazon.com/elasticbeanstalk/latest/dg/…
Adam Lane
ŻADEN z nich tak naprawdę nie usuwa tagu STYLE, który jest głównym problemem, z którym będziesz się uporać
Coldstar
33

Oto lista gotowych do użycia narzędzi opartych na Internecie, o których kilka zostało wspomnianych wcześniej. Jeśli jakieś przegapiłem, możesz je edytować i dodawać. Nie mogę obiecać, że każdy działa zgodnie z reklamą, więc zostaw komentarze, ale nie strzelaj do posłańca ...

A oto jeden, który działa w odwrotnej kolejności (odsuwanie twojego css)

Jan
źródło
3
MailerMailer był jedynym, który działał dla mnie, zachowując nienaruszone formatowanie.
Jeshurun
20

Jeśli chcesz mieć rozwiązanie PHP, możesz wypróbować CssToInlineStyles .

chiborg
źródło
2
ten skrypt php jest dobrze napisany. nie obsługuje flagi! important, ale mimo wszystko jest to ładny skrypt.
Perry Tew
8

Napisałem bibliotekę Node.js o nazwie Styliner która CSS w JavaScript po stronie serwera.

Obsługuje również MNIEJ arkuszy stylów (i obsługuje wtyczki dla innych formatów)

SLaks
źródło
7

Możesz rzucić okiem na PostageApp .

Jedną z jego naprawdę mocnych cech jest to, że ma bardzo solidny system szablonów, który może automatycznie wstawiać HTML i CSS bez żadnych problemów.

( Pełne ujawnienie: jestem menedżerem produktu PostageApp.)

JonLim
źródło
więc robisz inlining CSS na końcu łańcucha przetwarzania (tuż przed wysłaniem do kogoś wiadomości e-mail)?
zazi
6

To może być trochę za późno, ale jeśli chcesz, aby Twój HTML był jak najlepszy do marketingu e-mailowego (poprzez wbudowanie twojego css i użycie wielu innych fajnych narzędzi), użyj Premailera . Jest darmowy i oczywiście wykonany we współpracy z samym CampaignMonitor.

Mam nadzieję, że to pomoże.

André Armenni
źródło
+1 dla Premailera. Ma zarówno formularz internetowy, jak i interfejs API, których możesz użyć do zintegrowania go z dowolną platformą. Jeśli używasz node.js, nie owinięcie tutaj .
Jed Watson
6

Trochę się spóźniłem na mecz, ale mam nadzieję, że to komuś pomoże.

Znalazłem tę ładną, małą metodę jQuery / javascript, którą można osadzić na stronie - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery /

Zmieniłem go trochę, aby obsługiwać IE, a także obsługiwać stronę z dołączonymi wieloma plikami CSS, stosując style we właściwej kolejności.

$(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();
        });

Stronę można następnie skopiować / wkleić do treści wiadomości e-mail.

John C.
źródło
dlaczego usuwasz skrypt? A te usuwają wykonanie, które moim zdaniem powinno wyjść poza pętlę for.
jcubic
@jcubic Masz rację odnośnie: umieszczenie wykonania usunięcia, będę edytować. Usunięcie skryptu było w moim oryginalnym kodzie, chciałem czystszego HTML z tylko tym, co jest naprawdę niezbędne do wyświetlenia strony.
John C,
Wielkie dzięki za ten zwięzły skrypt, szukałem godzinami i jest to najczystsze rozwiązanie, jakie znalazłem.
kerzek
1
Był na tej samej łodzi co @kerzek. To działało do pewnego stopnia, ale niektóre style się pomieszały. Jednak ta wersja kodu działała doskonale (przetestowana i wszystko): devintorr.es/blog/2010/05/26/…
radu.luchian
5

Nie wystarczy po prostu wstawić CSS. Nie istnieją żadne standardy dotyczące sposobu wyświetlania wiadomości e-mail w formacie HTML w dowolnym używanym kliencie poczty e-mail. Wszyscy robią to inaczej, a im częściej projektujesz swój e-mail, tym większe jest prawdopodobieństwo, że zepsuje się on większej liczbie klientów. Wielu profesjonalistów w tej przestrzeni po prostu używa obrazów i tabel, a może niektórych kolorów tła, ale nic więcej. Zawsze dołączaj łącze do witryny internetowej zawierającej działającą kopię wiadomości e-mail i zawsze udostępniaj wariant w postaci zwykłego tekstu.

Bjorn
źródło