Hi,

Does Prince support media queries like

@media print and (min-width:700px) { ... }

as defined in http://www.w3.org/TR/css3-mediaqueries/#media1?

Our stylesheets use media queries for progressive enhancement.

Thanks,

Henning

No, currently Prince only supports basic media queries like "@media print" without conditional expressions.

According to this thread:
http://www.princexml.com/forum/topic/2299/media-queries-with-boolean-expressions?p=last&a#bot

"Prince 9 is now available, with support for basic media query syntax."

@media print and (min-width:700px) {} does not appear to work yet however...

At the moment the syntax works, but all descriptors return false, so min-width will not match.

So... I'll have to use 2 stylesheets for now.

Any timeline on when the descriptors will start working?

No, not at the moment. In particular, min-width is tricky to support as the page size can change, for example with a named page rule like this:

@page wide { size: A4 landscape }
table.big { page: wide }

This causes a cyclic dependency between style rules which is awkward to resolve.

I think saying "support for basic media query syntax" and meaning that putting in syntax will not work, but will not cause errors is a bit confusing. Thank you for adding the additional info about the descriptors returning false to clarify that it's syntactic rather than functional support.

Since media queries were made a W3C recommendation in 2012, responsive design has become general. With things like Twitter Bootstrap that provide grid systems, it makes sense to support media queries for things like min-width/max-width, even if support for cyclic dependencies needs to be excluded still.

I was hoping to use Prince as a solution where I could do layout development of some reports in the browser and then render the final result to pdf with Prince. It looks great in the browser, but due to this lack of support, Prince isn't going to be useful for me.

I do not know whether the money left on the table by not supporting is enough to make it worth the development resources to add support, but Prince looks otherwise promising enough for me to check back in a few months to see if there's progress.

+1 for supporting this feature!

Good news: today we are releasing Prince 11, which has extended support for media queries, including applying min-width and max-width if you have specified the --page-size command-line option. (This sidesteps the cyclic dependency of getting the page size from the CSS, which may itself be within a media query).

Oh, cool. Talk about good timing Thanks for adding support for it!

Greetings would there be much involved to make @media min-width and max-width work with current @page size / type? We have documents that have a mix of A4 portrait and landscape and occasionally A3 within the same document.

That would be awkward as it could lead to cyclic rules, since @page can be nested within @media.

If you are using an element that specifies a named page to change the page size, then you could just use a selector to match the descendants of that element.

Thanks mikeday, to make things interesting this in relation to the header per page styling. Members of the body specify attributes that we select on to set the @page properties

@page a4-portrait {
size: A4;
... margin etc...
}

div[data-page='a4-portrait'] { page: a4-portrait }

We have a complex header element that based on page size and orientation would like to style differently.

Afaik I can't go

page[name='a4-portrait']

or

page[size=A4][type=portrait] .headerclass

{
... a4 portrait header styles...
}

Right, if you are flowing an element from the document to the margin box then you would need to flow a new one each time you change page size, I'm afraid.

Was coming to that conclusion, thanks for your help

Are media queries supported yet?

I'd prefer to have an @media page {} over injecting a second override sheet from CLI

John Haugeland is http://fullof.bs/

They've been supported for years! Normally @media print, though.

Ok, so ... I'm surprised this doesn't do what I expect.

@media page {
body { background-color: red; }
}

Am I doing something obviously stupid?

John Haugeland is http://fullof.bs/

The default media type is "print" and the media query feature you are thinking of is "paged"?