January 29, 2024

The new Outlook on macOS

The new Outlook on macOS is here. Microsoft has been teasing new versions of Outlook under the codename “One” for a few years. And while both Windows and macOS versions have been available in beta for quite some time[1], the new version on macOS is now enabled by default. One of the biggest goal of Outlook “One” is to unify its support with Outlook.com (desktop webmail) and the Outlook mobile apps (on iOS and Android). While this is an excellent news for Outlook on Windows, finally moving away from Word as a rendering engine, this comes at a big cost for Outlook on macOS.

Out of the 272 HTML and CSS features tested on Can I email, the new Outlook on macOS supports 162 features (from previously 236). In our Email Client Support Scoreboard, the new Outlook on macOS falls from the 3rd position to the 23rd position.

The new Outlook loses support for a lot of advanced CSS properties, like animation, @font-face, and linear-gradient(). It also loses support for CSS pseudo-classes either completely (:not(), :nth-child, …) or partially (:hover, :checked, …), now working only on type selectors. (So a:hover works, but not .link:hover.) It also loses a lot of modern HTML support, like HTML5 semantics (<header>, <footer>, <main>, …) or responsive images with <picture> and srcset.

Here’s a full comparison of all the differences in support between the old Outlook on macOS versus the new Outlook on macOS.

Outlook Old macOS client Outlook New macOS client
animation Supported Not supported
@font-face Supported Not supported
@import Supported Not supported
@keyframes Supported Not supported
@media Supported Partially supported
@supports Supported Not supported
block-size & inline-size Supported Not supported
border-image Supported Not supported
border-inline & border-block individual logical properties Partially supported Not supported
border-inline & border-block longhand properties Supported Not supported
clip-path Supported Not supported
conic-gradient() Supported Not supported
filter Supported Not supported
max() Supported Not supported
min() Supported Not supported
gap, column-gap, row-gap Supported Partially supported
grid-template-* properties Supported Not supported
hyphens Supported Not supported
linear-gradient() Supported Not supported
list-style Supported Partially supported
list-style-image Supported Not supported
margin Supported Partially supported
margin-block-start & margin-block-end Supported Not supported
margin-inline-start & margin-inline-end Supported Not supported
max-block-size Supported Not supported
min-inline-size Supported Not supported
lch(), oklch(), lab(), oklab() Supported Not supported
CSS Nesting Partially supported Not supported
outline-offset Supported Not supported
overflow-wrap Supported Not supported
padding-block-start & padding-block-end Supported Not supported
padding-inline-start & padding-inline-end Supported Not supported
position Supported Partially supported
:active Supported Partially supported
:checked Supported Partially supported
:first-child Supported Partially supported
:first-of-type Supported Partially supported
:focus Supported Partially supported
:has() Supported Not supported
:hover Supported Partially supported
lang() Supported Not supported
:last-child Supported Partially supported
:last-of-type Supported Partially supported
:link Supported Partially supported
:not Supported Not supported
:nth-child Supported Not supported
:nth-last-child Supported Not supported
:nth-last-of-type Supported Not supported
:nth-of-type Supported Not supported
:only-child Supported Partially supported
:only-of-type Supported Partially supported
:target Supported Partially supported
:visited Supported Partially supported
::marker Supported Not supported
radial-gradient() Supported Not supported
scroll-snap Supported Not supported
Attribute selector Supported Partially supported
table-layout Supported Not supported
text-decoration-color Partially supported Supported
text-decoration-thickness Supported Not supported
text-orientation Not supported Supported
text-shadow Supported Not supported
text-underline-offset Supported Not supported
transform Supported Not supported
CSS calc() function Supported Not supported
CSS Variables (Custom Properties) Supported Not supported
word-break Supported Partially supported
align attribute Supported Partially supported
aria-live attribute Supported Not supported
<base> Supported Partially supported
<bdi> element Supported Not supported
<body> element Supported Not supported
<dialog> element Supported Not supported
<form> element Not supported Partially supported
hidden attribute Supported Not supported
<link> element Supported Not supported
<ul>, <ol> and <dl> Supported Partially supported
loading attribute Supported Not supported
<marquee> element Supported Partially supported
<object> element Partially supported Not supported
<progress> element Supported Not supported
required attribute Supported Not supported
HTML5 semantics Supported Partially supported
srcset and sizes attributes Supported Not supported
Embedded <svg> image Supported Not supported
target attribute Not supported Partially supported
HEIF image format Not supported Supported
Video as Image Assets Supported Not supported

From now on, we will only test new features and updates in this new version of Outlook. Any test done in version 16.80 or above is one the new version.

Rémi
@HTeuMeuLeu