search

magento-hackathon / Responsive-Email-Templates-with-CSS-Inliner

Idea from Kalen Jordan. We can take http://zurb.com/ink/ as a base.
https://github.com/orgs/magento-hackathon
31 stars 10 forks source link

There are some issues with the inliner library #1

Open kalenjordan opened 10 years ago

kalenjordan commented 10 years ago

Here's a side by side comparison of the same markup and CSS - one is using standalone CSS and the other is using the inliner. It's mostly fine, but there are some conflicts.

For example, it doesn't give td.wrapper precedence over table.column td as it should in order to properly apply the padding to the social medium column of buttons.

screen shot 2014-01-31 at 4 50 59 pm

kalenjordan commented 10 years ago

I tried using another library: https://github.com/christiaan/InlineStyle

It seems quite a bit better, but there are still some places where it gets it wrong. I'm beginning to get worried that if the CSS in-lining isn't bullet proof, there's kind of no point in using it.

Also, I'm pretty sure that you can't inline media queries. So if we're not going to rely on inline css for media queries (which will probably be the really import CSS for nailing the responsive experience), then what's the point?

screen shot 2014-01-31 at 5 18 21 pm

nickw108 commented 10 years ago

When using Ink's online inliner at http://zurb.com/ink/inliner.php the media queries are not inlined in the traditional sense, but are placed inside a