Does it email? CSS random()
CSS random() generates a random number within a range. So does it work in email? I built a fruit machine to find out.
What's covered:
• How random() works, using the MDN example that randomizes height, width, background color and rotation
• The demo: a fruit machine that shows a random result every time you open the email, powered by one line that uses random() to set a vertical background-position between 1em and 6em across six email logos
• The whole email comes in at just over 1KB
• Why I couldn't build a "winning screen": style queries don't read the computed value, though calc and overflow could get you there, similar to Rémi Parmentier's Fab Four technique
• Support: WebKit only right now, which means the latest version of Apple Mail (and maybe webmail opened in Safari). Great as a progressive enhancement or easter egg, not as core functionality
Resources mentioned: MDN's random() page, caniemail.com, Rémi Parmentier's Fab Four technique
✦✦✦✦✦
"Does it email?" is a series where I test new and experimental CSS in real email clients. Hosted by Mark Robbins, developer advocate at Customer.io and a longtime email expert. Subscribe for more.
Customer.io is the customer engagement platform trusted by 9,000+ companies to build personalized journeys across email, push, SMS, and more. Learn more: https://customer.io/
#EmailDevelopment #CSS #Flexbox #CSSGrid #HTMLEmail #EmailGeek