[RbnJrg]

Originally Posted by ElMiko

@RbnJrg - My limited understanding of epub3 is that if an epub2 application reads it, it will ignore epub3-specific language and render anything else that it can. How do you code for both when they have shared elements that require different values depending on whether it's being rendered in epub2 or epub3 applications?

The solutions for epub3 are better and more perfect than the solutions for epub2. So, if you only use the epub2 solution in an epub3 (this way you save yourself from writing extra code because what you include works everywhere), users whose e-readers support epub3 would have a reading experience inferior to what they could hope for.

To avoid this, I include both the epub2 and epub3 solutions in the same epub. This way, those who read on a modern device will get the best reading experience, while those whose devices only accept older code will be able to read the book satisfactorily but won't get the best out of it.

This is achieved by writing XHTML code for epub2, something like:

<div class="epub2Code>
   All the code for epub2 here...
</div>

and below XHTML code for epub3:

<div class="epub3Code>
   All the code for epub3 here...
</div>

and in the stylesheet:

.epub2Code {
   display: block;
}

.epub3Code {
   display: none;
}

@supports (display: grid) { /* Or any other property only available in epub3 */
.epub2Code {
   display: none;
}

.epub3Code {
   display: block;
}

In this way, under epub2 the code for epub3 remains hidden, while under epub3 the code for epub2 is not showed. There are other ways to add and activate code for epub3 but the above is good and generally works well (you have to be careful with ADE but, well... that's another story).