Jeder große E-Mail-Client entfernt <script>-Tags, bevor eine Nachricht gerendert wird — ohne Ausnahme und ohne Opt-out pro Absender. Wenn eine E-Mail also ein funktionierendes Karussell, ein ausklappbares Akkordeon oder ein Quiz enthält, das eine Antwort bewertet, steckt dahinter kein JavaScript. Es handelt sich um eine versteckte Checkbox, einen CSS-Selektor und eine Technik, die in der E-Mail-Entwicklung als Zustandsautomat bezeichnet wird.
Das Problem: E-Mail-Clients entfernen <script>
Interaktivität im Web setzt fast immer voraus, dass JavaScript verfügbar ist. Bei E-Mails ist diese Annahme überhaupt nicht möglich — Gmail, Apple Mail, Outlook und jeder andere große Client entfernen <script>-Tags bei der Zustellung als grundlegende Sicherheitsmaßnahme, unabhängig davon, was ein Absender einfügt oder wie die Nachricht signiert ist. Alles, was sich in einer E-Mail wie eine App verhält, muss sich vollständig in HTML und CSS ausdrücken lassen, denn das ist tatsächlich alles, was beim Rendern noch übrig ist.
Die Technik: versteckte Eingabefelder und Geschwisterkombinatoren
Der Mechanismus ist die CSS-Pseudoklasse :checked, angewendet auf echte HTML-Formularsteuerelemente:
- Ein verstecktes
<input type="radio">oder<input type="checkbox">speichert einen Zustand — welche Karussellfolie aktiv ist, ob ein Akkordeon-Panel geöffnet ist oder welche Quizantwort ausgewählt wurde. - Ein sichtbares
<label for="...">umschließt das Element, das der Empfänger anklicken können soll — einen „Weiter“-Pfeil, eine Akkordeon-Überschrift oder eine Abstimmungsoption — und schaltet den Aktivierungszustand des Eingabefelds beim Klicken ganz ohne Skript um. Das ist das native Browser-Verhalten von<label>und<input>. - Ein CSS-Geschwisterkombinator (
:checked ~ .panel,:checked + .content) gestaltet andere Elemente abhängig vom Aktivierungszustand dieses Eingabefelds — er zeigt eine Folie an, klappt ein Panel aus oder blendet eine Meldung wie „Sie haben B gewählt“ ein.
Werden genügend dieser Bausteine kombiniert — ein Eingabefeld pro Zustand und eine Kombinatorregel pro daraus folgender Stiländerung —, entsteht eine Oberfläche, die sich wirklich zustandsbehaftet anfühlt. Sie besteht vollständig aus Markup, das der <script>-Entfernung eines Clients nie berührt, weil es kein Skript zu entfernen gibt.
Unterstützung in der Praxis: eine Aufschlüsselung nach Client
Laut dem getesteten Client-Panel von caniemail.com:
| Unterstützungsgrad | Clients | | --- | --- | | Vollständige Unterstützung | Gmail (alle Plattformen, seit März 2020), Apple Mail (macOS 12.4+ / iOS 13.3+), Yahoo Mail, ProtonMail | | Teilweise Unterstützung | Outlook.com, New Outlook und Outlook mobil („nur für Typselektoren unterstützt“); Samsung Email (Android 7.0+) | | Keine Unterstützung | Klassisches Windows Outlook (2007–2019); Orange und SFR Webmail (entfernen Eingabeelemente vollständig) |
Das ist eine wesentlich andere Zahl als die reale Reichweite von ~91%+, die der Bericht zum Stand des E-Mail-Client-Renderings 2026 für kinetisches CSS insgesamt nennt — die Zahl von caniemail gewichtet Clients unabhängig davon gleich, wie viele Empfänger sie tatsächlich verwenden, während die Reichweitenzahl nach dem realen Anteil der erfassten Öffnungen gewichtet. Das klassische Windows Outlook unterstützt diese Technik überhaupt nicht, stellt jedoch auch eine schrumpfende Minderheit in einer Marktanteilskategorie dar, die Apple Mail allein bereits weit übertrifft. Deshalb sollte die tatsächliche Nutzung und nicht die Anzahl der Clients eine Designentscheidung bestimmen.
Was passiert, wenn :checked nicht beachtet wird
In einem Client, der :checked überhaupt nicht unterstützt, bleiben die versteckten Eingabefelder und das zusätzliche Markup einfach inaktiv — kein Fehler, kein kaputtes Layout, nur keine Interaktion. Der Block fällt auf das zurück, was seine standardmäßige Markup-Reihenfolge zeigt: die erste Karussellfolie, ein geschlossenes Akkordeon oder eine einfache statische Liste von Quizoptionen. Diesen Fallback bewusst zu gestalten, statt einen nicht unterstützten Client etwas halb Kaputtes anzeigen zu lassen, ist die eigentliche Aufgabe der Fallback-Engine — unter Wie Fallbacks funktionieren finden Sie das vollständige Drei-Stufen-Modell, in das diese Technik eingebettet ist.