Dans le cadre d’une création d’ebook depuis InDesign, la procédure d’exportation au format EPUB entraîne la disparition de la hiérarchie des styles (héritage). Or cette notion est ce qui donne sa puissance et sa complexité au langage CSS. Une étape essentielle de l’optimisation du code consiste donc à restaurer cette hiérarchie et à regrouper certaines propriétés en les remplaçant par des propriétés raccourcies.

Sommaire


À ce stade, si l’on a suivi la méthodologie décrite précédemment (voir l’article « Créer un ebook | L’optimisation CSS du fichier EPUB (1) : méthodologie »), le fichier CSS ne doit plus comporter de classes de formatages de locaux, de doublons de styles ni de valeurs CSS par défaut (à quelques exceptions près). Toutefois, ce nettoyage peut être largement amélioré.

Restauration de la hiérarchie des styles

InDesign permet de créer une hiérarchie entre plusieurs styles de même nature (par exemple les titres, intertitres, sous-titres) ou partageant certains attributs, comme la police. Les styles de paragraphe (citations, exergues, légende, notes de bas de page…) peuvent par exemple être définis « par rapport » ou « d’après » le style de texte courant, qui sera alors considéré comme leur parent. Toute modification de style appliquée au parent se répercutera automatiquement dans la définition du style de ses enfants.

Dans le fichier CSS généré par InDesign lorsque l’on a pris soin d’activer cette option, chaque style est décrit au moyen de déclarations CSS qui se rapportent à un sélecteur de classe dont la structure est la suivante : type d’élément.nom_de_la_classe (par exemple, p.courant pour le style de paragraphe du texte courant). Par défaut, c’est-à-dire si l’on ne renseigne pas les options d’exportation du balisage, la classe correspond au nom que l’on a donné au style dans InDesign (ici « courant »).

Lorsqu’un style a été défini de manière relative, si le nom de son parent est renseigné dans les options de style (on indique ce nom dans le champ « D’après », situé sous le « Nom du style »), il sera repris par défaut dans le nom de la classe lors de l’exportation du fichier. Par exemple, le sélecteur servant à décrire le style « citation », enfant du style « courant », sera p.courant_citation.

Le lien entre le style enfant et son parent n’est donc pas totalement rompu lors de l’exportation au format EPUB. De même, la rupture de la hiérarchie des styles se fait sans préjudice pour le rendu final du livre, l’ensemble des caractéristiques du style enfant, à savoir ses caractéristiques propres (i. e. les propriétés dont la valeur diffère de son parent) et ses caractéristiques héritées (i. e. les propriétés dont la valeur a été définie dans le style parent et dont il hérite mécaniquement, comme enfant) étant retranscrites dans le fichier CSS.

Mais on perd le bénéfice que représente cette logique de composition dans la mesure où, si l’on veut modifier un attribut commun aux deux styles, il faudra le faire dans chaque règle de styles. L’un des objectifs de l’optimisation du code est donc de reconstruire cette logique qui est à la base du langage CSS (Cascading Style Sheets, pour feuilles de style en cascade).

Pour cela, on procède aux modifications suivantes :

  • le sélecteur du style parent (dans notre exemple : p.courant) est renommé en p ;
  • les sélecteurs des styles enfants sont renommés selon leur classe, par exemple .citation (on supprime le préfixe p).
  • dans chaque règle CSS des classes enfants, on supprime les déclarations communes code celles du sélecteur p ;
  • dans chaque fichier .XHTML, on remplace la balise <p class="courant"> par une balise <p>.

Utilisation des propriétés raccourcies

Ce premier nettoyage permet d’alléger substantiellement la feuille de styles. Toutefois, il est possible de l’améliorer, sans révolutionner pour autant la structure du fichier CSS, en utilisant les méga propriétés CSS, ou propriétés raccourcies.

