Medienanfragen sind CSS-Codeblöcke, mit denen anhand eines einzelnen Stylesheets unterschiedliche Formate auf spezifische Kindle-Geräte (oder eine Gruppe von Geräten) angewendet werden können. Amazon hat Medienanfragen implementiert, um Autorinnen und 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 kann jetzt spezifisches CSS verwendet werden, das auf dem Mobi- oder KF8-Dateiformat basiert: 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 Stile „@media screen“ und „@media all“ gelten weiterhin für KF8 und Mobi.

Korrekte CSS-Syntax verwenden

Medienanfragen bestehen aus zwei Teilen: (1) Dem Selektor, der die Bedingungen der Medienanfrage definiert, und (2) dem Deklarationsblock, der bei Erfüllung der Bedingungen der Medienanfrage ausgeführt wird.

Im unten folgenden Beispiel 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 Kundinnen und Kunden zwar unsichtbar, erleichtern aber die Navigation und Fehlerbehebung innerhalb des Codes erheblich.

Verwenden Sie für eReader-Geräte stets Code ohne Medienanfrage

Optimieren Sie den Code ohne Medienanfrage („Standardcode“) stets 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-Befehle in der Reihenfolge in der sie stehen angewendet werden, muss Code für mehrere Zielgeräte (z. B. der Code „device-aspect-ratio“ für alle Fire-Tablets) nach Code ohne Medienanfrage eingefügt werden.

Im folgenden Beispiel definiert der Standardcode einen schwarzen Rand für alle Geräte und alle Elemente, die die Klasse „blue_background“ verwenden. Die nachfolgenden Medienanfragen entfernen den Rand und erstellen einen blauen Hintergrund auf Fire-Tablets und iPads für alle Elemente die die Klasse „blue_background“ verwenden. 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 Klasse „blue_background“ definiert ist, auf Fire-Tablets angezeigt, solange die „border“-Eigenschaft nicht überschrieben wird. Der Befehl „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 Befehle 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 Klasse „.red_font“ im Medienanfrageblock verzichtet werden kann.

Beispiel:

Medienanfragen verwenden

Die folgende Tabelle zeigt Beispiele unterstützter Medienanfragen und CSS-Befehle, die auf KF8, MOBI und anderen Readern ausgeführt werden:

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

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

• Komplexe CSS-Befehle 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-Befehle eingefügt werden oder
    Beispiel:
    

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

  • Die Priorität von Eigenschaften kann durch die Verwendung von „!important“ erzwungen werden.

    Beispiel:

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

  
  

  CSS	CSS-Befehle für Mobi	CSS-Befehle 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-Befehle für Mobi- und KF8-Formate in einer einzigen CSS-Datei spezifizieren. Im folgenden Beispiel 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-Befehle für Mobi- und KF8-Formate in verschiedenen CSS-Dateien spezifizieren. Im folgenden Beispiel verwenden die Mobi- und KF8-Formate verschiedene CSS-Stylesheets, während das CSS der Datei „common.css“ für alle Medien angewendet wird.

Beispiel:

Option 3: Style-Tags verwenden

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

Beispiel:

Option 4: Verwendung von „@import“

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

Beispiel:

Verwendung der Eigenschaft „display:none“ bei Medienanfragen

Um unterschiedliche CSS-Befehle für Inhalte im Mobi 7- und KF8-Format zu erstellen, können Sie in Medienanfragen die Eigenschaft „display:none“ zuweisen.

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, meldet Kindle einen Fehler. Ihr Buch kann dann nicht veröffentlicht werden.