Chaque grand client de messagerie supprime les balises <script> avant de rendre un message — sans exception, sans possibilité de désactivation par expéditeur. Ainsi, quand un email embarque un carrousel fonctionnel, un accordéon qui se déplie ou un quiz qui note une réponse, rien de tout cela n'est du JavaScript. C'est une case à cocher cachée, un sélecteur CSS, et une technique que la communauté du développement email appelle une machine à états.
Le problème : les clients de messagerie suppriment <script>
L'interactivité web suppose presque toujours que JavaScript est disponible. L'email ne peut absolument pas faire cette hypothèse — Gmail, Apple Mail, Outlook et tous les autres grands clients suppriment les balises <script> à l'arrivée, comme mesure de sécurité de base, quel que soit ce que l'expéditeur inclut ou la façon dont le message est signé. Tout ce qui se comporte comme une application dans un email doit pouvoir s'exprimer entièrement en HTML et CSS, car c'est réellement tout ce qu'il reste au moment du rendu.
La technique : inputs cachés et combinateurs de fratrie
Le mécanisme repose sur la pseudo-classe CSS :checked, appliquée à de vrais contrôles de formulaire HTML :
- Un
<input type="radio">ou<input type="checkbox">caché suit un élément d'état — quelle diapositive de carrousel est active, si un panneau d'accordéon est ouvert, quelle réponse de quiz a été choisie. - Un
<label for="...">visible enveloppe tout ce sur quoi le destinataire doit pouvoir cliquer — une flèche « Suivant », un en-tête d'accordéon, une option de sondage — et bascule l'état coché de l'input au clic, sans aucun script impliqué ; c'est le comportement natif des navigateurs pour<label>/<input>. - Un combinateur de fratrie CSS (
:checked ~ .panel,:checked + .content) stylise d'autres éléments selon l'état coché de cet input — affichant une diapositive, développant un panneau, révélant un message « vous avez choisi B ».
En empilant suffisamment de ces éléments — un input par état, une règle de combinateur par changement de style qui en résulte — le résultat se lit comme une interface véritablement à états, entièrement construite à partir d'un balisage que la passe de suppression des <script> d'un client ne touche jamais, puisqu'il n'y a aucun script à supprimer.
Support en conditions réelles : décomposition client par client
Selon le panel de clients testés par caniemail.com :
| Niveau de support | Clients | | --- | --- | | Support complet | Gmail (toutes plateformes, depuis mars 2020), Apple Mail (macOS 12.4+ / iOS 13.3+), Yahoo Mail, ProtonMail | | Support partiel | Outlook.com, le nouveau Outlook et Outlook mobile (« pris en charge uniquement sur les sélecteurs de type ») ; Samsung Email (Android 7.0+) | | Aucun support | Outlook Windows classique (2007–2019) ; webmails Orange et SFR (suppriment entièrement les éléments input) |
C'est un chiffre substantiellement différent de la portée réelle de ~91%+ que rapporte L'état du rendu des clients de messagerie en 2026 pour le CSS cinétique en général — le chiffre de caniemail compte les clients à égalité, indépendamment du nombre de destinataires qui utilisent réellement chacun d'eux, là où le chiffre de portée pondère par la part réelle des ouvertures suivies. L'Outlook Windows classique échoue entièrement sur cette technique, mais c'est aussi une minorité décroissante d'une catégorie de part de marché qu'Apple Mail seul écrase déjà — c'est pourquoi pondérer par l'usage réel, et non par le nombre de clients, est le chiffre qui doit guider une décision de conception.
Ce qui se passe là où :checked n'est pas honoré
Dans un client qui ne prend absolument pas en charge :checked, les inputs cachés et le balisage supplémentaire s'affichent simplement sans effet — pas d'erreur, pas de mise en page cassée, juste aucune interaction. Le bloc se replie sur ce que montre l'ordre par défaut de son balisage : la première diapositive du carrousel, un accordéon fermé, une simple liste statique d'options de quiz. Concevoir délibérément ce repli, plutôt que de laisser un client non pris en charge afficher quelque chose à moitié cassé, est le véritable travail du moteur de repli — voir Comment fonctionnent les alternatives pour le modèle complet à trois niveaux dans lequel s'inscrit cette technique.