Log in / Register

Forum › Bugs

Media queries with boolean expressions

nico
Hello,

It seems that Prince doesn’t understand media queries with boolean expressions inside whith @media. Do you have a workaround that works with @media ?

Regards,

Nicolas




<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Media test</title>
	<style>
		@media print, not amzn-mobi, not amzn-kf8
		{
			/* doesn’t work */
			.c1 { color: red; }
		}
	</style>

	<style media="print, not amzn-mobi, not amzn-kf8">
		/* works */
		.c2 { color: blue; }
	</style>

</head>
<body>
	<a href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708/">Media queries</a>
	<p class="c1">Media test</p>
	<p class="c2">Media test</p>
</body>
</html>
mikeday
It looks like you have found the workaround already, to use the media attribute on the style element? :)
nico
Yes it works with the style element but I prefer working with the @media css selector, because it is easier to maintain all declarations in a single external CSS file. I don’t understand why one solution is working and not the other. Do you think there is a workaround to make it work with @media ? Is it a Prince bug, or am I missing something ?
mikeday
It's just a side-effect of the way we have implemented it. We actually don't support boolean media queries in either format, but for the media attribute they are ignored, while in the CSS syntax they cause the entire block to be ignored. In the future we will support full media queries.
nico
Nice. Can you tell me in which release it is planned to be avalaible ? Can you also tell me if you plan to add a selector like "@media prince" ?
mikeday
We will support basic media queries (eg. the "not" keyword) in the next release. We hope to release a preview version soon. At the moment I would prefer not to add "@media prince", as it should not be necessary. We already have "@media print", and browsers will ignore unknown Prince-specific CSS rules anyway.

By the way, I am wondering how this @media rule is supposed to work:
@media print, not amzn-mobi, not amzn-kf8 { ... }

It seems that the "print" is redundant, as it will already match the other two options, as will screen and every other possible media type besides amzn-mobi and amzn-kf8.
mikeday
Actually it's worse than I thought: you should only use "not" at most once in a media query list, otherwise it makes no sense. For example, this will match all media types except "X":
@media not X { ... }

But if we add one more clause:
@media not X, not Y { ... }

This will now match all media types, including X and Y! Because "Y" matches "not X" and "X" matches "not Y", so it's exactly equivalent to "all". Unless I'm terribly mistaken, there is no way to write a media query list that matches all media types except two.
mikeday
Prince 9 is now available, with support for basic media query syntax.
nciske
Is there somewhere where "support for basic media query syntax" is defined?

I'm trying to get this working without luck:

@media all { }
-- works

@media all and ( min-width: 7in ) { }
-- does not work... but is it the and, or the min-width?

I have a PDF that exported at 4x6 and 8.5x11 (same X/HTML) and I'm trying to have a single style sheet for both... can I do that with Prince 9?
mikeday
At the moment the syntax works, but all descriptors return false, so min-width will not match.

Since you will need at least two different style sheets to set the @page size, you could put the different rules there.