Medienanfragen sind CSS-Codeblöcke, mit denen anhand einer einzelnen Formatvorlage unterschiedliche Formate auf spezifische Kindle-Geräte (oder eine Gruppe von Geräten) angewendet werden können. Amazon hat Medienanfragen implementiert, um Autoren die Optimierung der Benutzerfreundlichkeit auf unterschiedlichen Geräten zu ermöglichen.

Amazon empfiehlt die Verwendung von Medienanfragen nur zur Behebung von Problemen oder zur Optimierung der Benutzerfreundlichkeit. Medienanfragen können beispielsweise folgendermaßen verwendet werden:

• Erstellen Sie benutzerdefinierte hängende Initialen für bestimmte Geräte oder Gerätegruppen.
• Ändern Sie helle Textfarben (gelb, hellblau, rosa usw.) in dunklere Farben, um bei eReader-Geräten den Kontrast zu optimieren. Gleichzeitig können Sie die Originalfarbe auf Tablet-Geräten beibehalten.
• Vergrößern Sie die Schrift von Text-Pop-ups mit festem Layout auf eReader-Geräten separat von Tablets, um die unterschiedlichen Bildschirmgrößen zu berücksichtigen.
• Farbige Seitenränder auf eReader-Geräten und farbige Hintergründe auf Tablets können unabhängig voneinander dargestellt werden. So kann die ansprechende grafische Darstellung auf Tablets beibehalten werden, ohne die Leseerfahrung auf eReader-Geräten zu beeinträchtigen.

In diesem Abschnitt werden Möglichkeiten zur Verwendung von Medienanfragen beschrieben, mit denen die Leseerfahrung auf Kindle eReader-Geräten, Fire-Tablets und iPads angepasst werden kann. Sie können dieselben Prinzipien auf allen Kindle-Geräten mit unterschiedlichen Seitenverhältnissen anwenden.

Hinweis: Manche Medienanfragen verhalten sich in eBooks mit verbessertem Schriftsatz anders als in KF8- oder Mobi-eBooks.

Medienanfragen sind Teil des W3-Standards.

Richtlinien für Medienanfragen

Durch die Unterstützung von zwei neuen Medientypen können jetzt spezifische CSS verwendet werden, die auf dem Mobi- oder KF8-Dateiformat basieren: amzn-mobi and amzn-kf8.

• Verwenden Sie für KF8-CSS die Medienanfrage @media amzn-kf8. Dies gilt nur für das KF8-Format.
• Verwenden Sie für Mobi CSS die Medienanfrage @media amzn-mobi. Dies gilt nur für das MOBI-Format.

Die Formate @media screen und @media all gelten weiterhin für KF8 und Mobi.

Korrekte CSS-Syntax verwenden

Medienanfragen bestehen aus zwei Teilen: (1) Dem Selector, der die Bedingungen der Medienanfrage definiert, und (2) dem Deklarationsblock, der Anwendung findet, wenn die Bedingungen der Medienanfrage erfüllt sind.

Im Beispiel unten wird die blaue Hintergrundfarbe nur dann verwendet, wenn das Buch im KF8-Format vorliegt und das Seitenverhältnis des Geräts 1280 x 800 Pixel beträgt.

Beispiel:

CSS-Kommentar vor einzelnen Medienanfragen einfügen

Amazon empfiehlt das Einfügen von CSS-Kommentaren vor den einzelnen Medienanfragen, die das Zielgerät der Abfrage angeben. (Ein CSS-Kommentar beginnt mit /* und endet mit */.)

Beispiel:

CSS-Kommentare sind für den Kunden zwar unsichtbar, erleichtern aber die Navigation und Fehlerbehebung innerhalb des Codes erheblich.

Immer Nicht-Medienanfragen-Code für eReader-Geräte verwenden

Optimieren Sie den Code außerhalb von Medienanfragen („Standardcode“) immer für Kindle eReader-Geräte (u. a. Kindle Voyage und Kindle Paperwhite). Der Standardcode enthält die CSS-Werte, die auf eReadern angezeigt werden, wenn keine der Medienanfragen auf das Gerät zutreffen.

Medienanfragen unter Standardcode einfügen

Da CSS in der angezeigten Reihenfolge angewendet werden, muss Code für mehrere Zielgeräte (z. B. der Code device-aspect-ratio für alle Fire-Tablets) nach Nicht-Medienanfrage-Code eingefügt werden.

Im folgenden Beispiel definiert der Standardcode einen schwarzen Rand für alle Geräte und alle Elemente, die die blue_background-Klasse verwenden. Die nachfolgenden Medienanfragen entfernen den Rand und erstellen einen blauen Hintergrund auf Fire-Tablets und iPads für alle Elemente der blue_background-Klasse. Auf allen übrigen Geräten wird ausschließlich der schwarze Rand angezeigt.

Beispiel:

