htmlのcssでは各社で使えないプロパティがある
gmail,yahooメールまで今回は対応していたのですが、各社対応しているCSSのプロパティが違います。
ローカルでmailcatcherやメールのhtml吐き出して確認しているものが、そのままそれらのCSSが適用されるわけではなく、適用できないCSSはremoveされてしまうため、作成したメールのデザインと違うメールコンテンツが出来てしまう可能性があります。
それぞれ使えるプロパティを調べるためには、こちらのサイトが便利です。
https://www.caniemail.com/search/
また、gmailはこちらで対応しているCSSプロパティは公開されています。
https://developers.google.com/gmail/design/reference/supported_css
gmail
-
flexboxは使えるけど、align-itemsなどは使えない-
floatにしたり、inline-blockにしたり、やりたいことに応じて、色々修正・・・・
-
- svgが使えない
- 画像に置き換え
gmailの場合、css2のプロパティまでしか対応していないようでそのため、displayの中のflexboxは使えますが、align-itemsは使えないようです。
https://developers.google.com/gmail/design/reference/supported_css
yahooメール
-
linear-gradientが使えない- background-imageで対応
- ただ、yahooメールでbackground-imageが完全対応していないようで、反映されないユーザーもいるため、背景色を合わせるために同様のbackground-colorをいれています。
- remが使えない
- pxに置換
-
box-sizing: border-box;が使えなくて、padding分はみ出してしまう。- 100%を超えないように、paddingの調整
その他
- サイドバー分でmedia queryの基準がずれる
- media queryの基準を大きめにとって、崩れることはないようにする
このように、HTMLメールでは、想定していない部分で崩れることがあるので、早めに確認しつつ調整していくこと、調整が難しい場合担当者と早めにメールの比率を見つつ調整していくことが必要そうです。