Fab Four: A technique invented by Rémi Parmentier, the fab four uses the calc() function, width, min-width, and max-width properties. The min-width property defines the column width on the desktop version while the max-width property defines them on the mobile version. The calc() function and the width property are combined as to “create a value bigger than our max-width or smaller than our min-width, so that either one of those propert(ies) is applied instead.”
lang: Justin Khoo writes of this hack: “…simulate CSS class selectors in Gmail by targeting attributes that Gmail does not strip such as the title attribute.” In my experience, this hack does not always work. My initial worries of accessibility with this hack were erased by Mark Robbin’s comments: “lang could affect accessibility if it’s read as a language but if you prefix it with `x-` it’s not read as a language so `lang=”fr”` is French but `lang=”x-fr”` means nothing.” Perfect! Just put an “x-” in front.
—-: I’m not sure who developed this hack, but I first saw it in the Litmus Comunity. It uses dashes in a hidden div to force the email to display the full width in Gmail App to bypass the mobile resizing.
img width em: Discovered by Mark Robbins, this hack combats the resizing antics of Gmail on iOS by using ems on the width and font-size properties for images so that when the font-size is increased, the image will be increased as well.
fake position: absolute: Posted on the Rebelmail blog, this hack works in modern email clients like iOS, Android, Apple Mail, AOL, etc. Absolute positioning is achieved with 3 nested divs. First, the container div, then one set to display inline-block and set with margin-top and margin-left, and lastly, the div doing the heavy lifting by being set at max-width and max-height set at 0. This div takes up no space on the page, but the overflow can still be seen, thus acting like position: absolute.
max-height:0: This property is used in conjunction with display: none; line-height: 0, font-size: 0, and overflow: hidden to hide content.
This post was inspired by Mark Robbins’ tweet.