Im Beispiel oben wird der schwarze Rand, der im Standardcode für die blue_background-Klasse definiert ist, auf Fire-Tablets angezeigt, solange die border-Eigenschaft nicht überschrieben wird. Die Anweisung border:none in den Medienanfragen für Fire-Tablets und iPads stellt sicher, dass die Standardwerte dieser Eigenschaften überschrieben werden. Dies ist hilfreich, wenn Sie Standardcode für Kindle eReader-Geräte verwenden und keine farbigen Ränder auf Fire-Tablets übertragen möchten.

Code duplizieren

Definieren Sie in Medienanfragen nur die CSS-Klassen und Anweisungen neu, die für das entsprechende Gerät geändert werden müssen. Jeder Standardcode wird automatisch auf allen Geräten angezeigt, sofern er nicht durch eine Medienanfrage überschrieben wird. So muss Code, der für alle Geräte gelten soll, nicht wiederholt werden.

Im folgenden Beispiel soll ein farbiger Rand auf Fire-Tablets überschrieben und durch einen farbigen Hintergrund ersetzt werden. Gleichzeitig soll der Text auf allen Geräten rot angezeigt werden. Das Beispiel auf der linken Seite ist falsch, da auf die Wiederholung des Codes der .red_font-Klasse im Medienanfrageblock verzichtet werden kann.

Beispiel:

Medienanfragen verwenden

Die Tabelle unten zeigt Beispiele unterstützter Medienanfragen und CSS-Anweisungen, die auf KF8, MOBI und andere Reader angewendet werden:

Abwärtskompatibilität mit MOBI mithilfe von Medienanfragen gewährleisten

Medienanfragen ermöglichen die Anwendung komplexer CSS-Anweisungen für KF8 und einfacher CSS-Anweisungen für das Mobi-Format mit nur einer CSS-Datei. Dabei sind einige Richtlinien zu beachten:

• Komplexe CSS-Anweisungen für das Mobi-Format können überschrieben werden, indem dieselbe Klasse innerhalb der Medienanfrage @media amzn-mobi neu definiert wird.
• Laut W3C-Standard sollten Medienanfragen
  • als individuelle Anfragen unterhalb der allgemeinen CSS-Anweisungen eingefügt werden oder
    Beispiel:
    

    class1 {font-size: 2em;} @media amzn-mobi {.class1 {font-size: 3em;}}

  • Die Vorrangigkeit von Eigenschaften kann mit !important durchgesetzt werden.

    Beispiel:

    @media amzn-mobi {.class1 {font-size: 3em !important;}} .class1 {font-size: 2em;}

  
  

  CSS	CSS-Anweisungen für MOBI	CSS-Anweisungen für KF8
  p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px } ul { margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; } @media amzn-mobi { .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0; } }	p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px } ul { margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 0; font-weight: bold; padding-right: 0; )	p { font-style: normal; } h { font-weight: bold; } div.example { margin: 10px } ul { margin: 20px; padding-left: 30px; } .firstletter { float: left; font-size: 3em; line-height: 1; font-weight: bold; padding-right: .2em; }

Medienanfragen einfügen

Es gibt vier verschiedene Möglichkeiten, Medienanfragen einzufügen:

• Eine einzige CSS-Datei
• Verschiedene CSS-Dateien
• Style-Tags
• @import

Option 1: Eine einzelne CSS-Datei verwenden

Medienanfragen können unterschiedliche CSS-Anweisungen für MOBI- und KF8-Formate in einer einzigen CSS-Datei spezifizieren. Im Beispiel unten wird für das MOBI-Format eine andere .class1-Klasse als für die anderen Formate in derselben CSS-Datei angegeben.

Beispiel:

Option 2: Verschiedene CSS-Dateien verwenden

Medienanfragen können unterschiedliche CSS-Anweisungen für Mobi- und KF8-Formate in verschiedenen CSS-Dateien spezifizieren. Im Beispiel unten verwenden die Mobi- und KF8-Formate verschiedene CSS-Stylesheets, und die normalen CSS-Formate gelten für alle Medien.

Beispiel:

Option 3: Style-Tags verwenden

Medienanfragen können mithilfe von <style>-Tags unterschiedliche CSS-Anweisungen für Mobi- und KF8-Formate direkt spezifizieren.

Beispiel:

Option 4: @import verwenden

Medienanfragen können mit @import unterschiedliche CSS-Anweisungen für Mobi- und KF8-Formate direkt spezifizieren, um verschiedene CSS-Dateien einzufügen.

Beispiel:

Eigenschaft „display:none“ mit Medienanfragen verwenden

Um unterschiedliche CSS-Anweisungen für Inhalte im MOBI 7- und KF8-Format zu erstellen, können Sie in Medienanfragen die Eigenschaft display:none zuweisen. Die Unterstützung von display:none im Mobi 7-Format ist verfügbar in KindleGen 2.4 und höheren Versionen.

Beispiel:

Einschränkungen bei der Verwendung von „display:none“

Kindle beschränkt die Verwendung der Eigenschaft display:none auf Textblöcke mit bis zu 10.000 Zeichen. Wird display:none einem Textblock mit mehr als 10.000 Zeichen zugewiesen, zeigt KindleGen eine Fehlermeldung an.