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.

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

media queries are removed #13

Closed
GotenXiao opened this issue Nov 17, 2011 · 8 comments
Closed

media queries are removed #13

GotenXiao opened this issue Nov 17, 2011 · 8 comments
Labels

Comments

@GotenXiao
Copy link

Given the following sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            @media screen and (min-device-width: 480)
            {
                #content
                {
                        width: 480px;
                }
            }
            #content
            {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <h1>Hello world</h1>
        </div>
    </body>
</html>

I would expect the default border rule to be applied, and the media query hunk to be left alone (since it will only be parsed and used on compatible devices).

As a potential quick fix, pynliner could exclude processing of style or link blocks that have media query-like syntax, or are present and not screen.

@GotenXiao
Copy link
Author

Quick fix patch:

index 7d6fa52..13c2f27 100644
--- a/pynliner/__init__.py
+++ b/pynliner/__init__.py
@@ -29,6 +29,10 @@ class Pynliner(object):
     style_string = False
     stylesheet = False
     output = False
+    exclude_if_media = True
+    inline_media_types = [
+            'screen',
+            ]

     def __init__(self, log=None):
         self.log = log
@@ -151,6 +155,15 @@ class Pynliner(object):

         style_tags = self.soup.findAll('style')
         for tag in style_tags:
+            if self.exclude_if_media:
+                skip_tag = False
+                for attr_name, attr_value in tag.attrs:
+                    if attr_name == 'media' \
+                    and attr_value not in self.inline_media_types:
+                        skip_tag = True
+                        break
+                if skip_tag:
+                    continue
             self.style_string += u'\n'.join(tag.contents) + u'\n'
             tag.extract()

Obviously this doesn't try to parse the CSS itself, but this is probably an acceptable workaround for now.

@rennat
Copy link
Owner

rennat commented Nov 28, 2011

I like the approach you have taken here but I think we should look at applying this more generically so that any css that cannot be inlined will be left alone in a style element.

@rennat
Copy link
Owner

rennat commented Nov 28, 2011

What would be helpful here is building up tests for each of these cases where the css cannot be inlined.

I can write the tests but I am not aware of everything that can and can't be applied inline. I plan to research the specification further when I have time but as I'm not sure when that will be feel free to submit test cases or even a list of css declarations to test for.

@mrmch
Copy link

mrmch commented Jun 27, 2014

@rennat any updates on this? Happy to contribute if needed. Better support for media queries in pynliner would be grand.

@rennat
Copy link
Owner

rennat commented Jun 28, 2014

Nope. I've started, very slowly, on a complete refactor to address some of the reported issues so far (mainly the speed and limited support for templating languages without breaking the current API/tests) but I have not done anything with the current codebase related to this issue. I'll happily check out pull requests for it tho!

@oppianmatt
Copy link

+1 to merge the PR #38

Is this project abandoned? No commits since 2014, happy to help maintain if you need someone.

@rennat
Copy link
Owner

rennat commented Nov 4, 2015

not abandoned yet :) just maintained by busy people :(

@rennat
Copy link
Owner

rennat commented Nov 4, 2015

#38 does look good

@rennat rennat closed this as completed Nov 4, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants