I am building out an email, and I wanted to use position:relative to position the links where I need them to be. The only issue is iphones are affected by this change. I would like to be able to exclude IOS from seeing this change and for them to see my code without the position tag. Is there any way to exclude iphones from a CSS property?
I've tested my code on litmus and every email client works except for all of the iphones. The ipads work and all of the major email clients work as well.
Yes, it's possible if you use a CSS media query. To use CSS for non IOS devices, use the following media query:
#supports not (-webkit-overflow-scrolling: touch) {
/* CSS for other than iOS devices */
}
also, to do CSS for IOS devices only, you can use:
#supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
I hope this answers your question :)
Related
Is there someway I can disable a particular CSS feature for my browser so I can view how the page will look in browsers that don't support that feature?
For instance I am using CSS grid. But I want to disable CSS grid feature in my chrome/firefox so I can see how my layout will look in browsers that don't support CSS grid?
using jquery you can detect which browser is being used by the website
if($.browser.chrome) {
$('#mytargetitemid').removeClass('.cssgrid')
} else if ($.browser.mozilla) {
alert(2);
} else if ($.browser.msie) {
alert(3);
}
this code removes the class tag of that item and hence css is not applied to it :-
$('#mytargetitemid').removeClass('.cssgrid')
hope this helps, revert if any confusion
you can check how many version of browsers support grid layout, compatability.
in IE browser you have the option to test as per versions but I doubt we have the same option in chrome.
This is just a hack and not a standard, but it could help -> #media-query swap.
All you need to do is to swap the queries, e.g.
Wrap your original query in #supports *not* (display: grid) {...} as if you're targeting non-grid browsers and of course, those browsers won't understand it anyway, then allow the other codes to run.
I've used the code from EmailOnAcid for implementing HTML5 video into e-mails, and it works in all clients,except for the standard mail client in iOS11.
https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email
The thumbnail of the video is shown, but it just keeps buffering, and never plays. The only way to get iOS11 to play the video, is by closing the e-mail app, and reopening it. Then it can play the video.
Is there a solution for this, or at least some CSS to target iOS11 to make a fallback?
There is a way to target iOS 11. Below is the code to target different versions.
Here's a media query that will target iOS 10:
#supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
/* Insert CSS here */
}
If you’d like to specifically target iOS Mail in the most recent version of Apple’s operating system—that’s iOS 11.0, 11.1, or 11.2—#support declarations combined with padding properties will do the trick:
Target iOS 11.0 & 11.1
#supports (padding-left:constant(safe-area-inset-left)) {
/* Insert CSS here */
}
Target iOS 11.2
#supports (padding-left:env(safe-area-inset-left)) {
/* Insert CSS here */
}
Source
Hope this helps.
Also videos are good to engage customers on their device and using plain text with link to videos is old school and just sending people away from your emails. You want them engaged in your emails and complete the journey they started.
its wrong to send html emails with embedded multimedia, you should send plain text with url link to media
I have a responsive site located here: http://wnmu.edu
Everything seems to be working just fine in all other modern browsers except IE9.
It seems like only certain #media queries are being recognize, even though they are in the same stylesheet. Take a look at this screenshot:
The menu "About WNMU, Current Students..." is visible, which is originally hidden in less than 480px screens. However, the hamburger menu is still visible. My css code seems pretty simple:
#media only screen and (min-width: 784px){
.banner #responsive_menu_toggles {
display: none;
}
}
I have capability mode off.
Thank you.
It looks like this question was asked once before, here.
Media query not working in IE9
Just in case anyone is crawling SO for an answer to this, the above
two answers aren't solving the core problem which is answered here -
CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to
disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
If you are curious I found this by searching google for ie9 #media css issues
Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.
Sigh of relief.
I'm working on the website: insectstings.co.uk, it's responsive and I've made some changes to the original theme.
For some reason in IE8 (maybe others) the menu is displaying as the responsive menu. I've tried changing the media query size but it doesn't help.
Also the main header image is far away from the body content, I've tried inspecting it but with no luck. I hate IE, everything displays fine in other browsers.
Try adding repsond.js to IE8 and below. It provides some media query functionality for IE: https://github.com/scottjehl/Respond
IE versions below 9 do not support media queries: http://caniuse.com/css-mediaqueries
The normal flow of CSS will take over, so IE8 will show whatever you delcare last in your CSS.
EDIT: You might want to read this article, which coveres targeting older IE versions with different CSS. I have been using this method for a while now and it works really well: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Is there any other way to achive this requirement.
I am using filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3); to rotate the page which works but if the content is long which does not print the pages properly.
Use a Print CSS. In your CSS you can set the #page property as shown below.
#media print{#page {size: landscape}}
The #page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is #Page { size:landscape} obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the #page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.