Todo cliente de correo importante elimina las etiquetas <script> antes de renderizar un mensaje — sin excepciones, sin opción de exclusión por remitente. Así que cuando un correo incluye un carrusel funcional, un acordeón que se despliega o un cuestionario que puntúa una respuesta, nada de eso es JavaScript. Es una casilla oculta, un selector CSS y una técnica que la comunidad de desarrollo de correo llama máquina de estados.
El problema: los clientes de correo eliminan <script>
La interactividad web casi siempre asume que JavaScript está disponible. El correo no puede asumir eso en absoluto — Gmail, Apple Mail, Outlook y todos los demás clientes importantes eliminan las etiquetas <script> al recibir el mensaje como medida de seguridad básica, sin importar lo que incluya el remitente ni cómo esté firmado el mensaje. Cualquier cosa que se comporte como una aplicación dentro de un correo debe poder expresarse enteramente en HTML y CSS, porque eso es literalmente todo lo que queda en pie en el momento de renderizarse.
La técnica: entradas ocultas y combinadores de hermanos
El mecanismo es la pseudoclase CSS :checked, aplicada a controles de formulario HTML reales:
- Un
<input type="radio">o<input type="checkbox">oculto registra un dato de estado — qué diapositiva del carrusel está activa, si un panel del acordeón está abierto, qué respuesta del cuestionario se eligió. - Un
<label for="...">visible envuelve lo que el destinatario debe poder pulsar — una flecha de "Siguiente", el encabezado de un acordeón, una opción de encuesta — y alterna el estado marcado de la entrada al hacer clic, sin ningún script implicado; ese es el comportamiento nativo del navegador para<label>/<input>. - Un combinador de hermanos CSS (
:checked ~ .panel,:checked + .content) da estilo a otros elementos según el estado marcado de esa entrada — mostrando una diapositiva, desplegando un panel, revelando un mensaje de "elegiste B".
Apila suficientes de estos — una entrada por estado, una regla de combinador por cada cambio de estilo resultante — y el resultado se lee como una interfaz genuinamente con estado, construida enteramente a partir de marcado que el proceso de eliminación de <script> de un cliente nunca toca, porque no hay ningún script que eliminar.
Soporte en el mundo real: un desglose cliente por cliente
Según el panel de clientes probados de caniemail.com:
| Nivel de soporte | Clientes | | --- | --- | | Soporte completo | Gmail (todas las plataformas, desde marzo de 2020), Apple Mail (macOS 12.4+ / iOS 13.3+), Yahoo Mail, ProtonMail | | Soporte parcial | Outlook.com, New Outlook y Outlook móvil ("solo compatible con selectores de tipo"); Samsung Email (Android 7.0+) | | Sin soporte | Outlook clásico de Windows (2007–2019); webmail de Orange y SFR (eliminan por completo los elementos input) |
Esa es una cifra sustancialmente distinta del alcance real de ~91%+ que El estado del renderizado de clientes de correo en 2026 reporta para el CSS cinético en general — la cifra de caniemail cuenta a los clientes por igual sin importar cuántos destinatarios usan realmente cada uno, mientras que la cifra de alcance pondera por la participación real de aperturas rastreadas. El Outlook clásico de Windows falla por completo con esta técnica, pero también es una minoría en reducción dentro de un grupo de participación de mercado que Apple Mail por sí sola ya empequeñece — por lo que ponderar por el uso real, no por el número de clientes, es la cifra que debería guiar una decisión de diseño.
Qué ocurre donde :checked no se respeta
En un cliente que no soporta :checked en absoluto, las entradas ocultas y el marcado adicional simplemente se renderizan de forma inerte — sin error, sin diseño roto, sencillamente sin interacción. El bloque recurre a lo que muestre su orden de marcado por defecto: la primera diapositiva del carrusel, un acordeón cerrado, una lista estática simple de opciones del cuestionario. Diseñar esa alternativa deliberadamente, en lugar de dejar que un cliente sin soporte muestre algo a medio romper, es el verdadero trabajo del motor de alternativas — consulta Cómo funcionan las alternativas para el modelo completo de tres niveles en el que se inserta esta técnica.