By now most of us will be familiar with the media query below for progressive enhancement of email layout elements, such as CTA buttons, HTML5 video backgrounds and more.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Cool email clients can haz nice things! */

But I was thinking, is this a little bit dated these days? Specifically, vendor prefixes. Should we still be using them given its 2016 and the core of CSS3 has been standardised for a while? Are there alternative interpretations of the same media query with more standard usage of CSS3 properties that others are using in their campaigns?

In the current form the media query above would target most if not all Webkit clients. Fun fact, in a weird twist it also targets Windows Phone 8.1 (GDR1 and above) because Microsoft decided Internet Explorer/Windows Phone should look like an Android device and started parsing -webkit properties and converting them to IE counterparts. The Webkit clients this media query would target would include a vast amount that I won't go into listing. But not everything is Webkit, despite its wide spread usage.

Something that made me think about this was Firefox, I generally use Firefox as my main test web browser during development, thanks to its excellent developer tools (well my opinion anyway). It uses the Gecko rendering engine (which also applies to the Thunderbird mail client) and can also be targeted with this media query (of sorts):

@-moz-document url-prefix() {
/* Mozilla specific styles */

It is however a little hacky and interesting fact Yahoo Mail! actually chokes on this because the pre-processor essentially mangles it, leaving any CSS rules within it directly parsed by Yahoo Mail! in a <style> block having potentially undesirable and unexpected results for layouts.

There are alternative vendor prefixes for Gecko like min--moz-device-pixel-ratio:0 (No that -- is not a typo) to bolt onto the originally mentioned media query but that's more vendor prefixes!

I'd be interested in what the community thinks about this, how do you do progressive enhancement with media queries in email campaigns these days that cater for non Webkit clients that have CSS3 support?