Les propriétés raccourcies permettent de regrouper en une seule plusieurs propriétés se rapportant à un aspect du rendu d’un élément. Toutes ne sont pas nécessaires à connaître lorsqu’on cherche à créer un EPUB (par exemple place-self, animation, grid, offset… voir l’article : https://developer.mozilla.org/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies), mais certaines sont indispensables pour présenter le code de manière plus efficace. Citons par exemple les propriétés margin, padding, border, font, list-style ou text-decoration.

Plutôt que de définir de manière individuelle la marge haute (margin-top), la marge droite (margin-right), la marge basse (margin-bottom) et la marge gauche (margin-left) d’un élément, on utilisera ainsi la propriété margin en lui attribuant comme valeurs celles des propriétés individuelles, séparées par une espace. De même, border permet de définir la largeur de la bordure (border-width), son style (border-style), à savoir en continu, en pointillés, double…, et sa couleur (border-color).

De manière générale, il n’est pas nécessaire de définir l’ensemble des valeurs permettant de décrire le rendu de l’élément. Concernant l’ordre dans lequel sont présentées ces valeurs, la question est plus délicate. On distingue ainsi deux cas de figure pour déterminer le rendu de l’élément.

Les propriétés gérant les bords (margin, padding, border-style) ou les coins (border-radius) d’une « boîte » (élément de type bloc)

Ces propriétés admettent de 1 à 4 valeurs selon le contexte :

  • une seule valeur : celle-ci s’applique à l’ensemble des propriétés individuelles ;
  • deux valeurs : la première correspond à celle des bords ou des coins supérieurs et inférieurs (top et bottom), la deuxième correspond à celle des bords ou des coins latéraux (right et left) ;
  • trois valeurs : la première correspond à celle des bords ou des coins supérieurs (top), la deuxième correspond à celle des bords ou des coins latéraux (right et left), identiques, la troisième correspond à celle des bords ou des coins inférieurs ;
  • quatre valeurs : chacune correspond à l’un des côtés du bloc, selon l’ordre de lecture suivant : haut, droite, bas, gauche.

À noter, la propriété border peut être utilisée pour définir les valeurs de border-width, border-style, border-color. Toutefois, elle ne permet pas de spécifier le comportement des propriétés de bordure (largeur, style et couleur) pour les différents côtés de la boîte à laquelle s’applique la bordure (la même valeur est appliquée à chaque côté lorsqu’on utilise la propriété raccourcie). Pour cela, on doit recourir aux propriétés individuelles, soit border-top-widthborder-right-widthborder-bottom-width et border-left-width pour la propriété border-width, border-top-color, border-right-color, border-bottom-color et border-left-color pour la propriété border-color et border-top-styleborder-right-styleborder-bottom-style et border-left-style pour la propriété border-style.

Les propriétés de type background, list-style, text-decoration ou font

La propriété font, par exemple, permet de regrouper les propriétés font-family, font-style, font-variant, font-weight, font-size/line-height (séparées de cette manière) et font-family.

La propriété list-style font permet de regrouper les propriétés list-style-type (disc/puce ronde pleine, circle/puce ronde vide, square/puce carrés…), list-style-image et list-style-position.

Pour ces propriétés, l’ordre de déclaration des valeurs n’a pas d’importance. Mais contrairement aux propriétés précédentes, le fait d’omettre de renseigner certaines des valeurs prévues par les spécifications du W3C a une incidence particulière sur le rendu. En effet, celles qui ne sont pas renseignées prennent alors la valeur par défaut de la propriété individuelle. Or si la valeur d’une des propriétés individuelles omise dans la propriété raccourcie d’un de ses enfants a été définie pour l’élément parent, elle ne sera pas héritée.

Pour forcer l’héritage, on devra remplacer la valeur de la propriété individuelle manquante par la valeur inherit pour s’assurer que la valeur appliquée à l’élément enfant est celle de son parent.

Même si on a procédé en amont au regroupement de certaines propriétés, comme les marges, on le fera à nouveau après avoir recréé la hiérarchie des styles, pour des raisons de lisibilité et de flexibilité. Par exemple, dans une publication comportant plusieurs styles de paragraphes, on pourra recourir à la propriété raccourcie margin, pour définir les marges du paragraphe principal, déclaré au moyen du sélecteur p. On se contentera alors, pour les styles enfants (classes), de ne déclarer que les marges dont les valeurs diffèrent de celle du sélecteur p, par exemple les marges latérales, mais en utilisant alors les propriétés individuelles (ici margin-left et margin-right) ou en utilisant la propriété raccourcie complète et en assignant la valeur inherit aux propriétés individuelles dont la valeur est commune avec l’élément parent (ici margin-top et margin-bottom).

L’avantage d’une telle solution est de pouvoir conserver, au niveau des styles enfants, les mêmes marges verticales que le sélecteur p lorsqu’on modifie ces dernières si la différence entre les styles enfants et parent ne porte que sur les marges latérales.