ADE drops complete CSS stylesheets with media queries for EPUB2

[jderuiter]

Continuing this discussion here.

It looks like ADE drops complete CSS stylesheets when they contain particular media queries in EPUB2 files. I tested ADE 4.5 with several queries in the attached file (epub2-tests.zip). So far my observation is that when the query contains a feature with a numeric value it seems to break and the complete stylesheet gets ignored.

I could work around it by putting the media query in its own style tags. Would it be an option to have ebookmaker take care of this automatically, e.g. by filtering out the problematic media features? The media features are not part of CSS2 and the validator sees them as vendor extensions.

[eshellman]

Thanks, this is helpful. Does ADE do anything useful for any of the media queries? in other words, if we change all media queries to just all, would we be losing anything? doe it obey the orientation media query, because that could be useful.

[jderuiter]

It doesn't look like it does anything useful with the queries. Which probably makes sense as media features are not part of CSS 2, which is what is used for EPUB2 if I understand correctly. It seems it already considers the queries it doesn't break on as all. It's, for example, perfectly happy to use the CSS style inside a media query such as @media all and (doesnotexist). I'm not sure that's desirable behaviour though.

Changing all queries to all would mean we would have to be very careful when writing CSS. For example, I have some exceptions to display figures smaller when in landscape mode. Something like:

<style>
.illowp40,
.x-ebookmaker .illowp40 {
    width: 100%;
}
</style>
<style>
@media screen and (orientation: landscape) and (min-width: 500px) {
    .illowp40 {
        width: 40%;
    }
}
</style>

If the media query would be rewritten to all for EPUB2, the exception becomes the rule and the figure is always set to 40%. (If a parser follows CSS3 correctly and doesn't understand the query it should just ignore it.)

Edit: this might not be the best example as the x-ebookmaker class should fix this, but I think the idea still holds.

[eshellman]

@jderuiter does ADE ignore ALL CSS when you have something like (min-width: 500px) in the media query? of just the CSS in the style element where it occurs?

[jderuiter]

It does not seem to ignore all CSS. It looks like it ignores everything in the same CSS file. I think every style element gets its own CSS file, so in that case it would just ignore all the CSS in the same style element.

[eshellman]

Thanks! I've passed this tip on to the PPers. I think we won't need to do much in Ebookmaker.

[jderuiter]

As long as people know about this behaviour and how to handle this it should be fine. Maybe a warning might still be helpful? When users are unaware of this it could completely screw up the EPUB2 version.

[eshellman]

we could remove size based queries for EPUB2, but in the next major version