Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Media queries should be left intact #14

Open
marcohamersma opened this Issue · 2 comments

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

+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

@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
Something went wrong with that request. Please try again.