Site Tools


eBook CSS Support

CSS KF8 KF8 iOS mobi7 iBooks kobo nook ADE kobo (Tablets) kobo (iOS)
@import yes yes ?
@font-face yes yes no yes yes? yes
* yes yes no? ?
parent > child yes yes no? yes
sibling + sibling yes yes no yes tablet yes
*[epub:type] no no no yes
:after,:before yes* no no yes no no
:first-child yes yes no yes
:first-of-type yes yes no yes
:first-letter yes yes no yes
background-color yes yes yes-ish* yes no
border yes yes no yes no no
border-radius yes ? yes
box-shadow yes yes yes no
display yes yes yes
display: box (-webkit-box, etc.) no yes
display: table yes no
letter-spacing yes yes no? yes
list-style yes no no yes no no
list-style-type yes no no yes no no
max-width yes-ish no no no
max-height yes-ish
opacity yes yes no yes yes yes yes yes yes
padding yes yes yes
page-break-after yes ? no yes yes no yes
page-break-before yes no
position:absolute yes* ? no? yes
position:relative yes* yes* no? yes
text-align yes yes yes yes no
text-shadow yes yes no
text-transform yes yes yes split no no
width yes yes yes-ish yes yes yes yes
CSS KF8 mobi7 iBooks kobo nook Kobo (Android Tablets) Kobo (iOS)
CSS color values (ex. blue, red) yes yes yes
rgb() color value yes yes yes
rgba() color value yes no yes no yes
Units KF8 mobi7 iBooks kobo nook
vh no no yes
em yes yes yes yes yes
Media Queries KF8 mobi7 iBooks kobo (e-ink) nook ADE Kobo (Android Tablets) Kobo (iOS)
@media yes yes? yes no no
@media amzn-kf8 yes no n/a n/a n/a n/a
@media amzn-mobi no yes n/a n/a n/a n/a
@media (monochrome) no no n/a
  • KF8 site claims it does not, but internal tests prove otherwise.
References:

Media Queries for eReaders

Kindle KF8 devices

@media amzn-kf8 {
    /* styles for all kf8 devices */
}

Kindle Mobi7 devices

@media amzn-mobi {
    /* styles for all mobi7 devices */
}

Kindle Paperwhites

@media amzn-kf8 
  and (device-height:1024px) 
  and (device-width: 758px), 
  amzn-kf8 
  and (device-height:758px) 
  and (device-width: 1024px) {
  /* Styles for Paperwhites can go here */ 
} 

Kindle e-inks (non-Paperwhites)

@media amzn-kf8 
    and (device-height:800px) 
    and (device-width: 600px),
    amzn-kf8 
    and (device-height:600px) 
    and (device-width: 800px) {
    /* Styles for non-Paperwhite e-inks */
} 

Kindle Fires

@media amzn-kf8 
    and (device-aspect-ratio:1280/800) {
    /* Styles for Kindle Fires */
} 

iBooks (iPad)

@media screen 
    and (width: 548px) 
    and (device-width: 768px) {
    /* Styles for iPad Scroll View (Portrait) */
} 

@media screen 
    and (width: 567px) 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) {
    /* Styles for iPad Paged View (Portrait) */
}

@media screen 
    and (width: 804px) 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) {
    /* Styles for iPad Scroll View (Landscape) */
}

@media screen 
    and (width: 902px) 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) {
    /* Styles for iPad Paged View (Landscape) */
}

iBooks (iPhone)

@media screen 
  and (width: 260px) 
  and (min-device-width: 320px) {
    /* Styles for iPhone Scroll View (Portrait) */
}

@media screen 
  and (width: 270px) 
  and (min-device-width: 320px) {
    /* Styles for iPhone Paged View (Portrait) */
}

@media screen 
  and (width: 420px) 
  and (min-device-width: 320px)
  and (max-device-width: 480px) {
    /* Styles for iPhone4S (and earlier) Scroll View (Landscape) */
}

@media screen 
  and (width: 454px) 
  and (min-device-width: 320px)
  and (max-device-width: 480px) {
    /* Styles for iPhone4S (and earlier) Paged View (Landscape) */
}

@media screen 
  and (width: 508px) 
  and (min-device-width: 320px)
  and (max-device-width: 568px) {
    /* Styles for iPhone5 (and later) Scroll View (Landscape) */
}

@media screen 
  and (width: 542px) 
  and (min-device-width: 320px)
  and (max-device-width: 568px) {
    /* Styles for iPhone5 (and later) Paged View (Landscape) */
}

Device Overrides and Known Issues

Below are a list of known overrides and issues with certain styling.

Adobe Digital Editions (affects Bluefire Reader and ADE apps)

  • ADE will remove all custom styles if your CSS file has any validation errors
  • ADE will remove all custom styles if your CSS file has any media queries in it. We’ve filed this as a bug with Adobe but don’t know of a fix date.

kf8

  • <a> tags can only have text-decoration: none; set with an inline style. Creatavist does not automate this, so you cannot remove text-decoration:underline on links
  • text-rendering: optimizeLegibility; will break CSS rendering on the regular e-ink device (non-Paperwhites)

mobi7

kindlegen converts your CSS stylesheet to inline styles for mobi7, so all styles are inlined when the file is read in a kindle device.

  • When an <ol> follows an <h*> element, the first numeral picks up the styling of the heading. Creatavist solves this by including: <div class="mobi7only" style="height: 0px;"></div> between the two elements
  • mobi7 doesn’t accept css using decedents (ex. div p {})
  • <a> tags can only have text-decoration: none; set with an inline style. Creatavist does not automate this, so you cannot remove text-decoration:underline on links
  • mobi7 frowns on styling <p> tags with color. Really try to avoid it, and if you think you have to, get ready to use !important (and then some).

iBooks

  • <a> tags have overridden color styles. We provide spans with a class of a.inner inside all links to help with styling.
/* to style link colors in ibooks epub */
a .a-inner {
    color: blue;
}
  • iBooks does not support width being applied to an <img> tag itself. You should apply it to its container. See our markup patterns for specific use cases.
  • iBooks for iOS has minor issues with width: 100% being applied to the <body> element

User Tools