it won’t work in Kindle but I didn’t explore a fix yet;
Image wizardry in eBooks
Jiminy Panoz
1014

All I know is Kindle Previewer doesn’t support feature queries (@supports) and is not able to parse the CSS correctly when you have one in your CSS so, basically, if you’ve got media queries after, it will parse until the last

  }
}

it finds.

Consequently Kindle Previewer will ignore all styles which happen to find themselves between @supports and the last “}}” it finds. For instance

@supports (whatever: yolo) {
selector {
/* Styles KP ignores */
}
}
/* Styles you may have between the two */
@media amzn-kf8 {
selector {
/* Styles KP ignores */
}
}

Lazy/greedy parsing is hard, huh? This lazy/greedy parsing problem already applies to <header> by the way…

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.