User`s guide

Publishing on Kindle: Guidelines for Publishers
}
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-Ink devices and do
not want to transfer a colored border to a Fire tablet.
8.1.5 Media Query Guideline #5: Avoid 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 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:
Incorrect Media Query
Correct Media Query
/* Default formatting. */
.blue_background {
border: 1px solid blue;
}
.red_font {
color: red;
}
/* Kindle Fire (All) Formatting */
@media amzn-kf8 and (device-aspect-
ratio:1280/800) {
.blue_background {
background-color: blue;
border: none;
}
.red_font {
color: red;
/* Default formatting. */
.blue_background {
border: 1px solid blue;
}
.red_font {
color: red;
}
/* Kindle Fire (All) Formatting */
@media amzn-kf8 and (device-aspect-
ratio:1280/800) {
.blue_background {
background-color: blue;
border: none;
}
}
Kindle Publishing Guidelines Amazon.com 65