maca
Media queries should be left intact
Even though not all mail clients support it, it would be great if media queries would remain intact in the email (for emails that scale better to mobile, for instance). At the moment it just takes the styles and applies them to the elements involved.
...
<style>
table .body {
width: 600px;
}
@media only screen and (max-device-width: 480px) {
table.body { width: 300px; }
}
</style>
<body>
<table class="body">
should be converted to:
...
<style>
@media only screen and (max-device-width: 480px) {
table.body { width: 300px; }
}
</style>
<body>
<table class="body" style="width: 600px">
etc…
+1 for the idea, but I wonder if this would work - doesn't have inline styles higher priority over internal style definitions? A quick google returned me: http://www.plus2net.com/html_tutorial/css-types.php
@rngtng: I guess that problem can be solved with more specificity, which in this case probably means using !important. I'd say that is an implementation concern.
As for ignoring media queries: It looks like this is a problem with the CSS parsers involved. I guess it would also be possible to isolate the media queries into a separate <style> block and leaving that one intact. Maybe by adding an attribute to it and filtering on that?
Seems like changing inline_style.rb#extract_css's first line to the following, will give us the desired result:
def extract_css
@dom.css('style:not(.ignore), link[rel=stylesheet]').collect do |node|
next unless /^$|screen|all/ === node['media'].to_s
node.remove
if node.name == 'style'
node.content
else
uri = %r{^https?://} === node['href'] ? node['href'] : File.join(@stylesheets_path, node['href'].sub(/\?.+$/,''))
open(uri).read
end
end.join("\n")
end
I can make a pull request, I'm just thinking about what attribute to filter on. We could also use something like data-dont-inline or something else. Any opinions?