PI
3
CSS3 Accordion in Email
Hi,
I found a nice solution to get CSS3 only accordions in email's:
http://responsiveemailpatterns.com/patterns/accordions/full-to-accordion.html.
The problem is, that only outlook.com (LOL) is supporting the css3 pseudo class :target https://www.campaignmonitor.com/css/.
This is a big problem for email clients which are supporting @media screen (e.g. Apple Mail 8) but not :target because the accordion content will be closed per default. Is there any way to detect if the email client is supporting the css3 pseudo class :target?
Regards
Philip
Can't think of an easy way to check for
:targetsupport as you can't predefine it.Also
:targetdoesn't have great support in email, but:checkeddoes.Have a look at this code from Fresh Inbox which will even work in Gmail. You'll need to play around with the code to get it working as an accordion rather than tabs but it should work.
Might be a better option for you.
Hi Marc,
thank you for your answer. I did't find
:checkedin the campaignmonitor css table. I'll check your links now.I'm not sure why you would want to hide content in emails (I'm not a fan of making emails into a mini-website)... but is this what you are looking for(sorry if this is patronising) https://www.campaignmonitor.com/css/
You're right, just because you can, does not mean you should. However I think people should at least experiment with it to get more dev interest in this space. IMHO the sad state of email standards support is due to an impression that email is some old school medium that isn't worth innovating on.
Thank's Marc! It isn't my idea to put an accordion to the email and believe me, I'm totally agree with you. I posted your link in my post too ;-)
HA, yeah i think we all get ideas from other people...and they're always 'great ideas' :)