Mediaquery’s zijn blokken CSS-code waarmee contentmakers met slechts één enkel opmaakmodel verschillende stijlen op bepaalde Kindle-apparaten (of een groep apparaten) kunnen toepassen. Amazon heeft mediaquery’s geïmplementeerd om contentmakers te helpen een betere klantervaring te leveren op alle apparaten.

Amazon beveelt contentmakers aan om alleen mediaquery’s te gebruiken om een probleem op te lossen of een betere klantervaring te bieden. Je kunt mediaquery’s bijvoorbeeld gebruiken om:

• Aangepaste oplossingen voor decoratieve initialen voor bepaalde apparaten of groepen apparaten te maken.
• Licht gekleurde tekst (geel, zachtblauw, roze, enzovoort) in donkerder kleuren te wijzigen om een beter contrast op e-readers te bieden terwijl de oorspronkelijke kleur op tablets behouden blijft.
• De lettertypegrootte voor tekstpop-ups met een vaste opmaak te vergroten op e-readers maar niet, of anders, op tablets, om rekening te houden met de verschillen in schermgrootte.
• Gekleurde randen op e-readers en gekleurde achtergronden op tablets onafhankelijk van elkaar weer te geven, zodat je de gedrukte weergave beter kunt repliceren op tablets zonder dat de leeservaring op e-readers eronder lijdt.

In deze sectie worden manieren beschreven waarop je met mediaquery's de leeservaring op Kindle e-readers, Fire-tablets en iPads kunt aanpassen. Je kunt dezelfde methoden gebruiken voor elke Kindle en voor alle apparaten met alle beeldverhoudingen.

Opmerking: Bepaalde mediaquery's functioneren anders bij e-books met Verbeterde typografie dan bij KF8 of Mobi e-books.

Mediaquery's maken deel uit van de W3-standaard.

Richtlijnen voor mediaquery's

Dankzij de ondersteuning voor twee nieuwe mediatypen kunnen makers van content specifieke CSS-stijlen gebruiken, al naar gelang de Mobi- of KF8-bestandsindeling: amzn-mobi en amzn-kf8.

• Gebruik voor KF8 CSS-stijlen de mediaquery @media amzn-kf8. Deze is alleen van toepassing op de KF8-indeling.
• Gebruik voor KF8 CSS-stijlen de mediaquery @media amzn-mobi. Deze is alleen van toepassing op de Mobi-indeling.

De stijlen @media screen en @media all blijven van toepassing op zowel KF8 als Mobi.

Correcte CSS-syntaxis gebruiken

Mediaquery’s bestaan uit twee delen: (1) de selector die de voorwaarden van de mediaquery specificeert; en (2) het verklaringsblok dat wordt weergegeven wanneer aan de voorwaarden van de mediaquery wordt voldaan.

In het volgende voorbeeld wordt de blauwe kleur alleen toegepast als de indeling van het boek KF8 is en de beeldverhouding van het apparaat 1280 x 800 is.

Voorbeeld:

Een CSS-opmerking toevoegen voor elke mediaquery

Amazon raadt je aan een CSS-opmerking voor elke mediaquery toe te voegen om duidelijk te maken welk apparaat wordt bedoeld. (Een CSS-opmerking begint met /* en eindigt met */.)

Voorbeeld:

CSS-opmerkingen zijn voor de klanten onzichtbaar, maar maken het voor degene die aan het bestand werkt eenvoudiger om de code te doorlopen en problemen op te lossen.

Altijd niet-mediaquerycode gebruiken voor doelapparaten als e-readers

Optimaliseer altijd niet-mediaquerycode (standaard) voor Kindle e-readers (inclusief Kindle Voyage en Kindle Paperwhite). De standaardcode bevat de CSS-waarden die op een e-reader verschijnen wanneer geen enkele mediaquery met dat bepaalde apparaat overeenkomt.

Mediaquery’s moeten achter de niet-mediaquerycode staan

Aangezien CSS wordt toegepast in de volgorde waarin ze worden weergegeven, moet code die gericht is op meerdere apparaten (zoals de code device-aspect-ratio, die gericht is op alle Fire-tablets) worden weergegeven na eventuele niet-mediaquerycode.

In het volgende voorbeeld maakt de standaardcode een zwarte rand op elk apparaat voor elk element dat de klasse blue_background gebruikt. De mediaquery’s die volgen, verwijderen de rand en tonen een blauwe achtergrond op Fire-tablets en iPads voor elk element dat de klasse blue_background gebruikt. Op alle andere apparaten wordt alleen de zwarte rand weergegeven

