Media queries should be left intact #14

Open
marcohamersma opened this Issue Jul 2, 2012 · 2 comments

Comments

Projects
None yet
2 participants
@marcohamersma

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…

@rngtng

This comment has been minimized.

Show comment Hide comment
@rngtng

rngtng Jul 3, 2012

+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 commented Jul 3, 2012

+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

@marcohamersma

This comment has been minimized.

Show comment Hide comment
@marcohamersma

marcohamersma Jul 10, 2012

@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?

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment