Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Media queries should be left intact #14

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

Media queries should be left intact #14

marcohamersma opened this issue Jul 2, 2012 · 2 comments

Comments

@marcohamersma
Copy link

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
Copy link

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
Copy link
Author

@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
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rngtng @marcohamersma