Voorbeeld:

In het bovenstaande voorbeeld verschijnt de zwarte rand die in de code voor de klasse blue_background is gedefinieerd nog wel op Fire-tablets als de border-eigenschap niet wordt overschreven. Als je de border in de mediaquery's voor Fire-tablets en iPads op none instelt, ben je er zeker van dat de standaardwaarden voor deze eigenschappen worden overschreven. Dit is handig als je niet-mediaquerycode gebruikt voor Kindle e-readers en geen gekleurde rand naar een Fire-tablet wilt overbrengen.

Code dupliceren

Als je mediaquery’s schrijft, neem dan alleen de CSS-klassen en -code op die je voor een bepaald apparaat moet wijzigen. Elke niet-mediaquerycode die je gebruikt, verschijnt automatisch op alle apparaten tenzij deze door een mediaquery wordt overschreven, zodat je de code die je op alle apparaten wilt toepassen, niet hoeft te herhalen.

In het volgende voorbeeld is het de bedoeling een gekleurde rand op Fire-tablets te vervangen door een gekleurde achtergrond terwijl de tekst voor alle apparaten rood blijft. Het linkervoorbeeld is onjuist omdat het herhalen van de klasse .red_font in de mediaquerycode niet nodig is.

Voorbeeld:

Mediaquery's gebruiken

De volgende tabel bevat voorbeelden van ondersteunde mediaquery's en de CSS die wordt toegepast op KF8, Mobi en andere readers:

Mediaquery's gebruiken voor neerwaartse compatibiliteit met MOBI

Mediaquery's maken het mogelijk dat één CSS-bestand zowel complexe CSS voor KF8 als eenvoudige CSS voor de Mobi-indeling levert. Enkele richtlijnen:

• Complexe CSS kan worden genegeerd voor de Mobi-indeling als dezelfde klasse opnieuw wordt gedefinieerd binnen de mediaquery @media amzn-mobi.
• Volgens de W3C-standaard moet voor mediaquery's het volgende gelden:
  • Het zijn individuele query's die worden opgegeven na de gemeenschappelijke CSS; of
    Voorbeeld:
    

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

  • Voeg !important aan elke eigenschap toe om ervoor te zorgen dat deze voorrang krijgt.

    Voorbeeld:

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

  
  

  CSS	CSS-stijlen toegepast op MOBI	CSS-stijlen toegepast op 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; }

Een mediaquery aanleveren

Er zijn vier opties om mediaquery's aan te leveren:

• Eén CSS-bestand
• Verschillende CSS-bestanden
• Style-tags
• @import

Optie 1: één CSS-bestand gebruiken

Mediaquery's kunnen verschillende CSS voor de MOBI- en KF8-indeling specificeren in hetzelfde CSS-bestand. In het onderstaande voorbeeld is een andere .class1-klasse opgegeven voor de MOBI-indeling dan voor de andere indelingen in hetzelfde CSS-bestand.

Voorbeeld:

Optie 2: verschillende CSS-bestanden gebruiken

Mediaquery's kunnen verschillende CSS-bestanden voor de Mobi- en KF8-indeling specificeren in verschillende CSS-bestanden. In het onderstaande voorbeeld gebruiken de Mobi- en KF8-indelingen verschillende CSS-opmaakmodellen en worden de gemeenschappelijke CSS-stijlen toegepast op alle media.

Voorbeeld:

Optie 3: style-tags gebruiken

Mediaquery's kunnen verschillende CSS-bestanden voor de Mobi- en KF8-indelingen rechtstreeks specificeren via <style>-tags.

Voorbeeld:

Optie 4: @import gebruiken

Mediaquery's kunnen verschillende CSS-bestanden voor de Mobi- en KF8-indeling direct specificeren met @import om verschillende CSS-bestanden op te nemen.

Voorbeeld:

De eigenschap display:none gebruiken met mediaquery's

Als je verschillende CSS wilt opgeven voor content in de MOBI 7- en de KF8-indeling, gebruik je de eigenschap display:none met mediaquery's. Ondersteuning voor de eigenschap display:none in de Mobi 7-indeling is beschikbaar in KindleGen 2.4 en latere versies.

Voorbeeld:

Beperking bij het gebruik van de eigenschap display:none

Kindle beperkt het gebruik van de eigenschap display:none voor contentblokken van meer dan 10.000 tekens. Als de eigenschap display:none wordt toegepast op een contentblok van meer dan 10.000 tekens, retourneert KindleGen een fout.