Ogni client email principale elimina i tag <script> prima di renderizzare un messaggio — nessuna eccezione, nessuna opzione di esclusione per singolo mittente. Quindi, quando un'email contiene un carosello funzionante, una fisarmonica che si espande o un quiz che assegna un punteggio a una risposta, niente di tutto ciò è JavaScript. È una checkbox nascosta, un selettore CSS e una tecnica che la comunità dello sviluppo email chiama macchina a stati.
Il problema: i client email eliminano <script>
L'interattività web presuppone quasi sempre che JavaScript sia disponibile. L'email non può fare questa supposizione in alcun modo — Gmail, Apple Mail, Outlook e ogni altro client principale rimuove i tag <script> all'arrivo, come misura di sicurezza di base, indipendentemente da ciò che il mittente include o da come il messaggio è firmato. Tutto ciò che si comporta come un'app all'interno di un'email deve poter essere espresso interamente in HTML e CSS, perché quello è genuinamente tutto ciò che resta in piedi al momento del rendering.
La tecnica: input nascosti e combinatori di pari livello
Il meccanismo è la pseudo-classe CSS :checked, applicata a controlli di modulo HTML reali:
- Un
<input type="radio">o<input type="checkbox">nascosto tiene traccia di un elemento di stato — quale slide del carosello è attiva, se un pannello della fisarmonica è aperto, quale risposta del quiz è stata scelta. - Un
<label for="...">visibile racchiude tutto ciò su cui il destinatario deve poter cliccare — una freccia «Avanti», l'intestazione di un pannello della fisarmonica, un'opzione di sondaggio — e commuta lo stato «checked» dell'input al clic, senza alcuno script coinvolto; è il comportamento nativo del browser per<label>/<input>. - Un combinatore di pari livello CSS (
:checked ~ .panel,:checked + .content) applica stili ad altri elementi in base allo stato «checked» di quell'input — mostrando una slide, espandendo un pannello, rivelando un messaggio del tipo «hai scelto B».
Impilandone abbastanza — un input per stato, una regola di combinatore per ogni cambiamento di stile risultante — il risultato si presenta come un'interfaccia genuinamente stateful, costruita interamente da markup che il passaggio di eliminazione degli <script> di un client non tocca mai, perché non c'è alcuno script da eliminare.
Supporto nel mondo reale: una panoramica client per client
Secondo il pannello di client testati di caniemail.com:
| Livello di supporto | Client | | --- | --- | | Supporto completo | Gmail (tutte le piattaforme, da marzo 2020), Apple Mail (macOS 12.4+ / iOS 13.3+), Yahoo Mail, ProtonMail | | Supporto parziale | Outlook.com, Nuovo Outlook e Outlook mobile («supportato solo sui selettori di tipo»); Samsung Email (Android 7.0+) | | Nessun supporto | Outlook classico per Windows (2007–2019); webmail Orange e SFR (eliminano del tutto gli elementi input) |
Si tratta di un numero sostanzialmente diverso dalla copertura reale di ~91%+ che Lo stato del rendering dei client email nel 2026 riporta per il CSS cinetico in generale — la cifra di caniemail conta i client in modo paritario, indipendentemente da quanti destinatari usano effettivamente ciascuno di essi, mentre il numero di copertura pesa in base alla quota reale di aperture monitorate. Outlook classico per Windows fallisce completamente questa tecnica, ma è anche una minoranza in calo di una fetta di mercato che Apple Mail da sola già surclassa — motivo per cui è il peso in base all'utilizzo reale, non il conteggio dei client, il numero che dovrebbe guidare una decisione di design.
Cosa succede dove :checked non viene rispettato
In un client che non supporta affatto :checked, gli input nascosti e il markup aggiuntivo si limitano a renderizzare in modo inerte — nessun errore, nessun layout rotto, semplicemente nessuna interazione. Il blocco torna a mostrare qualunque cosa preveda il suo ordine di markup predefinito: la prima slide del carosello, una fisarmonica chiusa, un semplice elenco statico delle opzioni del quiz. Progettare deliberatamente quel fallback, invece di lasciare che un client non supportato mostri qualcosa di parzialmente rotto, è il vero compito del motore di fallback — vedi Come funzionano i fallback per il modello completo a tre livelli in cui questa tecnica si inserisce.