Outlook.com To Support Media Queries & Enhanced Accessibility


Microsoft has confirmed major news: Outlook.com will support media queries in early 2019 and has already made some accessibility improvements as well. Outlook.com briefly supported media queries on November 26th and 27th, which was first discovered in #emailgeeks Slack by Kristian Robinson, RΓ©mi Parmentier, and Mark Robbins.

It looks like https://t.co/ynP86JodiI is starting to support media queries. Not 100% consistent, so it must be some kind of A/B testing. But hey, hurray ! https://t.co/ynP86JodiI was the last major western webmail to not support media queries. #emailgeeks pic.twitter.com/HHEkXg03Zh

— HTeuMeuLeu (@HTeuMeuLeu) November 26, 2018

Unfortunately, we all saw this media query support end on November 28th. 😒

But just a week later, on December 7th, Microsoft confirmed this is a permanent forthcoming update that are still being tested. πŸŽ‰πŸ™ŒπŸ»πŸŽ‰

The features are still being tested by the Outlook team and aren’t available to all users, but should be rolling out to everyone in the next few months.

I jumped into testing the rendering update while it was live and here's what I found...

Which media queries are supported?

Supported types

Supported queries

Supported keywords

Where will they be supported?

This wasn't specified in the announcement blog post, but presumably both Outlook web apps of Outlook.com and Office 365.

Has targeting changed?

Under testing, Outlook.com was still reading empty attribute selectors, thus the targeting hack [owa] .foo { } still works.

But, now that Outlook.com supports WebKit targeting of @media screen and (-webkit-min-device-pixel-ratio: 0), it's no longer possible to differentiate Outlook.com from other WebKit clients like Apple Mail and iOS Mail, which is the exact same behavior today exhibited by the mobile Outlook apps. Moving forward, it's best to stop using WebKit media query targeting and instead use @supports for progressive enhancement targeting for Apple Mail and iOS Mail.

What accessibility improvements have been made?

Previously, Outlook.com stripped role and aria attributes on HTML elements. Setting <table role="presentation"> is helpful for screen readers in defining tables as presentational. ARIA attributes are helpful for screen readers to more accurately describe content and to display which email content for screen readers to read.

Anything else of note?

Outlook.com is no longer stripping the <input> elements of checkboxes or radio buttons, but the :checked pseudo-selector is not supported with classes or id's as that gets stripped (which is needed for interactive email). So, although that's not useful to us now, it does mean Outlook.com is one step closer to supporting interactive email.

πŸ‘ Thank you Microsoft

Kudos to the Microsoft-Litmus partnership for bringing about this change and for Microsoft being transparent about their rendering roadmap and a planned rendering update pre-release for the first time ever. Keep it up and keep improving.

Follow this blog for continued updates.

Like this article? Give it a share on Twitter.

EmailTees Logo

Official apparel for email geeks

Check it out ›

Subscribe to my newsletter

Get the latest news and resources in email design right to your inbox. It'll blow your table cells off πŸ’¨. Pinky promise.

Like this content?  Subscribe to my newsletter ›