email-bugs icon indicating copy to clipboard operation
email-bugs copied to clipboard

Outlook 07/10/13 ignore inline styles that use !important

Open jkupczak opened this issue 6 years ago • 0 comments

Outlook 2007, 2010, 2013, and 2019 do not respect the !important declaration when used with inline styles.

<style>
  span { font-family: 'Times New Roman'; }
</style>

<span style="font-family: Arial !important;">
    Will display in Times New Roman
</span>

<span style="font-family: Arial, sans-serif !important;">
    Will display in Times New Roman.
</span>

<span style="font-family: Arial, sans-serif!important;">
    In this special case it will display in Arial. Here only 'sans-serif' is
    invalidated because it's connected to the `!important` declaration. Instead
    of the whole property being invalidated, only the last font is invalidated.
</span>

This bug is not exclusive to font-family, all inline styles are subject to this bug.

However, with font-family it will treat fonts that are directly touching !important (meaning no space separating them) as invalid. This essentially cancels out the font AND the !important declaration. As a result it won't invalidate your whole font stack.

Note that the !important declaration works as intended within <style> tags.

###Other !important Issues

You can use !important in <style> tags, but in at least Outlook 2019 a space between your property and !important is required for it to work.

jkupczak avatar Jan 09 '18 17:01 jkupczak