Utilizing Conditional HTML/CSS for Enhanced Outlook Emails on Office 365

One interesting feature of Microsoft Outlook is its support for conditional CSS, allowing developers to create markup and styling that is specifically designed to render on Outlook. Despite the claims, I found that the following snippet, intended to be hidden across all Outlook clients, remained visible in my testing across a variety of devices and Outlook versions.

While I do not have access to a Windows device, which may be a contributing factor to the issue, theoretically this should work across all versions of Outlook, not just the Windows version. I am currently using an Outlook account with an Office 365 subscription.

My testing included Outlook Desktop macOS 16.83.2, Outlook Webmail on the latest version of macOS Safari, and Outlook iOS 4.2411.0. Despite my efforts, the text in question was consistently visible across all platforms.

Screenshots for reference:

Screenshot from Outlook Desktop macOS 16.83.2:
https://i.sstatic.net/qbfvj.png

Screenshot from Outlook Webmail Latest on macOS Safari:
https://i.sstatic.net/ywxfT.png

Screenshot from Outlook iOS 4.2411.0:
https://i.sstatic.net/nkm6F.jpg

cssemailoutlookhtml-email

Answer №1

It's common to misinterpret this information since the guide you're following doesn't explicitly state it. The mention is specific to the Windows desktop version of Outlook.

Only the Windows desktop versions of Outlook utilize Microsoft Word as a rendering engine, hence the presence of this conditional code.

If you're looking for ways to target other versions of Outlook, you can explore various methods here. However, it's worth noting that these are seldom necessary for anything besides Windows desktop Outlook:

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

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code: <a-gltf-model color="#FFFFFF" width="1" height="1" de ...

javascripthtmlcssanimationaframe

Footer stays put as you scroll, peeking out from behind the main content

I'm trying to replicate the sticky-footer effect that can be seen on the website From what I understand, the footer needs to be fixed in place. The content should have a higher z-index. It seems like the body may need a margin-bottom equal to the ...

htmlcssfootersticky-footertwitter-bootstrap-4

Steps to implement provided information in a post within the header of a webpage

Recently, I started creating websites from scratch and I encountered a problem that I could use some help with. The issue is when I have a YouTube video embedded in a post, but I want to showcase the video in the header section of that specific post URL wi ...

javascripthtmlcssvideoyoutube

Field for user input featuring a button to remove the entry

I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to align images of the same size in a gallery using the margin: auto property

I have an image gallery within a div element named "container" with a specified width:70%. I need the images to be justified with auto margins. This is the HTML code I am using: (There are 4 images in total) <div class="container"> < ...

javascripthtmlcss

Overlay Image on Card, Overflowing into Card Body

I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it. Take a look at the demo: https://codepe ...

javascripthtmlcssbootstrap-4

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

width of the cells within the grid table

What is the best way to ensure the width alignment of cells in both the header and main section? I have highlighted the correct option in the image with green checkmarks. Check out the image here. Here is my example and solution: View the code on CodePen. ...

javascriptcssvue.js

Place the menu on top of the div by adjusting the z-index

Hey there, I'm working on a project and I need help with an issue. You can check out the example page here: If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown se ...

css

Tips for concealing the body description on the homepage of a blogger website

I want to conceal this description This is my blog and I am facing an issue where I need to hide the description on the home page. I have tried using color:white which worked initially, but when I moved the description to the top or left, the black backgro ...

javascriptjqueryhtmlcssblogger

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

cssreactjsnext.jscss-modulesframer-motion

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssanimation

Create an animated underline for two CSS tabs

I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...

jquerycssvue.jsbootstrap-4

Glowing effects on svg shapes

I'm looking to add a pulsing light animation around an SVG half circle shape that I have created. After experimenting with CSS and Webkit, the closest I've come is achieving a pulsing light around the parent element, rather than the actual shape ...

javascripthtmlcsssvgvue.js

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

c#htmlcssmudblazor

Switch the Ionic Slide Box to the "does-continue" setting

Currently in the process of constructing a slide-box containing numerous items. I've borrowed the code from the example provided here for an infinite number of items, and it's performing well. However, I have a considerable yet finite amount of ...

javascriptcssangularjsionic-framework

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

htmlcsstextalignment

When you hover over the Dropdown Menu, the Hoverable Dropdown Menu will automatically close

I am currently working on creating a dropdown menu that pops up when hovering over an item. However, I am facing two challenges: Once my mouse moves away from the item, the dropdown disappears. Therefore, I would like the dropdown to remain visible as lo ...

htmlcss

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

htmlcsstwitter-bootstrap-3