# CSSインライナーとは何か、なぜ必要なのか
現代のWeb開発では、役割を分離するのが一般的です。HTMLが構造を担い、外部CSSファイルがすべての視覚スタイルを提供します。しかし、外部スタイルシートやグローバルな<style>タグを信頼しない環境も存在します。外部CSSが機能しない最も代表的な用途がメールテンプレート開発です。この環境では、フォント・色・余白を正しく表示させる唯一の確実な方法は、タグに直接埋め込むことです: <span style="color: red;">。# メールクライアントにおけるCSSの問題
Microsoft Outlook、Apple Mail、GmailなどのメールクライアントはCSSレンダリングエンジンが非常に制限的なことで知られています。多くは読み取りインターフェースを破壊しかねないコードインジェクションを防ぐため、<link>タグや<style>タグを除去します。 ニュースレターやトランザクショナルメール（領収書、アカウント確認メールなど）では、テーブルレイアウトとインラインCSSの使用がメールマーケティング業界のゴールドスタンダードとされています。
# このツールがブラウザ内でどう動くか
- 安全なパース:
DOMParser APIを使用して、入力されたHTMLをブラウザ内の安全な仮想DOMに一時的に変換します。 - カスケードのシミュレーション: CSSルールを解析し、セレクターに詳細度の重みを付け、対象HTML要素の
style属性にコードを注入して書き換えます。 - 完全オフライン: コードの一切がデバイスの外に出ません。機密コンテンツを含むテンプレートでも完全なプライバシーを確保できます。