Media queries are blocks of CSS code that allow content creators to apply different styles to specific Kindle devices (or a group of devices) using only one style sheet. Amazon has implemented media queries as a way to help content creators build a better customer experience across devices.

Amazon recommends that content creators only use media queries if they solve a problem or provide a better customer experience. For example, you can use media queries to:

• Create custom drop cap solutions for specific devices or groups of devices.
• Change light-colored text (yellow, baby blue, pink, etc.) to darker colors that provide better contrast on E-reader while retaining the original color on tablet devices.
• Increase the font size for fixed-layout text pop-ups on E-reader devices separately from tablets to accommodate the difference in screen sizes.
• Display colored borders on E-reader and colored backgrounds on tablets independently from each other, allowing you to better replicate the print experience on tablets without sacrificing the reading experience on E-reader devices.

This section describes ways that you can use media queries to customize the reading experience on Kindle E-reader devices, Fire tablets, and iPads. You can also use these same principles across all of Kindle for devices of all aspect ratios.

Note: Some media queries may behave differently in Enhanced Typesetting eBooks than in KF8 or Mobi eBooks.

Media queries are part of the W3 standard.

Media Query Guidelines

Support for two new media types enables content creators to use specific CSS based on the Mobi or KF8 file format: amzn-mobi and amzn-kf8.

• For KF8 CSS styles, use the media query @media amzn-kf8. This is only applied for the KF8 format.
• For Mobi CSS styles, use the media query @media amzn-mobi. This is only applied for the Mobi format.

The @media screen and @media all styles continue to apply to both KF8 and Mobi.

Use Correct CSS Syntax

Media queries consist of two parts: (1) the selector, which specifies the conditions of the media query; and (2) the declaration block, which is rendered when the conditions of the media query are met.

In the following example, the blue background color is only applied if the format of the book is KF8 and the aspect ratio of the device is 1280 x 800.

Example:

Add a CSS Comment Before Each Media Query

Amazon recommends that you add a CSS comment before each media query to clarify which device you are targeting. (A CSS comment starts with /* and ends with */.)

Example:

CSS comments are invisible to the customer, but they make the code much easier to navigate and troubleshoot for anyone who works on the file.

Always Use Non-Media Query Code To Target E-Reader Devices

Always optimize your non-media query ("default") code for Kindle E-reader devices (including Kindle Voyage and Kindle Paperwhite). The default code contains the CSS values that will appear on an Ereader when none of the media queries match that particular device.

Media Queries Should Appear After Non-Media Query Code

Since CSS is applied in the order that it appears, code that targets multiple devices (such as the device-aspect-ratio code that targets all Fire tablets) should appear after any non-media query code.

In the following example, the default code creates a black border on every device for any element that uses the blue_background class. The media queries that follow it remove the border and display a blue background on Fire tablets and iPad for any element that uses the blue_background class. All other devices will only display the black border.

Example:

In the example above, the black border defined in the default code for the blue_background class will still appear on Fire tablets if the border property is not overridden. Setting the border to none in the media queries for Fire tablets and iPad ensures that the default values for these properties are overridden. This is helpful if you are using non-media query code to target Kindle E-reader devices and do not want to transfer a colored border to a Fire tablet.

Duplicating Code

When writing media queries, only include the CSS classes and code that you need to change for that particular device. Any non-media query code that you use will automatically appear on all devices unless it is overwritten with a media query, so you do not need to repeat code that you want to apply to all devices.

In the following example, the goal is to override a colored border on Fire tablets and replace it with a colored background, while keeping the text red for all devices. The example on the left is incorrect because repeating the .red_font class in the media query code is not necessary.

Example:

Using Media Queries

The following table outlines examples of supported media queries and the CSS applied to KF8, MOBI, and other readers:

Using Media Queries for Backward Compatibility with MOBI

Media queries allow one CSS file to supply complex CSS for KF8 and basic CSS for the Mobi format. Some guidelines:

• Complex CSS can be overridden for the Mobi format by redefining the same class inside the @media amzn-mobi media query.
• Per the W3C standard, media queries should either be:
  • Individual queries specified after the common CSS; or
    Example:
    

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

  • Include !important with each property to enforce precedence.

    Example:

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

  
  

  CSS	CSS Styles Applied to MOBI	CSS Styles Applied to 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; }

Submitting a Media Query

There are four options for submitting media queries:

• One CSS file
• Different CSS files
• Style tags
• @import

Option 1: Using One CSS File

Media queries can specify different CSS for MOBI and KF8 formats in the same CSS file. In the example below, a different .class1 class is specified for the MOBI format than for the other formats in the same CSS file.

Example:

Option 2: Using Different CSS Files

Media queries can specify different CSS for Mobi and KF8 formats in different CSS files. In the example below, the Mobi and KF8 formats utilize different CSS style sheets and the common CSS styles apply to all media.

Example:

Option 3: Using Style Tags

Media queries can specify different CSS for Mobi and KF8 formats directly using <style> tags.

Example:

Option 4: Using @import

Media queries can specify different CSS for Mobi and KF8 formats directly using @import to include different CSS files.

Example:

Using the display:none Property with Media Queries

To specify different CSS for the content in MOBI 7 and KF8 format, use the display:none property with media queries.

Example:

Limitation on Using the display:none Property

Kindle limits usage of the display:none property for content blocks beyond 10000 characters. If the display:none property is applied to a content block that is bigger than 10000 characters, Kindle Previewer returns an error.