Utilizing CSS Variables in Interactive Emails


Notes from the Dev logo red

Interactive emails are showstoppers that basically enable you stand out within the inbox. However they’re not straightforward to drag off except you’ve obtained some critical electronic mail coding abilities.

On this episode of Notes from the Dev: Video Version, we’ve obtained simply the man (or bloke) for the job. Jay Oram of the digital company ActionRocket joined me to clarify how he developed a Wordle sport for ActionRocket’s weekly e-newsletter.

To refresh your reminiscence… Individuals went loopy for this phrase guessing sport final yr. Wordle was the most-Googled phrase of 2022, and the sport’s creator bought it to the New York Instances in a seven-figure deal.

Someday across the top of the Wordle craze, the e-mail geek group questioned who could be the primary to ship a Wordle sport for the inbox. Jay rose to the problem. His secret trick? Utilizing CSS variables.

Watch the video under to learn the way he constructed the interactive Wordle electronic mail and preserve studying for all the small print.

How Jay’s Wordle electronic mail sport works

When individuals remedy a Wordle puzzle, they usually have six probabilities to guess the phrase of the day utilizing the method of elimination. Gamers make a guess by typing in a phrase. If a letter isn’t within the reply in any respect, the field it’s in will likely be grey. Letters which might be within the phrase, however within the unsuitable spot, are yellow. And the proper letter in the proper spot will likely be inexperienced.

To construct this gamified electronic mail, Jay wanted an interactive keyboard, the power to clear and reset the puzzle, a approach to change colours of letter tiles based mostly on the subscriber’s enter, and a complete bunch of CSS variables for all of the totally different potentialities.

There’s even a shock animated GIF of the occasion blob emoji after you work it out. Right here’s the way it appears to be like while you win:

Courtesy of SendFeed.com

Jay says it took him three or 4 hours to get his interactive Wordle electronic mail working. (After all, he’s a dwelling legend amongst electronic mail geeks – so don’t evaluate your self.)

Utilizing the checkbox methodology for interactivity

To make it occur, he used the trusty checkbox methodology for interactive emails. Jay wrote about this for the E-mail on Acid weblog a number of years in the past. The strategy includes utilizing the :checked CSS pseudo-selector with a type that has radio buttons or checkboxes to cover and reveal content material in an interactive electronic mail.

Principally, what you’re doing while you code emails this fashion is replicating JavaScript performance that toggles issues on and off.

For instance, right here’s an fascinating use: Jay coded separate keyboards for every of the 5 letters within the puzzle. When a subscriber clicks a letter on the keyboard, it hides that keyboard and divulges one for getting into the subsequent letter. However as a result of they’re an identical keyboards, and it occurs so shortly, recipients don’t discover.

Observe that the so-called “click-to-reveal” or “punched card” methodology is simply supported on Apple Mail, Outlook for Mac, and another electronic mail purchasers utilizing the WebKit rendering engine. The identical goes for electronic mail consumer help for CSS variables, that are an enormous a part of the Wordle electronic mail.

So, make sure you might have a view in browser hyperlink for subscribers on Gmail. For interactivity in Gmail, you would attempt making a Wordle sport utilizing the AMP for E-mail part amp-bind, which the of us at Mailmodo have achieved.

What are CSS variables?

Also called customized properties or cascading variables, CSS variables are entities containing particular values that the coder defines and that may be reused and repeated. The variables present an efficient approach to handle property values. Net builders usually use customized properties to chop down on repetitive CSS all through an internet site, which makes issues simpler to replace.

You’ll be able to create CSS variables utilizing the :root pseudo-selector while you need the variables to be utilized globally, however they are often utilized to any particular ingredient. You insert or entry them utilizing the var() operate. CSS customized properties are formatted utilizing two hyphens earlier than the title, and the essential syntax would look one thing like this:

