Alat apa yang secara otomatis menyebariskan gaya CSS untuk membuat kode HTML email? [Tutup]

Saat Anda melihat di http://www.campaignmonitor.com/css/ Anda mengetahui bahwa Anda perlu menyematkan gaya sebaris di HTML Anda, agar email Anda dapat dibaca di klien email mana pun.

Apakah Anda mengetahui alat atau skrip untuk mengonversi file HTML secara otomatis dengan dideklarasikan menjadi file HTML dengan hanya atribut gaya CCS sebaris?

Sunting : Ada solusi Javascript (yaitu: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ )? Dengan jQuery?

Periksa konverter online premailer.dialect.ca atau skrip Python ini untuk melakukannya.

Berikut adalah daftar alat bantu inlining siap pakai berbasis web, beberapa telah disebutkan sebelumnya. Jika ada yang terlewat, silakan edit dan tambahkan. Saya tidak bisa menjanjikan setiap karya seperti yang diiklankan, jadi berikan komentar, tetapi jangan tembak pembawa pesan ...

• Monitor Kampanye
• Mailchimp
• Premailer
• Styler Sebaris
• Emogrifier
• MailerMailer
• Tikku
• Mally

Dan ini salah satu yang bekerja secara terbalik (un-inlining css Anda)

• CSS Keluar

Jika Anda ingin memiliki solusi PHP, Anda dapat mencoba CssToInlineStyles .

Dua varian C #:

http://chrispebble.com/Blog/7/inlining-a-css-stylesheet-with-c

PreMailer.Net - https://github.com/milkshakesoftware/PreMailer.Net

Belum menguji keduanya tetapi akan memposting kembali jika / ketika saya melakukannya.

Saya menulis perpustakaan Node.js yang disebut Styliner yang CSS di Javascript sisi server.

Ini mendukung lembar gaya KURANG juga (dan mendukung plugin untuk format lain)

Anda mungkin ingin melihat PostageApp .

Salah satu fiturnya yang sangat kuat adalah ia memiliki sistem template yang sangat kuat yang dapat secara otomatis menyebariskan HTML dan CSS tanpa masalah apa pun.

( Pengungkapan Penuh: Saya Manajer Produk untuk PostageApp.)

Ini mungkin sedikit terlambat, tetapi jika Anda ingin membuat HTML Anda sebaik mungkin untuk pemasaran email (dengan menyebariskan css Anda, dan menggunakan sekumpulan alat keren lainnya), gunakan Premailer . Gratis, dan tentu saja, dibuat dalam kemitraan dengan CampaignMonitor itu sendiri.

Semoga membantu.

Saya agak terlambat ke permainan tetapi semoga ini akan membantu seseorang.

Saya menemukan metode jQuery / javascript kecil yang bagus ini yang dapat disematkan ke halaman - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery /

Saya telah mengeditnya sedikit untuk mendukung IE dan juga untuk mendukung halaman dengan beberapa file CSS terlampir menerapkan gaya dalam urutan yang benar.

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

Halaman tersebut kemudian dapat disalin / ditempel ke badan email.

Tidak cukup hanya sebariskan CSS Anda. Tidak ada standar yang diamati tentang bagaimana email HTML akan ditampilkan di klien email apa pun yang digunakan. Mereka semua melakukannya secara berbeda, dan semakin Anda mendesain email Anda, semakin besar kemungkinan email itu akan membobol lebih banyak klien. Banyak profesional di bidang ini hanya menggunakan gambar dan tabel dan mungkin beberapa warna latar belakang, tetapi tidak ada yang lain. Selalu sertakan tautan ke situs web yang memiliki salinan email yang berfungsi dan selalu berikan varian teks biasa.

Solusi javascript oleh tikku di sini: https://tikku.com/open-source/utilities/css-inline-transformer/

Satu lagi dari mailchimp - http://beaker.mailchimp.com/inline-css

Untuk programmer PHP: periksa konverter online ini atau skrip PHP ini untuk melakukannya.