I've encountered something that bugged me while testing my email marketing campaigns.
So here goes:
I use the following code so that images and some other bits won't print when a user prints the e-mail (It is for a hotel group so emails are printed often, with booking numbers and all).
<style media="print">
body { background-color:#FFFFFF; }
.no-print { display:none; }
</style>
Now, outlook 2007/10/13, aol mail and some other clients seem to consider themselves as printed media and apply the display:none rule on every no-print element, leaving the email in a dire state of emptiness.
I could remove it all completely, but that wouldn't be good practices for ecology.
Do any of you guys know of a work around?
Like a way to force outlook to consider itself as a screen media?
Thanks a lot.
Now that I have a better understanding of the question I think I found the beginning of a possible solution for you. This should ensure the printer style sheets CSS still work, but aren't displayed by clients, like Outlook 2007, when they shouldn't be.
Ran test with email 'as is' and sure enough Outlook 2007 was blank because it applied the print style sheets
Then I added this media query in the code example below
Outlook 2007 shows up with the other clients so it's ignoring the print stylesheet
Now in Google Chrome's print preview the text with .no-print doesn't display
Code Excerpt:
<style media="print">
#media only print {
body { background-color:#FFFFFF; }
.no-print { display:none; }
}
</style>
</head>
<body >
<h1 class="no-print" style="font-size: 36px">LINE OF TEXT</h1>
Email Testing Link: https://litmus.com/pub/49bfd3b
Related
I was just working on a site where we had to add the ability to print the pages. We noticed that the link URLs are plastered all over the page like bad graffiti.
After reading this answer, it seems clear that some framework I'm using (which isn't bootstrap or foundation, maybe material.io?) must be adding this in.
Why would this be a good idea? It seems that if the user wanted to print the page, they want a print out of what they are seeing, not a bunch of other random garbage. Googling around I mostly find lots and lots of articles about how to stop this behavior so at the very least it seems like something people are looking to get rid of by default rather than add.
My question is, who thought it was a good idea in the first place to deliberately add this, and why?
Also, if this question is better on another stack, let me know.
Many frameworks use an #media print query in the CSS to display the underlying URLs of the links on the page when the page is printed. The purpose of this is to display the URLs of the links on the page so readers can see/visit the links, if needed.
To do this, the CSS will contain an #media query along the lines of:
#media print{
a:after{
content:" (" attr(href) ") ";
}
}
which has the effect of (emulated to work in the browser here):
body {
font-family: Arial;
}
a {
text-decoration: none;
color: blue;
}
/*
This would be #media print to work for print
Using #media screen here for demo purposes
*/
#media screen {
a.print:after {
content: " (" attr(href) ") ";
}
}
<strong>Screen</strong>
<p>View the answer on <a class="normal" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages?noredirect=1#">Stackoverflow.com</a>.</p>
<br/>
<br/>
<strong>Print</strong>
<p>View the answer on <a class="print" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages">Stackoverflow.com</a>.</p>
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.
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>
It seems like there should really be an easy solution to this, but so far I've been unsuccessful in finding one.
I'm using Zurb Foundation and I'm basically creating a live form that takes inputs from a form (above), and fills in a content (below) using angular.js. Users will then print the page to a PDF. I'd like to maintain the layout I have for the content below, and I'd like to hide the form above when printing. Zurb has a fine "hide-for-print" css rule that seems like it should work just fine when applied to the form above, but when I toggle print stylesheets, it basically strips all CSS and goes back to ugly.
Suggestions?
What I have done in these type situations is use a separate file for the print.css.
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
If the browser is printing, the global.css file will be loaded first and than the print.css file will overwrite anything aftewards.
Keep in mind though, that all background: * rules will be turned off in all browsers by default when printing, so some styles are going to be compromised regardless.
Have you tried using CSS media queries for print media?
.foo {
height:150px;
width:150px;
background-color:#F00 // see what I did there?
}
.bar {
height:10px;
width:50%;
border-radius:5px;
background-color:#000
}
.baz {
width:100px;
height:150px;
background-color:#FFF;
}
#media screen {
.baz {
display:block;
}
}
#media print {
.baz {
display:none;
}
}
Now, only some of .baz's properties are targeted by the media queries. You can feel free to put in any of .baz's properties inside or outside of the queries themselves. Likewise, you can put all of .baz's properties in the media query, but I gather that's not what you're looking for.
idk about zurb's print style sheets, and without an example, it's pretty hard to answer, but you can use weasyprint, open source library to convert html/css to pdf https://github.com/Kozea/WeasyPrint
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.