web-dev-qa-db-fra.com

Quels outils pour intégrer automatiquement le style CSS dans la création de code HTML de courrier électronique?

Lorsque vous consultez http://www.campaignmonitor.com/css/ , vous apprenez qu'il est nécessaire d'intégrer des styles en ligne dans votre code HTML pour que votre courrier électronique puisse être lu dans n'importe quel client de messagerie. .

Connaissez-vous des outils ou des scripts permettant de convertir automatiquement un fichier HTML avec une déclaration déclarée en un fichier HTML contenant uniquement des attributs de style CCS intégrés?

Modifier : N'importe quelle solution Javascript (c'est-à-dire: http://www.robertnyman.com/2006/04/24/get-the- render-style-of-an-element / )? Avec jQuery?

htmlcssemailinlinehtml-email
123
Pierre-Jean Coudert

Vérifiez le convertisseur en ligne premailer.dialect.ca ou ceci script Python pour le faire.

79
Saleh Al-Zaid

Voici une liste d'outils en ligne prêts à être utilisés, quelques-uns ont été mentionnés précédemment. S'il en manque, n'hésitez pas à les éditer et à les ajouter. Je ne peux pas promettre que chacun fonctionne comme annoncé, alors laissez tomber les commentaires, mais ne tirez pas sur le messager ...

Et en voici un qui fonctionne à l’inverse (désinsérer votre css)

33
John

Si vous souhaitez avoir une solution PHP, vous pouvez essayer CssToInlineStyles) .

20
chiborg

Deux variantes de C #:

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

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

Je n'ai pas encore testé, mais je posterai si/quand je le ferai.

10
GFoley83

J'ai écrit une bibliothèque Node.js appelée Styliner qui insère CSS en Javascript côté serveur.

Il supporte aussi les feuilles de style LESS (et supporte les plugins pour d'autres formats)

8
SLaks

Vous voudrez peut-être jeter un oeil à PostageApp .

L'une de ses principales caractéristiques réside dans le fait qu'il est doté d'un système de modèles extrêmement robuste, capable d'insérer automatiquement du code HTML et CSS sans problème.

( Divulgation complète: Je suis le responsable produit de PostageApp.)

7
JonLim

C'est peut-être un peu trop tard, mais si vous voulez que votre code HTML soit le meilleur possible pour le marketing par courrier électronique (en alignant vos css et en utilisant un tas d'autres outils intéressants), utilisez le Premailer . Son gratuit, et bien sûr, fait en partenariat avec CampaignMonitor lui-même.

J'espère que ça aide.

6
André Armenni

Je suis un peu en retard au jeu mais j'espère que cela aidera quelqu'un.

J'ai trouvé cette jolie petite méthode jQuery/javascript qui peut être intégrée à une page - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes -using-jquery /

Je l'ai un peu modifié pour prendre en charge IE) et pour prendre en charge une page avec plusieurs fichiers CSS attachés en appliquant les styles dans le bon ordre.

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

La page peut ensuite être copiée/collée dans le corps de l'e-mail.

5
John C

Il ne suffit pas d'aligner simplement votre CSS. Il n'y a pas de normes observées quant à la manière dont un email HTML sera affiché dans le client de messagerie utilisé. Ils le font tous différemment, et plus vous concevez votre courrier électronique, plus il risque de tomber sur un plus grand nombre de clients. Beaucoup de professionnels dans ce domaine utilisent simplement des images et des tableaux et peut-être des couleurs d'arrière-plan, mais rien d'autre. Toujours inclure un lien vers un site Web contenant une copie de travail du courrier électronique et toujours fournir une variante en texte brut.

5
Bjorn Tipling

Une solution javascript par tikku ici: https://tikku.com/open-source/utilities/css-inline-transformer/

5
EpokK

Un autre de mailchimp - http://beaker.mailchimp.com/inline-css

2
palaniraja

Pour les programmeurs PHP: cochez ceci convertisseur en ligne ou ceci script PHP pour le faire.

1
Peter Krauss