Conditional HTML for the latest version of Microsoft Outlook, released in 2019

I am in the process of constructing an HTML code for a newsletter campaign. My main challenge is to come up with a solution for an if statement that generates code specifically for Microsoft Outlook 2019.

This code snippet works for both Outlook 2016 and Outlook 2019:

<!--[if mso 16]>
<span style="color:red">mso 16</span>
<![endif]-->

However, the following snippets do not work as expected:

<!--[if gt mso 16]>
<span style="color:red">gt mso 16</span>
<![endif]-->

<!--[if mso 19]>
<span style="color:red">mso 19</span>
<![endif]-->

<!--[if mso 365]>
<span style="color:red">mso 365</span>
<![endif]-->

Is there any way to use HTML conditionals to differentiate between Outlook 2016 and Outlook 2019?

Answer №1

It seems that Outlook 2019 uses the same conditionals as Outlook 2016, a fact that has been confirmed through testing on Litmus.

Furthermore, Outlook does not support feature sniffing like @supports (or the limited @media, except for the Mac version).

The only potential differentiator is that Outlook 2019 now supposedly supports SVGs. Although I haven't had success with this in my tests, it's worth noting that SVG support is generally lacking, so its usefulness may be limited.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: https://i.sstatic.net/kaRMO.png I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps- ...

Enable the ability to upload multiple images on a single page using droparea.js

I am currently utilizing droparea js for uploading images. However, I have encountered an issue where if I try to upload an image in one of the upload menus, it ends up changing all four upload menus simultaneously. <div class="col-md-12"> ...

Angular application's HTML Canvas unexpectedly changes to a black color when I begin drawing

Currently, I am developing an Angular application in which users can draw text fields on PDF pages. To achieve this functionality, I have integrated the ng2-pdf-viewer library and created a PDF page component that incorporates an HTML canvas element. Howe ...

Creating a stylish CSS shadow effect for a collection of elements

In my Ionic2 project, I have an <ion-list> consisting of various items. Currently, these items are plain, but I desire to add some styling such that each item in the list displays a subtle shadow effect, similar to the one shown in the first image of ...

Tips for effectively utilizing the page-break property within CSS

I am faced with an issue on my HTML page where multiple angular material cards are being displayed: ... <mat-card class="mat-card-98"> <mat-card-header> <mat-card-title>THIS IS MY TITLE</mat-card-title> < ...

What is the best way to align two navbar elements to the right in Bootstrap 5?

I've been attempting to position two elements at the end of the Bootstrap 5 navbar, but I haven't been successful. I've experimented with using ms-auto within a div that wraps around the login and sign up elements, but that hasn't work ...

What is the method to align my text to the top of the page?

I'm working on a 4-column page and trying to insert content. Everything is functioning properly except for getting my first div to align to the top in inline-blocks. As a newbie, I feel like I must be overlooking something simple. (I've tried usi ...

Deactivate hover effect on specific row in Bootstrap hover table

After searching for a solution, I came across this query. However, it did not provide the answer I was looking for. It suggested setting fixed backgrounds on specific rows, but this could potentially disrupt the style if, for example, a bg-gradient is set ...

Creating a unique bullet style using CSS

I've got a collection of student links that take users to their profiles, and I want to replace the usual circular bullet points with smiley faces. Each picture is 14x14 pixels in size. How can I use CSS to achieve this effect for the bullets? ul { ...

Tips for utilizing the pixel-based margin and padding properties in Bootstrap 4

Can Bootstrap's margin and padding properties be used with pixel values instead of rems in Bootstrap 4? For instance, if I want a div to have a margin-left of 20 pixels, can I do the following: <div class="container ml-20">Hi</div&g ...

What is the best way to combine this PHP, Javascript, and HTML document together?

My goal is to upload a CSV file exclusively using an HTML form and then save it in an array using PHP and Javascript. I have individual codes that work perfectly when used as separate files. However, when I attempt to combine them into one file, the Javas ...

Activate the cursor to point

Can someone help me with this code snippet? .file-wrapper { cursor: pointer; display: inline-block; overflow: hidden; position: relative; } .file-wrapper input { cursor: pointer; font-size: 100px; height: 100%; filter: alpha(opacity=1); ...

CSS styling not functioning properly

After spending a considerable amount of time on this issue... <div id="pager" style="top: 5px; position: relative; " class="pager" > <form> <img src="http://tablesorter.com/addons/pager/icons/first.png" alt="first" class="first" ...

Deleting a CSS class from buttons inside of two button arrays by utilizing two separate functions

Uncertain if the issue lies within the scope, but essentially... I have a collection of 4 div buttons stored in an array called main_btns. When these buttons are clicked, they toggle between 2 classes to display different background colors. Similarly, I ...

Implementing a distinct approach to adding margins to div boxes using

Hello, I've been experimenting with the developer tools in Google Chrome to add margins to my navigation bar. The goal is to create gaps between the boxes. Any assistance would be greatly appreciated! http://jsfiddle.net/3jp1d0fe/8/ CSS div.contain ...

Is there a way I can detect a browser timeout and display a custom error message?

My webpage in classic asp contains a link to a local IP address, shown below: <a href="http://192.168.1.89">Link</a> When the local IP address is not available, the web browser eventually times out and shows its own error message. I ...

creating a customized grid layout with Bootstrap 5

Is it possible to create a layout similar to the one shown in this image using Bootstrap 5? In addition, I would like to include an image inside every third item. How can I accomplish this with the Bootstrap grid system? ...

Tips for retaining the original text value even after clicking the submit button

import java.util.Map; import java.util.HashMap; import javax.servlet.ServletRequest; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org ...

Utilize Selenium with Eclipse (Java) to validate the CSS table border style

I'm currently conducting a form test that involves leaving mandatory fields empty to verify if the field displays a red border indicating it needs to be filled before proceeding. Below is the code snippet I have implemented so far: driver=new Firefox ...

encountering problems with error messages during form field validation in Express.js

When encountering validation errors, I would like to display the appropriate error message on the same jade page (i.e register.jade). If no errors occur, then I want to successfully store the data using the schema object and return to the home page. Howeve ...