I am designing an HTML email and I've made it look as good as I can in the email clients I have tested. I'm checking it now it Outlook.com and it has some issues (probably because they don't support margins) so I want to add some conditional styles for that client.
I know that Outlook.com wraps the email in a .ExternalClass class and prepends any custom classes with ecx so I tried something like
* {color:black;}
.ExternalClass * {color:red;}
.ExternalClass .ecxMyClass {color:blue;}
.ExternalClass .MyClass {color:green;}
just to see what selector would change the color of the text. I can't get any of them to work. Also I can't find where my styles are defined using an inspector like Firebug..
According to http://www.campaignmonitor.com/css/ Outlook.com should support style tags in the head or body and should be able to use classes as selectors.
Pretty much all of my styles are defined inline but I want to add padding to an element only in Outlook.com so I can't just add it inline. How do I target my custom class element in Outlook.com?
I'd strongly suggest you remove the margins from your email and use padding or empty (nbsp) table cells instead. Both are 100% supported, and as you're beginning to discover, jumping through hoops for certain clients can get really messy really quickly. Empty table cells with nbsp's in them are the best option as sometimes padding can get removed if your subscriber forwards the email to someone else.
That being said, if you want to target Outlook and not other clients, there are conditional mso tags that can be used.
Not sure if it works for Outlook.com, but give this a try:
<!--[if gte mso 15]><!-->
// This will only be seen by Outlook 2013
<![endif]-->
CSS is a different ball game for Outlook. As I'm sure you've come across in coding for email, there are severe limitations and it's often better to scale back your expectations than try and make something work.
Here is a link to what CSS styles will work for various email clients
http://www.campaignmonitor.com/css/
Outlook.com will eat conditional comments, so none of the above will work properly.
See this thread for details of an alternate approach.
The mso tags doesn't work anymore apparently, try this css hack instead
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* This will be specific to outlook.com */
span[class~=x_outlook] {
color: #26d0ae;
}
/* This styling will work on the mobile apps of Microsoft Outlook (both ios and android) */
body[data-outlook-cycle] .outlook {
color: #26d0ae;
}
</style>
</head>
<body class="body">
Neutral
<span class="outlook">
This span is a chameleon
</span>
</body>
</html>
Related
I have a huge issue specifically with the browser version of Outlook (webmail) when sending emails.
All the solutions that worked in the past are no longer viable in 2022:
[owa] .foo {
background-color: red !important;
}
[class="x_foo"] {
background-color: red !important;
}
I have also tried all kinds of conditional tags, but they just don't work in browser either:
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
Is there any known hack to target Outlook in the browsers in 2022 (Outlook.com)?
Outlook.com webmail can be targeted like so:
[class~="x_your-class-name"] {
/* Replace this comment with your styles */
}
According to "How to target email" https://howtotarget.email/
Outlook.com prefixes class names with x_ but doesn’t do this on
attribute selectors. So can be targeted
with [class="x_your-class-name"] and it’ll only apply to Outlook.
There are other issues specific to Outlook webmail, so be sure to check this common one out first: Outlook stripping styles from <head>
I've seen here and elsewhere that a recommended way to set up conditional comments to work with Outlook.com, but because of another known issue detailed below I'm getting blank emails. Referencing the two code examples below I wanted to see if anyone had a reliable way around this issue.
First example:
<!--[if mso]><!-- -->
<style type="text/css">
#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }
</style>
<!--<![endif]-->
The above code causes a blank screen in Outlook.com even though other posts here have cited that <!--[if mso]><!-- --> works with Outlook.com. I know there is any issue with having any HTML tags inside comments, but if the conditional is placed with the style tag it doesn't work either. Strangely the code below seems to work to a degree.
<!--[if mso]><!-- -->
<style type="text/css">
#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }
</style>
<![endif]-->
I should also note the reason I have this code is for Outlook 2000 and 2003 compatibility so I can't use media queries as an alternative solution.
Those sites that say you can do that are wrong. Outlook.com eats your conditional comments, and anything inside of them. Gave me quite a headache for a while.
For things where you need to use conditional comments, I found the best thing to do was to have the regular conditional comment section, but also include another table row / column or what have you with a class like class="outlookcom" (on the td) and hide it with display:none. Then, in your <style> tag you can target that hidden row with ecxoutlookcom (outlook prepends 'ecx' to all of your classed tags) and use display:block !important to show itfor outlook.com
I tried this, but it didn't work for me. It was showing stray comment tags onscreen.
<!--[if !gt mso 9]><!-- -->
/* css here */
<!--<![endif]-->
<!--[endif]-->
This is what worked for me. I tested it on email on acid. Seems to work perfectly.
<![if !mso]>
<div>
This shows on all clients but not outlook 2007, 2010, 2013.
Works fine on outlook.com.
</div>
<![endif]>
<!--[if gte mso 9]>
<div>
This only shows on outlook 2007, 2010, 2013
</div>
<![endif]-->
I
for more info, try searching for "microsoft downlevel revealed conditional comments"
I don't know if using CSS to hide/show is the best route to go since not all email clients will process/honor that css (I tested a version in the Outlook windows client and it didn't work). I think the reason Outlook.com is consuming the conditional branching is because the syntax people are using is slightly off. When I corrected my syntax, the code rendered correctly in both Outlook.com and Outlook the windows client. I also tried the iphone Outlook app, the iphone built in email app, and icloud (web) and the code renders correctly.
One thing to note is that if you are using razor script on IIS, be sure to wrap the if !mso in elements so IIS knows not to process it as razor script. Here is my code snippet:
<!--[if mso]>code to render in the Outlook client<![endif]-->
<text><!if !mso]>code to render in Outlook.com<![endif]></text>
Thanks to the hint given in the OP I just discovered a potential fix to the "blank outlook.com" problem: double end comments.
Instead of this:
<!--[if !gt mso 9]><!-- -->
/* css here */
<!--<![endif]-->
try this
<!--[if !gt mso 9]><!-- -->
/* css here */
<!--<![endif]-->
<!--[endif]-->
It appears as though most web clients will ignore the last closing comment (it is still a valid comment block, after all), but outlook.com won't, thus you get all the email clients taking notice of the comment section and in the case of outlook.com this means no blank emails. Obviously use with caution but from my limited testing through Litmus it looks like it works just fine.
How would I go about troubleshooting why certain styles are not applied in IE9 ... I can see that they are crossed out when I check my firebuglight.
But in FF, the style is applied, which is what I want.
unfortunately, this is not my css or web app so I'm not familiar with the css.
My second question is this. I'm also noticing that in IE, the class is being "overwritten" multiple times. Meaning - I see the same class repeated in the list of classes, with different properties.
In FF, I only see it once. If FF looks good, can I assume that I can delete all instances of the class name in the css file, except for the one that FF shows in its firebug list?
Thanks.
EDIT 1:
Here's an example. In IE, I have the following 2 styles being applied to an tag.
Everything in the first style is "enabled" but in the second class, the color is disabled.
as is all the padding.
#websiteName {
color:#65605e;
float:left;
letter-spacing:1px;
padding-bottom:4px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
}
#websiteName {
color:#ffffff;
font-size:150%;
font-weight:normal;
margin:0;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
text-align:center;
width:auto;
}
However, in FF, this is what I see for the same class:
#websiteName {
color:#FFFFFF;
font-size:150%;
font-weight:normal;
margin:0;
padding:5px 10px;
text-align:center;
width:auto;
}
So in my css, I searched to find all instances of this class. And I found the following embedded in a big long string of css code:
#webLogo{display:block;width:25%}#websiteName{color:#65605E;letter-spacing:1px;padding:11px 10px 4px;float:left}.dir-rtl #websiteName{float:right}#someotherclass{}
and also this, also embedded in amongst other css class definitions.
#websiteName{color:#FFFFFF;text-align:center;width:auto;font-size:150%;font-weight:normal;padding:5px 10px;margin:0}
The second code snippet appears after the first.
EDIT 2:
I randomly decided this afternoon to change my monitor for my computer that has IE running on it and guess what? VOILA! The site now appears the same in IE as it does on my FF machine.
Im' just a css newbie so I'm not sure if this correct, but i started look for media queries in my css to see if it was detecting browser sizes somewhere.
I haven't found anything yet but can you give me any other ideas as to what might be going on?
Thanks.
For "troubleshooting why certain styles are not applied in IE9 "; before letting what-so-ever-tool try to help you, read AND understand this : http://www.w3.org/TR/CSS21/cascade.html.
Focus on point 6.4 The cascade (precedence)
Style sheets may have three different origins: author, user, and user agent.
Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.
For your other question : firebug can be 'setUp' to 'Only show applied styles', 'Show user agent style'. Try those to show/hide at your preference. Also, if you declare something like this :
div, td, span, .selector, a {
color:red;
}
...
<td>
<div>
<span>
text link
</span>
</div>
</td>
...
then you inspect an anchor within a span, within a div within a td, Firebug will show you 4 times the style applied (due to your firebug settings)
Chances are the reason they are crossed out in IE then applied with new styles is they are using IE specific values for those css rules, which will overwrite any existing style. Same goes with firefox, you might be seeing MOZ only rules for instance as IE cant do everything Firefox can so IE is ignoring that css. If you have a example it might help.
I'm working on a web page in Google Chrome. It displays correctly with the following styles.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.
Now if I submit a form and some validation error occurs, I get the following stylesheet:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
If <!DOCTYPE> is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.
Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).
Marking the document as HTML5 by the proper doctype on the first line, solved my issue.
<!DOCTYPE html>
<html>...
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements.
It is also common to use a CSS Reset to normalize or remove inconsistencies between browsers due to differences between which base styles are applied by each browser.
From the specification...
A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language. ~ The Cascade.
For more information about user agents in general, see user agent.
Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them:
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9
Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.
Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.
Some browsers use their own way to read .css files.
So the right way to beat this:
If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file.
Remember that the commands writen in the .html file is stronger than the command in the .css.
I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.
I went back and checked my <head> section and my CSS link was like below:
<link rel="stylesheet" href="ex.css">
I included type in it and made it like below:
<link rel="stylesheet" type="text/css" href="ex.css">
My problem was solved.
I just wanted to expand on the response from #BenM based on what I read here from Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.
I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.
The problem went away once I added styles like border: none, etc.
So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.
Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults.
Because you have not specified values for the table element’s box, the default styles have been applied.
I ran into this same issue, it was because I was working with non-semantic html
<!--incorrect-->
<ul class="my-custom-font">
<button>
<a>user agent styles applied instead of my-custom-font</a>
<button>
</ul>
<!--correct-->
<ul class="my-custom-font">
<li>
<a>now inherits from from my-custom-font</a>
</li>
</ul>
Once the HTML was updated, styles were applied correctly
Every browser will have a rendering engine responsible for converting HTML document to web page.
The rendering engine will have a stylesheet of its own for all the HTML elements, a kind of default stylesheet for all the HTML elements and this stylesheet is called user agent stylesheet.
The rules of user agent stylesheet can be overwritten by author stylesheet.
The rendering engine for google chrome browser is called 𝐛𝐥𝐢𝐧𝐤. And if you look through its source code you will be able to find the default stylesheet.
check this https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop
I have a solution. Check this:
Error
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
Correct
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Put the following code in your CSS file:
table {
font-size: inherit;
}
I was checking out some of Amazon's CSS and noticed they have HTML commented out a chunk of CSS. I know there is conditional formatting for Internet Explorer with HTML comments, but I am viewing this in Chrome. What is the purpose of it?
Oh, I should note that these styles are actually being applied.
<!-- BeginNav -->
<style type="text/css">
<!--
.nav-sprite {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/BeaconSprite-US-01._V141013396_.png);
}
.nav_pop_h {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-h._V155853593_.png);
}
.nav_pop_v {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-v._V155853593_.png);
}
.nav_ie6 .nav_pop_h {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-8bit-h._V155961234_.png);
}
.nav_ie6 .nav_pop_v {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-8bit-v._V155961234_.png);
}
.nav-ajax-loading .nav-ajax-message {
background: center center url(http://g-ecx.images-amazon.com/images/G/01/javascripts/lib/popover/images/snake._V192571611_.gif) no-repeat;
}
-->
</style>
It's created by someone who thought that visitors of the site use a browser which does not recognise <style> tags.
(Ancient) browsers, which do not recognise <style> tags, will not show "weird" characters (CSS rules) because of the HTML comments.
Most browsers recognise the <style> tag, so the developer seems to use <!-- --> out of (bad) habit. It should not be used.
Let's remember that not only browsers interpret HTML. E-mail clients also do this, and some of them use old engines or very strange rules.
Generally, this is some type of trick which is used when creating a template for HTML e-mails, so that if the e-mail is opened on the client who does not correctly interpret the <style> tag then the client should not display CSS styles in the body of the message. And more modern clients should interpret styles correctly, because <! - -> is not a comment for CSS, but only an incomprehensible syntax that should be ignored by the CSS parser.
In this situation, it can only be legitimatize only if we want to include CSS rules for Media Queries in the <style> tag. Otherwise, in the e-mail templates when we use ordinary styles, recommended is using the inline CSS styles.