Windows Outlook 07/10/13/16/19/21 and Office 365 only respects the first class on an element, and ignores child selectors when a second class is present

[jkupczak]

<style>
  .a { color: red; }
  .b { color: blue; }
  .c { color: yellow; }
</style>

<div class="a b c">Hello world</div>

Hello world will be displayed in red instead of yellow.

Additionally, children of elements using two or more classes can be affected.

<style>
  .text { color: red }
  .text td { color: blue }
  .padding { padding: 20px }
</style>

<table class="text" border="0" width="300">	
  <tr>
    <td>Text is blue</td>
  </tr>
</table>

<table class="text" border="0" width="300">	
  <tr>
    <td>Text is blue</td>
  </tr>
</table>

<table class="text padding" border="0" width="300">	
  <tr>
    <td>Text should be blue, but is red</td>
  </tr>
</table>

In this example, our third table should have its text colored blue, but instead its red. The .text style works, but the .text td style is ignored.

[JayOram]

Hasn't this always been the case? I feel like it was a choice from the beginning, not a bug. Happy to be corrected and even happier if Outlook changed!

[revelt]

Hasn't this always been the case?

Probably it was but personally myself and my fellow devs in all past places didn't notice — we always place CSS inline, manually, from the start, there are no classes applicable for Outlook. Actually, if you removed all classes and all head styles, email would still look reasonable in outlook. Especially now that fixes like .ExternalClass are not needed. Personally, I use classes for mobile layout, and even then, they are atomic so I don't have to type any. In practice that's around 14,000 variations of atomic CSS which distills into around 70-80 after unused removal..

[hteumeuleu]

This has definitely always been the case. And for what it's worth, it was always how IE6 and below behaved (disrepecting standards specifications). I think it has its place here as it's definitely something quirky, specific to emails and Outlook, that non-email developers might struggle to find informations on.

[jkupczak]

Hasn't this always been the case? I feel like it was a choice from the beginning, not a bug. Happy to be corrected and even happier if Outlook changed!

Yeah, this has always been the case. And as @hteumeuleu mentioned, it was like this in IE6 and below which the Word rendering engine is based on. I concede that this is not a bug in the traditional sense and leans more towards being labeled as a "quirk". But I think there are some things about Word/HTML4 rendering that should definitely be logged.

That said, there are several other quirks about coding for the Word engine. Not sure if this is a slippery slope in attempting to catalog them all as individual "bugs".

Three off the top of my head would be:

• Naturally inline elements can't be changed to block level.
• Block level elements can't be wrapped by an inline element (<a> around a <table> for example)
• Animated GIFs do not animate (excluding the recent buggy support added in '19 I believe).

I think logging these and other bug/quirks has value. Is this the best place?

[SpecOps12]

ℹ️ I found out, that Windows 10 Office 365 Outlook is also just reading the first class on an element.

[e1himself]

It's worth updating the title to also include Outlook 2021, along with Office 365 Outlook. As they do have this bug present as well.

[pbiolsi]

I assume from the example that this issue only effects styles that are not inlined… yes?

[https://www.kingarthurflour.com/sites/default/files/2020-07/king-arthur-baking-email-logo.png]https://kingarthurbaking.com/bake-joy Peter Biolsi he/him/his Email Marketing Program Manager

+1 (802) 299-2240 Ext. 222

100% EMPLOYEE-OWNED

From: Ivan Voskoboinyk @.> Date: Thursday, July 14, 2022 at 8:54 AM To: hteumeuleu/email-bugs @.> Cc: Subscribed @.***> Subject: Re: [hteumeuleu/email-bugs] Windows Outlook 07/10/13/16/19 only respects the first class on an element. (#75) CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

It's worth updating the title to also include Outlook 2021, along with Office 365 Outlook. As they do have this bug present as well.

— Reply to this email directly, view it on GitHubhttps://github.com/hteumeuleu/email-bugs/issues/75#issuecomment-1184413013, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADLJB6WDLLUB6OO5JUWFXUTVUAEW7ANCNFSM4KJK7XEA. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[e1himself]

I assume from the example that this issue only effects styles that are not inlined… yes?

Yes, that's correct. It only affects global stylesheets based on class selectors.