DB1
Are there conditional statements for iOS?
are there Conditional Statements for IOs?
I'm trying to do some CSS animations in email - targeting IOs
I know i will have to have Conditional Statements to sniff out MS office, but i also need to sniff out WHO CAN see the animations (targeting apple)
Thanks!
There are a few ways to target iOS but if you're just after support for CSS animation you're better off using
@supports. It won't get you every email client that supports CSS animation but it'll cover the vast majority (including iOS 9+)thanks for the info
What happens with the info that isn't supported?
More details: I love this animated logo at the top of the page -https://www.minimamente.com/example/magic_animations/
I tested it in email - works in iOs but not much else
on non-iOs.. i get 4 dots.. sometimes vertical,, sometimes not...
SO... I need to hide the dots in emails that don't support it.. but how?
So in the html set up something like this
And in the css
So if animation is supported the fallback logo is hidden and the animation will show.
If all the animation styles are all in the
@supportsquery then the dots wont show unless they are supported, you just have an empty div.Looks great! THANK YOU
Worked in most test cases here on Litmus - except Thunderbird
so next question
are there Conditional Statements for Thunderbird (or tricks?)
thanks!
NEW
For some reason I can't comment on the last comment (below)
Thanks again Mark! great info and help ↓
Nested queries work in most places, there are a few cases where I've seen them not work. But probably no need to nest the code in this case.
I'm surprised Thunderbird didn't work, you can prefix code with
.moz-text-htmlif you want to target it specifically.Well this tag (@supports) is NOT supported in IE... lol
so all my work - doesn't work in IE... lol
You can target nearly any client.
If it’s any consolation, IE is an edge case (pun intended). Webmail clients like Outlook.com (5%) and Yahoo (2%) when combined with IE 11 (8.7%) are really small subset (% of %) of any audience.
Not sure what you are saying here "You can target nearly any client."
and ... when your sending out enterprise level quantities ... it is a big number, even if only a %
In addition to the excellent advice of Mark Robbins, you should consider that CSS animation is not limited to iOS. For example, Mail, Outlook and a few other desktop clients in Mac OSX also support animation because they too use the Webkit rendering engine.
You could try variations of @media screen and (-webkit-min-device-pixel-ratio:1) { } in addition to @supports ( ) { }. Just don’t nest them.
Thanks Charles - I didn't mean to say ONLY iOs... but more like .. "supported" -
when you say "don't nest" isn't using an @supports above of @keyframes nested?
I.E.
@supports (animation-name: example){
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 /
-webkit-animation-duration: 4s; / Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
in that example, the queries are siblings. i have seen articles that suggest an @ inside an @ can break in some clients – i think it was yahoo. so i simply avoid this. if @supports alone solves your case, then it doesn’t matter. if you need to nest, then thoroughly test.