The Kinetic Lightswitch

Module 3 of 6 — Developer Course

Learn how to detect if an email client supports kinetic interactivity and provide appropriate fallbacks for all email clients.

Why Fallbacks Matter

About 40% of email clients don't support the :checked CSS pseudo-class. The lightswitch pattern detects client capabilities and shows interactive content in supporting clients or static fallback content in others.

How the Lightswitch Works

Uses a checked checkbox as a feature detector. Clients that support :checked see the interactive version. Clients that don't (or strip checkboxes) see the fallback. Uses @media queries and mso-hide:all for Outlook compatibility.