Wouldn’t it be cool if you could create interactive tabs that work in email? Well here’s a technique to create tabs that work in the iOS and Android email clients as well as three out of four of the major webmail clients, and that includes Gmail (but not Gmail app).
Radio inputs, labels and the :checked pseudo-class
The tab titles are wrapped within labels and placed after an associated radio input element which are styled to be hidden. The tab titles then refer to the associated radio input using the “for” attribute so that clicking on the label activates the radio input with an id matching the value in the “for” attribute. That is the beauty of using radio and checkboxes and labels. We can activate any checkbox or radio element anywhere on the page by just referencing the id of the input in the “for” attribute of the label.
Then using the :checked pseudo class and adjacent (+) and general (~) sibling selectors, we can selectively bold the title and display the associated tabbed content.
This fairly simple technique works on mobile and webkit based clients such as iOS and Android but in order to make it work for Webmail – we need more tricks!
Getting it to work in Webmail.
The problem with Webmail is that we can’t use certain CSS styles.
Yahoo! Mail strips the general sibling selector (~) as well as renders the “for” attribute useless since it renames ids and classes but not the “for” attribute. Gmail, as we know strips classes and ids which also prevents us from using the for attribute. Outlook.com doesn’t support the CSS3 :checked pseudo class.
Fortunately we’ve got a trick that will allow this to work on three out of four of the Webmail clients: Yahoo! Mail, Gmail and AOL Mail. Unfortunately there isn’t a workaround for Outlook.com.
We can support Yahoo! Mail and Gmail using three tricks:
1) We place both the radio element and the tab content within the label. The reason for this is so we don’t have to use the “for” attribute. Clicking a label automatically activates the radio element nested within.
2) We nest labels, inputs and tab contents within each other like a set of Russian Matryoshka dolls. The reason we do this is so that we can leverage just the adjacent sibling selector (+) which requires that the activated and targeted elements be adjacent to each other – in this case the radio input and the span wrapper.
3) And finally we use the lang technique to allow embedded styling on the Gmail webmail client.
Fallback on non supported clients.
Finally we need to ensure that non supported clients (Outlook, Outlook.com, Gmail mobile app) don’t see a broken email. There are a few strategies to deal with this. The simplest solution is to completely hide all the tabbed content in non supported clients and that includes wrapping the tabbed content in Outlook conditional comments (You didn’t seriously expect this would work in the Outlook desktop client, did you?).
One way to hide tabbed content on clients that don’t support the :checked pseudoclass, we wrap the tabbed content with a div container and hide it, then put a checked radio input before the div and in the style block add a selector using the :checked pseudo-class to display the div container if the selector is matched.
Having all the content completely hidden is not ideal and a simple solution is to move Tab 1’s content outside the nested tabs and have it display by default but wrap all the content within a fixed height div with an overflow of hidden. This way, when Tab 2 is activated, Tab 1’s content is still displayed but no longer visible because Tab 2’s content has pushed it outside of the fixed height div.
An alternate way to deal with non-supported clients is to completely hide the tabbed content and display an alternate non-interactive layout as shown in this Shopping Carousel Example.