Création d’ebook : le poids des sélecteurs dans un EPUB

Pourquoi telle règle CSS n’est-elle pas interprétée alors que sa syntaxe est valide ? Face à ce type de « bugs », fréquent dans le cadre d’une création d’ebook, il est tentant d’incriminer les spécificités du moteur de rendu. Pour autant, celles-ci n’expliquent pas tout. Une mauvaise évaluation du poids d’un sélecteur peut être à l’origine de l’écart entre le style rendu et l’effet désiré.

Sommaire

• Principe d’application des styles dans un EPUB
• Règle de calcul du poids d’un sélecteur
• Restauration de la parenté des styles

Dans un EPUB, les règles de style entrant dans la composition de la maquette sont regroupées dans un ou plusieurs fichiers CSS, distincts de ceux abritant le contenu (XHTML) et dédiés exclusivement à la mise en forme de ce dernier. Ces règles de style (déclarations CSS) vont alors s’appliquer de manière sélective aux éléments qui forment le contenu du livre (titres, listes, paragraphes, tableaux, liens html, etc.), via l’utilisation de balises HTML et de sélecteurs CSS.

Principe d’application des styles dans un EPUB

Les balises HTML^[1] (<p>, <div>, <blockquote>, <table>, <li>, <cite>, <code>, <span>, <strong>, etc.) permettent de structurer le contenu ou de « cibler » les éléments sur lesquels doivent porter ces règles. Ce balisage s’effectue en fonction de la position de l’élément dans le document (balises en ligne ou de type bloc^[2]) ou de la nature de son contenu (balises sémantiques).

Les sélecteurs CSS^[3] permettent au lecteur d’« appeler » les règles de style décrites dans le fichier CSS, et de les associer aux éléments du document auxquels elles se rapportent. Il est ainsi possible de différencier le comportement d’un élément (par exemple un item de liste, ciblé par une balise <li>) en fonction de son emplacement dans le livre, i. e. de spécifier ou modifier son apparence selon qu’il se situe dans les pages principales du livre ou qu’il entre par exemple dans la composition du glossaire.

On définira ici une classe spécifique (la classe « glossaire » ou la classe « sommaire ») dans le fichier CSS (.glossaire) et on se servira de l’attribut class pour programmer son application via la balise HTML <li class="glossaire">.

Syntaxe des sélecteurs

Lorsqu’on génère un EPUB depuis InDesign, les styles sont systématiquement exportés sous forme de classes, du même nom que le style dont elles sont issues, et associées dans le CSS à l’élément auquel elles se rapportent (par exemple p.courant pour le style de paragraphe courant).

Or, dans le cas d’une mise en page complexe ou avancée, le style d’un élément est susceptible de varier en fonction de son emplacement dans le document. C’est le cas par exemple des blocs de citation qui ne seront pas espacés de la même manière du paragraphe qui les précède (propriété margin-top) selon qu’il s’agit d’une citation isolée ou d’une citation comportant plusieurs paragraphes (par exemple un poème divisé en strophes).

La notion de classe est alors insuffisante pour restituer la complexité de la mise en pages sauf à créer une surenchère de classes, ce qui est contraire à la logique de simplicité à laquelle obéit le code. Or, le langage CSS permet précisément de pallier cette insuffisance en offrant la possibilité de combiner une multiplicité de sélecteurs pour cibler un groupe d’éléments auquel une règle de style va s’appliquer, c’est-à-dire pour restreindre son application à un contexte particulier.

C’est là qu’interviennent les notions de syntaxe et de poids des sélecteurs^[4].

Conflit entre règles de style

Le W3C fournit un tableau exhaustif des types et combinaisons possibles de sélecteurs CSS permettant de cibler un élément dans son contexte d’apparition.

Or, dans la mesure où ces combinaisons font appel à une multiplicité de sélecteurs possédant des propriétés stylistiques différentes, la question qui se pose est alors : comment savoir quelles règles de style seront effectivement appliquées si j’utilise telle combinaison plutôt que telle autre, ou comment déclarer les styles dans le fichier CSS pour obtenir le rendu souhaité par exemple lorsqu’on cherche à optimiser le code ?

