Caniemail.com - メールコンテンツ互換性チェックサービス（caniuse のメール版）

 (caniemail.com)
6 ポイント 投稿者 GN⁺ 2024-05-07 | 1件のコメント | WhatsAppで共有

CSS transition プロパティの対応状況（2024年3月29日）

  • メールクライアントにおける CSS transition プロパティの対応状況をまとめた内容
  • CSS transition プロパティは、CSS プロパティ値の変化に対して一定時間にわたりアニメーション効果を与える機能
  • まだメールクライアントでは広く対応していない

CSS text-wrap プロパティの対応状況（2024年4月3日）

  • メールクライアントにおける CSS text-wrap プロパティの対応状況をまとめた内容
  • CSS text-wrap プロパティは、長い単語をどのように改行処理するかを指定するプロパティ
  • まだメールクライアントでは広く対応していない

CSS word-spacing、shape-margin、shape-outside プロパティの対応状況（2024年3月13日）

  • メールクライアントにおける CSS word-spacing、shape-margin、shape-outside プロパティの対応状況をまとめた内容
  • CSS word-spacing は単語間の間隔を調整するプロパティ
  • CSS shape-margin と shape-outside は、画像やオブジェクトの周囲にテキストを回り込ませる方法を指定するプロパティ
  • まだメールクライアントでは広く対応していない

2024年3月の Caniemail アップデート情報（2024年3月29日）

  • 2024年3月に Caniemail サイトへ追加された更新内容をまとめた情報

2024年2月の Caniemail アップデート情報（2024年2月29日）

  • 2024年2月に Caniemail サイトへ追加された更新内容をまとめた情報

メールクライアントの CSS プロパティ対応状況

  • Apple Mail (macOS) : 284件中267件に対応
  • Apple Mail (iOS) : 284件中266件に対応
  • Samsung Email (Android) : 284件中239件に対応
  • SFR (Desktop Webmail) : 257件中226件に対応
  • WEB.DE (iOS) : 235件中222件に対応

Caniemail サイトの紹介

  • @HTeuMeuLeu と Tilt Studio チームが立ち上げ、保守しているサイト
  • @Fyrd の元祖 caniuse.com をベースにし、@Lensco がデザイン
  • @M_J_Robbins と Rebel チームの元のアイデアと名称をもとにしている
  • GitHub のメール開発者コミュニティがデータ提供を支援
  • 問題があれば GitHub にバグを報告してほしいと案内

GN⁺ の意見

  • メール開発者にとって非常に有用なサイトで、各メールクライアントごとの CSS プロパティ対応状況をひと目で把握できる。新しい CSS プロパティをメールに適用する際、互換性チェックに欠かせないサイト。
  • まだメールクライアントの CSS 対応は Web ブラウザに比べてかなり不足している状況。アニメーション関連プロパティやレイアウト関連プロパティはほとんど対応しておらず、メールデザインの限界として作用している。
  • 定期的にアップデート情報を知らせているため、メール開発者が最新情報を把握するのに役立ちそう。ただし更新頻度が高すぎて追いかけるのが大変かもしれない。
  • 類似サイトとして EmailOnAcid や Litmus などがあるが、これらのサイトは各クライアントでどのようにレンダリングされるかのプレビュー用スクリーンショットを提供する点が異なる。Caniemail とあわせて活用すると相乗効果が期待できそう。

関連記事

1件のコメント

 
GN⁺ 2024-05-07
Hacker Newsの意見

  • 素晴らしい資料で、Outlookは本当に厄介で、サポートしているものが少なすぎる。
    会社アプリの通知用メールテンプレートを作るときはたいてい苦労していたが、その後 MJML(https://mjml.io/) に切り替えてからはずっと楽になった。
    テストした複数のデバイスでは成果物の互換性が最も高く見え、Litmus(https://litmus.com) でさまざまなアプリやデバイスでのレンダリングを確認した。別スレッドで出ていた https://testi.at/ も使ってみたが、よく合っていた。

    • MJMLは面白そうだ。組織がアクセシブルで機械可読なメールに気を配るビジネス上の理由があればいいのにと思う。
      HTMLメールはIE6時代のWebのように止まっていて、画像タグの一覧以上のものが必要な少数のメール作業には Foundation for Emails(https://get.foundation/emails.html) を使ってきたし、存在しているだけでありがたい。
    • MJMLはこの分野では断然最高のツールで、よく使っている。2024年にメールを作るなら、HTMLメールの大きな悩みを避けたり減らしたりできる重要な近道だ。
    • メール制作には react-email(https://react.email) もおすすめ。提供されているコンポーネントは十分で、昔のメールマーケティング時代のように5行ごとにタグを入れてメールを作るよりずっと良い。
    • 今のOutlookは、メール界のInternet Explorerのような存在なのだろう。

  • このサイトに関する面白い逸話がある。運営者が以前、利用ログにはサイトの目的を誤解した人たちが有名人の名前を入力して、その人たちにメールを送ろうとした形跡がたくさんあったと言っていた。

    • 最初はこれが何なのか把握しようとしたが、これといった説明は見つからなかった。「メールコンテンツ向けのcaniuseのようなもの」だというが、caniuseが何かを知らないと理解しにくい。
      新しいサービスを公開する前に、平均的な人がこれが何か分かる短い説明セクションを入れてくれるとよい。

  • スコアは低いほど良い。「メールはプレーンテキストのみを許可し、事前合意のない添付ファイルは不可、それ以外は自動削除する」というポリシーの人をかなり知っている。

    • プレーンテキストから少しだけ拡張するのは妥当だ。装飾だけの問題ではなく、右から左へ書く言語、リスト、リンクのような用途には多少のマークアップが役立つし、HTMLで十分だ。
      問題はCSSを過剰に使ったり、そもそもJavaScriptを許可したりするところにある。CSSやJavaScriptなしのHTMLだけで起きたメールのセキュリティ問題は思い浮かばない。
    • HTML版が空だったり「肥大化したクライアントを使うな」とだけ表示されたりして、実際の内容はプレーンテキストの代替本文に入っているメールを送る人を少なくとも2人知っている。
      Thunderbirdで読むにはメールのソースを見なければならなかった気がする。

  • 関連リンク:
    Can I Email? - https://news.ycombinator.com/item?id=27112960 - 2021年5月、コメント273件
    Can I Email: ‘Can I Use’ for email - https://news.ycombinator.com/item?id=20948826 - 2019年9月、コメント196件
    'Can I Use' for Email - https://news.ycombinator.com/item?id=20934601 - 2019年9月、コメント1件

  • 最も人気のある2つのクライアントであるGmailとOutlookが、それぞれ25位と41位、つまり最下位圏にいる。

    • Gmailがサポートしていない機能を見ると、display: none、アニメーション、その他のCSSのように、メールに必ず必要とは言いにくいものがある。
      基本は備わっているので、高い順位が必ずしも良い目標とは限らないかもしれない。
    • 最も人気があるが機能不足だったInternet Explorerを思い出す。

  • フル機能のHTML「文書」は実のところ文書ではなくアプリケーションに近いので、メールクライアントがサポートを制限するのは理にかなっている。
    しかしこの断片化のせいで、本当の標準があればいいのにと思う。リモートリソースを取得したりコードを実行したりできない、公式な非アプリケーションHTMLサブセットが必要だ。埋め込みメディア、アニメーション、スタイリングなどを備えた文書形式であればよい。

    • アニメーションや静的でない動画メディアが入っていても「文書」と呼べるのか？
    • 正直、他人が私に実行するコードや取得するリソースを送る理由はない。
      広告技術業界が私のメールを広告板として使いたがっているのは分かるが、消えてほしい。プレーンテキストと添付ファイルで十分だ。

  • ちなみに jsx-email には、caniemailデータセットを使うCLIメールクライアント互換性チェック機能が組み込まれている: https://jsx.email/docs/core/cli#check

  • すべてのメールクライアントが認識する数少ないCSSプロパティだけを列挙するほうが、より有用な気がする。冗談ではなく、本気でそう思う。
    CanIEmail? の答えはだいたい「いいえ」だ。

    • https://www.caniemail.com/clients/ で「check all」を選ぶと、すべてのメールクライアントがサポートする機能と、サポートが分かれる機能を別々に見られる。
      全てでサポートされているものは、おおよそ border-collapse、font ショートハンド、list-style-type、複数のCSS単位（cm、em、ex、in、mm、pc、%、pt、px）、vertical-align、一部のHTML要素と valign 属性、JPG/PNG画像形式くらいに見える。

  • 最初は大きな文字で「No.」だけを表示するジョークサイトかと思った。

    • デザインチームがメールテンプレートの更新を依頼してくるとき、たいてい私のデフォルトの答えもそれだ。「できません。基本的な書式だけです。少し攻めたいなら表くらいまで。それ以上は無理です」

  • メールのダークモード対応は、IE6時代からコーディングしてきたフロントエンド開発者として経験した中でも、かなり苛立たしい部類に入る。
    基本的にはライトモードのデザインだけを実装し、雑なダークモード対応のメールクライアントが自動反転したときにもそれなりに見える色を選ぶしかない。
    Gmailは最悪の例の1つだ。ダークモードで直接色を選ぶ方法がまったくない。