:root { 
  --name-of-variable: 'Replace the worth right here'; 

css property: var(--name-of-variable); 

In case you’ve by no means used CSS variables in electronic mail code, that’s no huge shock. Jay says most builders don’t, and its help is restricted to Apple Mail and Outlook for Mac together with a number of the smaller electronic mail purchasers.

Can I email… CSS Variables (Custom Properties)

Utilizing CSS variables in interactive emails

Within the Wordle electronic mail, CSS variables are used to outline and show choices for each letters and colours.

Jay says the principle motive for doing that is to keep away from repeating tons of code in interactive emails. Within the video, he walks us via some fundamentals of utilizing CSS variables in electronic mail. Listed here are some necessary notes:

  1. Every variable is simply associated to the ingredient it’s inside, however customized properties should be in a CSS selector.
  2. Place CSS variables in a :root selector if you wish to use them all through your complete doc. However that’s not required.
  3. You determine what to call CSS variables. Be certain they begin with two hyphens, finish with a colon, and don’t comprise any particular characters. They’re additionally case delicate.
  4. Variables could be colours, numbers, textual content, spacing – absolutely anything you may code.
  5. Use a comma after the variable title to outline a default worth that may function a fallback.
  6. You can even use CSS variables inside media queries to create totally different experiences relying on display screen dimension.

Right here’s Jay’s instance code for colour variables. It applies a purple font colour to your complete doc whereas specifying purple textual content in a particular module of the e-mail. It additionally has a fallback/default colour of pink.

:root { 
--fontcolor: purple; 


.module { 
--fontcolor: rebeccapurple; 


.testcolor { 
colour: var(--fontcolor, pink) 
font-size: 40px; 



See all of Jay’s instance code and mess around with it on Parcel.

So once more, the principle function of CSS variables is to cut back repetitive coding in interactive emails. It helps the DRY (Don’t Repeat Your self) strategy to coding. To learn a extra in-depth rationalization, try the CSS Methods information to customized properties.

One other potential use for CSS variables that Jay and I mentioned is utilizing them to handle and replace model colours in an electronic mail design system.

Extra electronic mail coding ideas from Jay Oram

Not solely is Jay Oram an superior electronic mail coder, he’s additionally a brilliant beneficiant creator of content material for electronic mail geeks. Listed here are just some of the favored articles Jay has written for our weblog:

Jay was additionally a presenter at E-mail Camp 2022. Watch him stay code a click-to-reveal module and listen to extra about utilizing CSS variables in interactive emails.

Plus, Jay and I lately confronted off in a debate over utilizing synthetic intelligence for electronic mail improvement. Watch a replay of the webinar E-mail Geeks vs. ChatGPT to search out out about our ideas and opinions.

Comply with @emailjay_ on Twitter and attain out to him within the E-mail Geeks Slack group. And in the event you’re not already subscribed to E-mail Weekly from ActionRocket, do your self a favor and join proper now. When the ActionRocket staff isn’t utilizing their e-newsletter for cool inbox experiments just like the Wordle electronic mail, they’re delivering a wonderful assortment of curated content material for entrepreneurs of every kind.

Whilst you’re in a subscribing temper, why not subscribe to E-mail on Acid’s YouTube channel? That approach you’ll by no means miss an episode of Notes from the Dev.

Writer: Megan Boshuyzen

Megan is a graphic designer turned electronic mail developer who’s labored on all elements of electronic mail advertising and marketing. She believes good emails for good causes make a constructive distinction on the planet. Megan is presently working as an electronic mail developer for Sinch E-mail. Go to her web site and be taught extra at megbosh.com.

Writer: Megan Boshuyzen

Megan is a graphic designer turned electronic mail developer who’s labored on all elements of electronic mail advertising and marketing. She believes good emails for good causes make a constructive distinction on the planet. Megan is presently working as an electronic mail developer for Sinch E-mail. Go to her web site and be taught extra at megbosh.com.


Please enter your comment!
Please enter your name here