HTMLメールはどうですか?

最近、HTMLレターを課すという課題に直面しました。 ご存知のように、Gmailを含む多くのメールクライアントは、外部CSSファイルの接続は言うまでもなく、cssクラスとスタイルタグのコンテンツを無視します。 したがって、HTML文字のレイアウトにおける通常の慣行は、インラインスタイルの使用です。 これを自分で行うと、レターテンプレートはすぐに混乱に変わり、維持や拡張が非常に困難になります。 これに関連して、rails-developersは、style属性にcss-classを「埋め込む」ことを可能にするさまざまなプラグインを使用します。



レターの本文に通常のhtmlを記述します。



< div class = "test" > hello world < / / div >




次のcssを使用してインラインスタイルを実行するようプラグインに指示します。



div .test { font-size 12px ; ; }




その後、出力で次のコードを取得します。



< div class = "test" style = "font-size:12px; color:red;" > hello world < / div >




したがって、一方では、読みやすく、拡張可能で、簡単にサポートされるhtmlメールテンプレートがあり、他方では、通常、テンプレートはさまざまな電子メールクライアントによって消化されます。

素晴らしいawesome_emailプラグインについて知りましたが、使用の原理はフェルトブートのように単純であるため、問題が発生しないように思われました。 しかし、そこにはありませんでした。手紙は本来あるべき形で届きませんでした。 エラーの性質を理解するために、awesome_emailの原則を考えてみてください(結局のところ、これはまったく素晴らしいものではありません)。 最初に、プラグインの助けを借りて、 css_parserが指定されたcssのコンポーネントにソートされ、次にnokogiriの助けを借りてhtmlドキュメントが解析され 、最後に、ループで、各cssルールのセレクターによってhtml要素が取得され、それぞれのルールのコンテンツがスタイルの最後に追加されます 以下がその原因です:



CSS:

div .test :first-child { color red ; }

div .test { ; }




HTML:

< div class = "test" > hello world < / / div >




出力:

< div class = "test" style = "色:赤;色:緑;" > hello world < / div >




cssプロパティの色が複製されるだけでなく、CSSルールがその重要性を考慮せず、最初に最初のcssルールの内容を追加し、次に2番目、したがってテキストの色を追加するだけなので、誤って使用されます緑ですが、赤でなければなりません。 この問題は次の方法で回避できます:cssルールに従ってではなく、html要素を介してループを通過し、それぞれについて、それに関連付けられているすべてのcssルールを取得します(firebugを介してコードを表示する場合など)これは単なる仮説であり、このような動作を実装する最善の方法はわかりません。 したがって、主な質問は次のとおりです。Railsアプリケーションにhtmlライティングスタイルを埋め込む最良の方法は何ですか? 一方では、レターテンプレートが明確で拡張可能なままであり、他方では、電子メールクライアントが満足して意図したとおりにコンテンツを表示するために、どのプラグインを使用する必要がありますか?



UPD。 問題は解決しました。 コードはgithub.com/goganchic/awesome_emailで、関連記事はrails.vsevteme.ru/items/show?id=15682です。



All Articles