Règle de calcul du poids d’un sélecteur

L’emplacement de la règle de style

Le langage HTML étant basé sur le principe de séparation du fond et de la forme, on a coutume (et cette coutume vaut comme principe, auquel il est recommandé de ne pas déroger) de regrouper les règles de style dans un fichier distinct de celui où se situe le contenu auquel elles se s’appliquent. Celles-ci peuvent néanmoins être définies dans le document lui-même, à l’intérieur de la balise HTML encadrant le contenu à styliser, au moyen de l’attribut style.

Une règle de style définie dans le document lui-même aura alors plus de poids qu’une règle définie dans le fichier CSS, externe au document. Ce principe se traduit de la manière suivante :

• si la règle est définie dans le fichier XHTML, alors A = 1 ;
• si la règle est définie dans un fichier CSS, alors A = 0.

Les identifiants (id)

Ce sont les sélecteurs qui ont le plus de poids dans le fichier CSS dans la mesure où ils permettent de cibler directement un élément dans son contexte d’apparition. Leur nombre correspond donc à la valeur de la lettre B. Autrement dit, plus le sélecteur comporte d’identifiants, plus son poids sera élevé.

Par exemple, si on veut cibler la première partie du premier chapitre du livre, on pourra utiliser le sélecteur CSS suivant : section#chapitre1 article#partie1 où B = 2. Ce qui signifie que le sélecteur aura un poids supérieur ou égal 200.

Les classes (.classe)

Viennent ensuite les classes et les pseudo-classes, dont le nombre correspond à la valeur de la lettre C.

Exemples :

• Dans le cas d’une publication scientifique bilingue, si on veut cibler les liens HTML en anglais figurant dans la version traduite des articles, on pourra utiliser le sélecteur : article .traduction a[hreflang=en] où B = 2 (poids du sélecteur ≥ 200).
• Dans le cas d’un livre de cuisine, si on veut cibler les items figurant dans la liste des ingrédients (.ingredients) utilisés dans les recettes (.recettes), on utilisera le sélecteur suivant : .recettes .ingredients li où B = 2 (poids du sélecteur ≥ 200).
• Si on veut restreindre la cible aux recettes de cuisine asiatique ou chinoise, on pourra utilisé soit le sélecteur : .recettes.asie .ingredients li, où B = 3 (poids ≥ 300), soit le sélecteur .recettes.asie.chine .ingredients li où B = 4 (poids ≥ 400).

Les éléments HTML

Ce sont eux qui ont le moins de poids, leur nombre détermine la valeur de D.

On aura donc la règle de calcul de suivant pour un sélecteur donné :

Restauration de la parenté des styles

Dans l’article « Héritage des styles dans l’EPUB : première méthode de restauration », nous critiquions la méthode proposée par Liz Catro, consistant à : 1) regrouper dans un sélecteur de classe de type p.parent les règles de style communes à un style enfant et à son parent, et 2) ne conserver dans un sélecteur de classe de type .enfant que les règles du style enfant, différant de son parent.

Se pose ici une situation de conflit typique entre les règles de style définies dans la classe .enfant, et celles de son parent, définies dans le sélecteur p.parent (i. e. même propriété mais valeurs différentes). Or, le poids du premier sélecteur est de 0010 puisqu’il ne comporte qu’une classe, contre 0011 pour le second (p.parent) qui comporte une classe et un élément. C’est donc la valeur des propriétés définie dans le sélecteur p.parent qui seront appliquées par la balise <p class="parent enfant">.

A contrario, si sur le même principe, on déclare les propriétés communes aux deux styles dans le sélecteur d’élément p, ce sera alors la valeur des propriétés de la classe .enfant qui sera appliquée par la balise <p class="enfant">, puisque ce sont alors le sélecteur de classe .enfant et le sélecteur d’élément p, plus « léger », qui entrent en concurrence.

Conclusion

Il n’est sans doute pas nécessaire de connaître la règle de calcul du poids d’un sélecteur lorsqu’un réalise un EPUB du fait de son (relativement) faible niveau de complexité. À défaut, on pourra se contenter de retenir ces quatre principes généraux :

Pour en savoir plus