When creating dynamic HTML emails, you can progressively enhance a layout (on more modern devices) using CSS media queries. However, doing so requires repetitive boilerplate: wrapping the styles in a @media block and - super importantly - remembering to append the !important flag to every single CSS property in your style block. Since I plan to use CSS media queries in my ColdFusion custom tag DSL (Domain Specific Language) for HTML emails, I wanted to find a way to abstract the boilerplate.

View this code in my ColdFusion Custom Tag Emails project on GitHub.

What I ended up creating was a two-tier abstraction. At the lowest layer, I added a <core:MediaQueryStyles> tag which adds the @media block and injects the !important flag. Then, one tier above that, I created <core:MaxWidthStyles> and <core:MinWidthStyles> which further encapsulates some of the cruft.

#coldfusion #coldfusion #html