Weasyprint: Support media queries

[MattSturgeon]

I have the following line in a stylesheet:

@media only screen and (min-width: 480px) {  }
@media only screen and (min-width: 768px) {  }
@media print {  }

When I use this with WeasyPrint I get the following warning:

WARNING: Parse error at 1:8, expected a media type, got IDENT, IDENT, IDENT, (
WARNING: Parse error at 2:8, expected a media type, got IDENT, IDENT, IDENT, (

From what I can tell, the only keyword is not being recognised, so perhaps unknown media types produce a parse error instead of a more descriptive warning and only is an unknown media type?

only is intended to filter out older browsers who don't support media queries but do support comma-separated media types.

[liZe]

Media queries are not supported at all for the moment, it's a good feature to have.

[doekman]

Another use-case for media queries (just making my case to prioritize this issue):

With @media (max-height: you can for example select the first page (because the margins are bigger), and display a complex page footer (for example a table) with display:fixed that only shows up on the first page.

[liZe]

My bad, it's not a good first issue at all:

• layout needs a formatting structure,
• the formatting structure needs CSS rules (at least display)
• some CSS rules depend on media queries,
• media queries define different CSS rules for different pages,
• pagination is done during the layout,
• layout needs a formatting structure…

[liZe]

I've pushed a media-queries branch with initial work for supporting media queries.

Next steps:

• make style_for object change its _cascaded_styles and _computed_styles attributes for each page depending on the curent page attributes (mainly width and height), and cache them to avoid recalculation for known attributes,
• change the logic to use a different root_box for each page in Document._render, using the updated style_for object,
• change the resume_at attribute to be independent from the root_box (that's the really hard point).

[liZe]

I can't work anymore on this point for version 43, it's too long. If anyone is interested, I can help.

[liZe]

With @media (max-height: you can for example select the first page (because the margins are bigger), and display a complex page footer (for example a table) with display:fixed that only shows up on the first page.

We could even add a custom -weasy-page-name feature for that, instead of relying on page size :wink:.

[liZe]

We could even add a custom -weasy-page-name feature for that, instead of relying on page size .

And left/right pages, and page numbers, and…