主要なメールクライアントはすべて、メッセージをレンダリングする前に<script>タグを取り除きます——例外もなく、送信者ごとのオプトアウトもありません。 そのため、メールが実際に動くカルーセルや、開閉するアコーディオン、答えを採点するクイズを備えていたとしても、そのどれもJavaScriptではありません。それは隠しチェックボックス、CSSセレクタ、そしてメール開発コミュニティが「ステートマシン」と呼ぶ技術によるものです。
問題: メールクライアントは<script>を取り除く
Webのインタラクティブ性は、ほとんど常にJavaScriptが利用可能であることを前提としています。メールはその前提をまったく置けません——Gmail、Apple Mail、Outlook、その他あらゆる主要クライアントは、送信者が何を含めていようと、メッセージがどう署名されていようと、基本的なセキュリティ対策として到着時に<script>タグを取り除きます。メールの中でアプリのように振る舞うものは、すべてHTMLとCSSだけで表現できなければなりません。なぜなら、レンダリングされる時点で実際に残っているのはそれだけだからです。
技術の中身: 隠しinputと兄弟結合子
この仕組みの核心は、実際のHTMLフォームコントロールに適用されるCSSの:checked疑似クラスです:
- 隠された
<input type="radio">または<input type="checkbox">が、1つの状態——どのカルーセルスライドがアクティブか、アコーディオンパネルが開いているか、どのクイズの答えが選ばれたか——を追跡します。 - 目に見える
<label for="...">が、受信者がクリックできるようにすべきもの——「次へ」の矢印、アコーディオンのヘッダー、投票の選択肢——を包み、クリック時にスクリプトを一切介さずにinputのチェック状態を切り替えます。これはブラウザにネイティブに備わった<label>/<input>の挙動です。 - CSSの兄弟結合子(
:checked ~ .panel、:checked + .content)が、そのinputのチェック状態に基づいて他の要素にスタイルを適用します——スライドを表示したり、パネルを展開したり、「Bを選びました」というメッセージを表示したりします。
これらを十分に積み重ねる——1つの状態につき1つのinput、その結果生じるスタイル変化につき1つの結合子ルール——ことで、その結果は本物のステートフルなインターフェースとして機能します。しかもそれは、取り除くべきスクリプトが存在しないためにクライアントの<script>除去処理が一切触れることのないマークアップだけで、完全に構築されています。
実際のサポート状況: クライアントごとの内訳
caniemail.comのテスト対象クライアント一覧によると:
| サポートレベル | クライアント | | --- | --- | | 完全サポート | Gmail(全プラットフォーム、2020年3月以降)、Apple Mail(macOS 12.4以降/iOS 13.3以降)、Yahoo Mail、ProtonMail | | 部分的サポート | Outlook.com、新しいOutlook、モバイル版Outlook(「typeセレクタでのみサポート」)、Samsung Email(Android 7.0以降) | | 非対応 | クラシック版Windows Outlook(2007〜2019)、OrangeおよびSFRのウェブメール(input要素を完全に取り除く) |
これは、2026年のメールクライアントレンダリング事情がキネティックCSS全般について報告している約91%以上という実際の到達範囲とは、実質的に異なる数字です——caniemailの数値は、各クライアントを実際に何人の受信者が使っているかに関係なく等しく数えているのに対し、到達範囲の数値は実際の追跡開封シェアで重み付けされています。クラシック版Windows Outlookはこの技術に完全に非対応ですが、それはApple Mailだけですでに圧倒される市場シェアのバケットの中でも、縮小しつつある少数派です——だからこそ、デザインの意思決定を導くべき数字は、クライアントの数ではなく実際の利用状況による重み付けなのです。
:checkedが認識されない場合に何が起こるか
:checkedを一切サポートしないクライアントでは、隠しinputと追加のマークアップは単に無効な状態でレンダリングされます——エラーもレイアウト崩れもなく、ただインタラクションがないだけです。ブロックは、デフォルトのマークアップの並び順が示すもの——カルーセルの最初のスライド、閉じたアコーディオン、クイズの選択肢のプレーンで静的なリスト——にフォールバックします。非対応のクライアントに中途半端に壊れたものを表示させるのではなく、そのフォールバックを意図的に設計することこそが、フォールバックエンジンの本来の役割です——この技術が組み込まれている3ティアモデルの全体像はフォールバックの仕組みを参照してください。