Media Queries on Kindle Previewer

[AIR-WIZZ]

Rookie HTML/CSS user here...
Does the Kindle Previewer support Media Queries?
I have 2 seperate style sheets in my epub targeting:
>No Media Queries
>amzn-mobi
...in that order!
Kindle previewer is not using the mobi.css style sheet when Kindle device is selected.
It continues to use the CSS with no media queries.
Here is a snippet of my code in Sigil.

I've found limited material on media queries for eBooks. Is there a link to a good resource that someone can throw at me? I'd appreciate it.

Basically, I'm currious how you pro's are using Queries?
Are you making one epub that all eBooks are made from? For example, The epub file you make contains the style sheets for Kindle and Nook (Nook ignores media querie style sheets at the moment) or do you have an epub with out media queries for Nook, etc. and another for Kindle conversion with media queries in all CSS's?

[Oxford-eBooks]

I find that this:

@media amzn-mobi{
... insert your styles here...
}

Works if you put it in your main stylesheet.

[DiapDealer]

I've found limited material on media queries for eBooks. Is there a link to a good resource that someone can throw at me? I'd appreciate it.

The Kindle Publishing Guidelines explain four different methods of using the new special media queries (amzn-mobi and amzn-kf8), as well as samples/examples of each. Section 8 is what you're looking for.

I use one main css file to import the proper specific css file(s) based on media queries, myself. It offers me a lot of flexibility that way.

The main.css file:

@import url(../Styles/epub.css);
@import url(../Styles/mobi.css) amzn-mobi;
@import url(../Styles/kf8.css) amzn-kf8;

Then I only have to link to the main.css file in each of my html files:

<link href="../Styles/main.css" rel="stylesheet" type="text/css" />

I can then easily comment out the various lines of the main.css file to view the results (and of course, I comment out the epub.css line before building the mobi with kindlegen/previewer).

[Oxford-eBooks]

Originally Posted by Oxford-eBooks

I find that this:

@media amzn-mobi{
... insert your styles here...
}

Works if you put it in your main stylesheet.

I might want to retract this... seems it doesn't REALLY work.

[DiapDealer]

Originally Posted by Oxford-eBooks

I might want to retract this... seems it doesn't REALLY work.

But it does work (as long as the css you used can be properly converted to the mobi format). That style will only be view-able in the mobi-only portion of the resulting mobi. You'd have to switch the Previewer to 'Kindle' emulation to see the results, though. The 'Fire' emulation mode (default) won't use the parts identified with the 'amzn-mobi' media query.

[Oxford-eBooks]

I'm finding that the first style in the block is being ignored!

[DiapDealer]

It was working properly before the recent 2.4 Previewer upgrade. That I'm sure of. Perhaps they broke something? I'd have to do some testing.

[Oxford-eBooks]

Using MobiGen 6.2 command line, and Previewer 2.31

[Oxford-eBooks]

So, just for fun I installed Previewer 2.4, same results.
Anything wrong with using MobiGen, or is it wise to use KindleGen nowadays?

[DiapDealer]

Anything wrong with using MobiGen, or is it wise to use KindleGen nowadays?

Nothing "wrong," except that mobigen won't honor those amzn-kf8/amzn-mobi media queries at all. It knows nothing about them or the new KF8 format.

Just drag & drop the ePub containing those media queries onto the Previewer window, and it's built-in kindlegen will build the MOBI and correctly interpret the those new media queries for you (or the kindlegen command-line will do the same thing).

[AIR-WIZZ]

I almost forgot about this post. Got some great info out of these posts so let me update my issue with queries.
In the OP, you can see I assigned a Media string in the <style> section for amzn-mobi.
Everything is fine when I finish and preview in Kindle Previewer EXCEPT:

• EPUB doesnt validate

• EPUB doesnt work as an EPUB any longer

In other words, Most of the CSS is broken on the Nook or Aldiko or ADE, etc.

UPDATE: What I did at first was remove all @media jargon for epub version but it really bothered me that this wasnt working as everyone says it should.
Now I havent tried using @import (mainly cuz I dont fully understand it YET! Im a rookie, remember!?) but what I did do that worked was I simply removed the media="amzn-mobi" from the <style> tags in every sheet and simply put (example CSS) on a seperate style sheet:

@media amzn-mobi{
p {
	text-align:left;
	margin-top: 5px;
	margin-bottom:5px;
}
}

Basically, I've set my EPUB to display properly with no Media Queries on most epub readers, then I copy and paiste all the CSS to be modified to the other style sheet and reset the variables to old mobi.
Everything validates and works on all my machines as both epub and mobi. My end result is a validated EPUB that can be converted to mobi easily.

[luckyparrot]

@AIR-WIZZ
I'm where you were at the start of this thread. I understand what you're saying about putting the mobi css on a separate style sheet, but where in the html do you point the reader to the second style sheet?

I've found if I use no media queries, the epub looks and works great on Nook, Sony, iPad, Kobo, and Kindle Fire. With media queries (at the top of my css) it looks and works great on both Kindle formats and the iPad, but obviously breaks on the others. What am I missing?

[agomm]

Hey luckyparrot,

You point your html to all the stylesheets in the head of your html. If you've got more than one stylesheet, you'll need to create more than one link.

So let's say you've got your handy mobi stylesheet and one for everything else. You'll do one, then the other:

<head>
<style type="text/css" media="amzn-mobi" href="css/mobi.css" />
<style type="text/css" media="not amzn-mobi" href="css/standard.css" />
</head>

(where you replace the css/mobi.css and css/standard.css for the filepath to whatever and wherever you've named your files)

You can keep listing and listing and listing different queries and associated stylesheets if you wanted. Just make sure you test at every step along the way. Some devices (ahem nook) get jealous if you list someone else's stylesheet before theirs.

If you use @import or @media in your css, you shouldn't need a separate rule for everything not mobi, but if you really want to have everything in separate pretty categories, you can use not amzn-mobi to do that the same way you used amzn-mobi to target mobis.

[SusanM]

Originally Posted by DiapDealer

But it does work (as long as the css you used can be properly converted to the mobi format). That style will only be view-able in the mobi-only portion of the resulting mobi. You'd have to switch the Previewer to 'Kindle' emulation to see the results, though. The 'Fire' emulation mode (default) won't use the parts identified with the 'amzn-mobi' media query.

Both nested and external media queries work for me. I was wondering about whether commenting out for epub works well or whether best to use a separate file to convert through KindleGen. You haven't had a problems with Amazon with the epub.css?

[SusanM]

DiapDealder

Question: when I preview queries on Kindle Previewer or sideload on to Kindle for Mac and Kindle for iPad, results are that Kindle for Mac previews KF8 and Kindle for iPad and Kindle for iPhone preview/use mobi query both on devices and on Kindle Previewer. So conclusion: Kindle for iPhone and Kindle for iPad (not Kindle for Mac) use mobi query. However, someone said that they thought that when published, not previewed or sideloaded, that Kindle for iPhone and Kindle for iPad then use KF8. No idea why publishing would do this and Kindle Previewer wouldn't. Your experience? Anyone else?