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>
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
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>
We have a phone number at the top of our website, for customers to call us of course. I have the Skype plugin, which is handy and I've noticed other users have it too. But it throws off the design completely. I noticed the html of the webpage is altered with css styles. Is there a standard way to alter the appearance of the Skype phone numbers?
UPDATE: The phone number is altered with this span tag added around it:
<span class="skype_pnh_print_container_1359399953">
Then there's a ton of span tags after this which is the Skype menu when you hover your mouse over the phone number (hidden initially). I could override styles with this class, but I want to make sure I do this the proper way so that it works with different (newer) versions of Skype and all browsers (Skype might work differently in other systems?). Isn't there some official way of dealing with this?
body span.skype_pnh_container {
/* "body" is not really necessary */
/* here, but it increases CSS */
/* specificity – just in case ... */
display: none !important;
visibility: hidden !important;
}
body span[class^="skype_pnh_container"] {
/* override the 'skype' styling */
color: red!important;
background-color: green!important;
}
body span[class^="skype_pnh_print_container"] {
display: inline !important;
}
copy pasted from the net
Also, according to http://forum.skype.com/index.php?showtopic=78380 you can prevent it with the following META tag:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Carry on
Here's how I styled the Skype links:
a[href^="skype:"] {
color: white;
}
Personally, I don't see any additional markup like extra Skype span tags, so the above CSS code should work for any Skype call links.
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.
Firefox 3.5 now supports the nth-* pseudoclass, which was what I was using to target my css for Safari and Chrome. Now Firefox reads those too, causing minor layout issues. Does anyone know a way to specifically target FF 3.5+?
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ {
height:19px
}
How about this, I tested it in Safari 4 and the height is 19px, in Firefox 3.5 the height displays as 39px.
<style>
BODY:nth-of-type(1) #topsearch input[type=submit] /* Safari 3.1+ and Chrome */ { height:19px }
BODY:nth-of-type(1) #topsearch input[type=submit], x:-moz-any-link, x:default { height: 39px; }
</style>
CSS Browser selector lets you write CSS that targets specific browsers, without worrying about hacks. I cannot recommend it highly enough.
On a "religious" note, we shouldn't be using CSS to target any browser. Unfortunately due to IE being waaaay behind on supporting CSS features (and all the bugs) hacks have been applied to target CSS for a given browser.
The Conditional Comments that IE uses... although ugly... do provide a handy mechanism for targeting a browser (and version)... I almost wish other browsers supported this.
I've seen a few sites do this... which is an interesting approach to handling targeting of various browsers.
<head>
<style>
body.safari form input{
/*special styles for Safari*/
}
body.firefox form input{
/*special styles for Firefox*/
}
body.firefox.v3-5 form input{
/*special styles for Firefox 3.5*/
}
</style>
</head>
<body>
<script>
//run code here, that sets the class and or id attribute on the body tag...
</script>
In the long run, they are all hacks... it just depends what kind of hacks you're willing to live with ;-)
Incidentally the "BODY:nth-of-type(1) ..." syntax breaks YUI compressor's ability to minify CSS. Instead I use "body:first-of-type ...".
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
using http://rafael.adm.br/css_browser_selector/
just substitute this part:
is('firefox/2')?g+'
ff2':is('firefox/3')?g+' ff3'
for this part:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3')?g+' ff3'
that should do the trick
PS: if you want to also catch other 3.x versions you might want to add:
is('firefox/2')?g+'
ff2':is('firefox/3.5')?g+'
ff3_5':is('firefox/3.6')?g+'
ff3_5':is('firefox/3.8')?g+'
ff3_5':is('firefox/3')?g+' ff3'
This works:
#media screen and (-webkit-min-device-pixel-ratio:0){
#topsearch input[type=submit] { height:19px; }
}}
That targets newer WebKit browsers, and not Gecko or Trident.
A lot has changed in the last few years. For a Firefox 3.5+ hack, here is one I created for that purpose:
/* Firefox 3.5 and newer */
_:-moz-handler-blocked, :root .selector { property:value; }
To test it you can see these live along with many others for different versions of browser at my live CSS hacks test site here: http://browserstrangeness.bitbucket.org/css_hacks.html#firefox
Enjoy!