Recently, thanks to one of our customers, we had the opportunity to access a Chinese mailbox: QQ mail. The idea was to verify an email rendering following user feedback. We took advantage of this opportunity to conduct a series of tests and give you our opinion on this email client!
QQ Mail, a complicated program to debug.
When we think of email clients, we immediately think of Gmail, Outlook and so on.
However, in China, one of the biggest market players is QQ. It is therefore important to make sure your emails are rendered correctly on this environment if you want to communicate to this country.
QQ mail is an e-mail client which is very difficult to test for non-Chinese users. Indeed, to open an account with them, you need a Chinese telephone number to receive the login activation codes.
A Google search for information on "classic" (to us) email clients such as Gmail, Outlook and others is an easy way to find information. Whether it's about how they work, or about possible rendering problems that other people have already faced and responded to, at worst in English.
On the other hand, when you do such searches for QQ, the relevant answers that are found are... in Chinese. This is normal, and at the same time, it doesn't make life any easier for integrators who don't understand the language.
In short, as you'll have gathered, it's hard to find information on the QQ email client in English or French, and I'm happy to share the fruits of my investigations with you.
CSS properties and HTML attributes
Basic properties, QQ mail behaves very well. Not as good as a browser, but in terms of HTML functionality for email, it's clearly at the top of the range.
The most classic CSS properties (border, margin, padding, height, width...) to those whose operation is only moderately supported (border-radius, min/max-width, min/max-height...) to the most advanced (box-shadow, text-shadow, box-sizing, border-image...), everything behaves very well.
Managing background-image is good, as is positioning, even when using two background images simultaneously !
Almost all text properties can be processed without any problem, even the more exotic ones such as the writing-mode. One of the few text-decoration that does not pass is the text-decoration: blink. But since it's already not a CSS property that runs on all browsers, let's not throw stones at it, Pierre.
Images
Classic email image formats are supported: .jpg, .png, .gif (with animated gifs), but QQ also supports other formats such as .webp and .svg !
Advanced transformations are largely supported. The opacity works, as well as visibility and transform but filter is not taken into account. Admittedly, this is quite exceptional for an e-mail client.
Colors
Here, things get a little more complicated. In desktop mode, everything's fine; color declarations can be made in almost any way possible: hexadecimal on 3, 4, 6 or 8 characters (with transparency management), textual (example : h1 {color: red;}) , rgb, rgba, hsl and hsla. In short, comprehensive support on both mobile and desktop.
For the background-color, support for gradient is present.
Dark mode is not taken into account in the desktop version. The desktop webmail client forces clear rendering.
mobile specificity
In mobile, there are some special features to note. There is one class .mail_reader .readmail_item_contentNormal :not(a) which sticks a color: inherit and a background-color: inherit on certain elements, which severely hampers color support. It should also be noted that for mobile devices, the attribute bgcolor doesn't seem to work.
The properties background-color and color are supplanted by a background-color/color: inherit on some elements, such as dives, but behave correctly on others, such as table.
A possible bypass to use these properties on a
divor atdis to use css targeting or a!importantNeed help?
Reading content isn't everything. The best way is to talk to us.
Another annoying point is the dark mode. In mobile, dark mode is quite poorly managed, and often caused reading difficulties in my tests. This is due to the same behavior described above, which replaces background colors in some cases.
So a few awkward points for color rendering on cell phones, bearing in mind that there are work-around. But email integrators are used to finding solutions to this kind of bizarre behavior.
CSS selectors
CSS selectors behave well as long as you don't get into complex selectors. Things like #id, .class, .*, element element, element, element work correctly. On the other hand, selectors such as element>element or [attribute=value] do not pass.
Note that while some more advanced selectors such as [attribute] work on desktop, the support is slightly less good on mobile, but everything remains OK for basic selectors.
As far as pseudo-selectors are concerned, support is just average; selectors such as :first-child will work, while others like ::first-letter won't work. And unfortunately, the hover doesn't work either (well, it does on mobile, where it's useless because you don't have a mouse to hover over the elements...).
Advanced technologies
Carousel
The carousel does not work. No doubt because exotic input selectors are not taken into account. On the desktop, this also offsets the overall effect. Nothing serious, but the rendering is just a little less good (in addition to not working) depending on your carousel code.
Video and audio
The video almost seems to work, but there is a error message type "No video with supported format and MIME type found' issue" for the video. Is it a question of support (tested on .mp4 and .ogg)? Or a cookie and/or cache problem? In my research I read that clear cookies and cache could solve the problem. But given the difficulty of accessing a QQ box and the fact that this would force us to go through the login steps again, I haven't been able to test this possibility. And between you and me, I don't think video in email is in the cards just yet...
For audio, same type of problem. The audio player is displayed correctly, but nothing is triggered when the play.
Forms
Unsurprisingly, the forms do not work (get, post, etc.), although it should be noted that the display of form tags is good.
Remote font
Exotic Google typefaces work well.
Anchors
Internal anchors don't work. External anchors do.
Outlook comments
Outlook conditional comments are no problem for QQ mail.
Conclusion and opinion
QQ mail is clearly an easy-to-please e-mail client. Its support for CSS properties is much better than most email clients we're used to, and the few problems encountered on mobile can be worked around.
IOS and Android applications could not be testedtheir behavior could be even different!
So if you need to take QQ mail into account for your mailings, keep in mind the concern for color on mobile, and you should be fine. You'll have more Outlook problem 😉
