Créer un ebook | L’optimisation CSS (4) : utilisation de combinateurs CSS

/0 Commentaires/dans /par

Les combinateurs CSS servent à créer des sélecteurs spécifiques dont l’utilisation permet de simplifier le fichier CSS. Lorsqu’on crée un ebook, l’optimisation du code implique donc de réorganiser le fichier CSS en utilisant ces sélecteurs dits « complexes ». Tous ces sélecteurs ne sont pas actuellement utilisables dans une création d’ebook, mais il est nécessaire d’en connaître certains pour anticiper les évolutions du format EPUB.

Sommaire

À ce stade de l’optimisation CSS du fichier EPUB, la feuille de styles ne comporte que des sélecteurs de classe ou de balise. Nous avons vu comment améliorer la lisibilité du fichier CSS et réduire la taille des règles CSS en utilisant des propriétés raccourcies, mais il est possible de le simplifier davantage en utilisant des combinateurs CSS.

Les combinateurs CSS sont des éléments syntaxiques permettant de créer de nouveaux sélecteurs, spécifiques ou complexes, à partir des sélecteurs simples. C’est là toute la puissance du langage CSS et c’est également ce qui en fait un véritable langage, doté d’une syntaxe, et non un simple outil de mise en page.

Ces sélecteurs remplissent deux objectifs :

  • les sélecteurs hiérarchiques permettent de cibler un élément en fonction de son contexte, c’est-à-dire de sa place dans la structure du document ;
  • le regroupement de sélecteurs permet de limiter le nombre de règles CSS.

Regroupement des sélecteurs CSS

Il est ainsi possible de regrouper les sélecteurs possédant le même bloc de déclarations, en les séparant par une virgule :


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}

Nous donnons ici en exemple une règle CSS automatiquement générée par InDesign, dont l’objectif est d’annuler les éventuels réglages des navigateurs, c’est-à-dire de « remettre à zéro » les marges (intérieures et extérieures) et annuler les bordures de l’élément <body> (l’espace de la page) et des blocs susceptibles d’être utilisés dans le document.

L’intérêt d’utiliser le regroupement de sélecteurs est de limiter la redondance de certaines déclarations CSS, mais également de donner davantage de visibilité à la maquette et de permettre de la modifier à la fois plus facilement et de manière plus rigoureuse. On peut y avoir recours pour décrire le comportement d’une famille de titres (h1, h2, h3), ou pour regrouper des éléments possédant des attributs communs, par exemple dans une maquette utilisant différentes polices ou différentes couleurs.

Dans ce dernier cas, l’objectif est alors moins de limiter le nombre de lignes de code que de rendre le fichier CSS plus facilement manipulable (il suffira de modifier la couleur au niveau du regroupement de sélecteurs pour que chacun des éléments ciblés soit affecté par cette modification).

Un élément pourra ainsi être décrit à différents emplacements du fichier CSS. C’est le principe de la cascade, qui correspond à la possibilité, pour une balise, de définir des styles dans plusieurs règles distinctes. Si l’on veut conserver une vision d’ensemble de la maquette, rien n’empêche bien évidemment de conserver une copie du fichier CSS généré par InDesign.

Utilisation de sélecteurs hiérarchiques

Les sélecteurs hiérarchiques permettent de cibler certains éléments en fonction de leur contexte et non de leur nature, pour modifier ponctuellement la mise en pages sans avoir à créer nécessairement une nouvelle classe. Pour les construire, on utilisera différents combinateurs CSS : espace, +, ~ ou >.

Sélecteur de frère : E1 + E2 ou E1 ~ E2

Le sélecteur de frère adjacent, de type E1 + E2, permet de cibler l’élément E2 situé immédiatement après l’élément E1 et situé sur le même plan hiérarchique que lui, c’est-à-dire son frère. Il permet par exemple de cibler un paragraphe situé après une liste ou un premier paragraphe, selon l’ordre de lecture du document. On pourra s’en servir pour cibler certains paragraphes de texte courant, qui ne sont pas dotés de classe, et les styliser en fonction du contexte.

Prenons l’exemple des citations venant entrecouper un paragraphe de texte. Le Code typographique recommande de ne pas indenter le paragraphe qui suit directement une citation lorsque celui-ci est la continuité du paragraphe d’introduction de la citation. Pour ce faire, on doit créer dans InDesign un style de paragraphe basé sur le style courant (style apres-citation, par exemple), mais avec une indentation nulle (text-indent: 0;). En langage CSS, on peut au contraire se dispenser de créer une nouvelle classe en utilisant le sélecteur suivant .citation + p.

Le sélecteur de frère, de type E1 ~ E2, permet quant à lui de cibler l’ensemble des éléments E2 possédant le même parent que l’élément E1. Il n’est malheureusement pas interprété par Adobe Digital Editions, ce qui le rend difficilement exploitable dans une création d’EPUB.

Sélecteur d’enfant : E1 > E2

Le sélecteur d’enfant, de type E1 > E2, permet de cibler tous les éléments E2 qui sont situés sous l’élément E1, ou « contenus » dans l’élément E1, c’est-à-dire ses enfants. On pourra utiliser ce type de sélecteur pour cibler par exemple des items de liste contenus dans une liste (ul > li ou ol > li), les paragraphes contenus dans un bloc de citations (blockquote p, en associant éventuellement une classe à l’un ou l’autre des éléments), etc.

C’est un des sélecteurs les plus couramment utilisés en raison de son efficacité et du fait qu’il soit interprété par l’ensemble des moteurs de rendu.

Sélecteur de descendant : E1 E2

Le sélecteur de descendant, de type E1 E2, permet de cibler n’importe quel élément E2 contenu dans l’élément E1. On pourra utiliser ce type de sélecteur pour cibler par exemple tous les paragraphes ou les titres situés dans une section, ou pour cibler l’ensemble des items de liste d’une section de premier et de second niveau. Si on ne veut cibler que ceux d’une liste de premier niveau, on optera pour le sélecteur d’enfant E1 > E2.

Conséquence de l’utilisation des sélecteurs hiérarchiques sur les fichiers HTML

Il est tentant, lorsqu’on optimise le fichier CSS et qu’on cherche à limiter la prolifération des classes, de recourir à ces différents sélecteurs CSS en raison de leur efficacité. Dans ce cas, le recours à un certain nombre de classes, utilisées dans la maquette, devient caduque. Par souci de cohérence, on doit donc idéalement modifier les balises dans le fichier HTML. Toutefois, il est nécessaire de garder en tête le contexte dans lequel ils sont utilisés, à savoir une création d’EPUB.

En effet, contrairement à une création de site web, le fichier InDesign est susceptible dêtre réexporté lors d’une réédition ou d’une correction du contenu. Le fichier CSS doit donc rester au plus près de la maquette InDesign afin de pouvoir être réutilisé lorsque l’on réexporte le fichier InDesign. C’est cette raison, entre autres, qui exige qu’on renseigne les options du balisage en adaptant le nom des classes à la syntaxe CSS.

Toutefois, le fait de cibler les éléments en fonction de leur position dans le document HTML ou du contexte n’implique pas nécessairement de modifier les balises HTML.

Règles de bonnes pratiques

D’une manière générale, il est possible de spécifier les éléments par leur classe ou leur identifiant (E1#id) et de combiner ces sélecteurs hiérarchiques entre eux. Toutefois, lorsque la syntaxe des sélecteurs est trop complexe, la performance d’affichage d’un document HTML, et donc d’un EPUB, est susceptible d’être affectée si la publication est volumineuse. Un équilibre est donc à trouver dans la stratégie d’optimisation puisque son objectif est précisément d’améliorer la performance de lecture en allégeant le fichier CSS.

Ainsi, les règles de bonnes pratiques recommandent de :

  • limiter le nombre de sélecteurs de descendance (caractère espace), en privilégiant par exemple ul.classe li ou ul#id li à ul ul li ;
  • recourir prioritairement à un sélecteur d’enfant (>) plutôt qu’un sélecteur de descendance (caractère espace), en privilégiant par exemple blockquote > p à blockquote p ;
  • éviter de combiner plus de 2 ou 3 sélecteurs entre eux, en privilégiant par exemple blockquote#id1 p, blockquote#id2 p à section blockquote p ;
  • éviter, comme pour les classes, de faire précéder un identifiant par le nom de l’élément auquel il se rapporte, en privilégiant par exemple #nav à ul#nav.

Enfin, concernant l’utilisation d’identifiants, InDesign la facilite en attribuant systématiquement un id au body et aux éléments de bloc. Elle est certes un excellent recours pour simplifier la syntaxe des sélecteurs, mais elle peut-être parfois restrictive, donc à manier avec modération.

À noter : si le circuit de production le permet, et si le contexte s’y prête (définition du gabarit d’une collection), une modification de la maquette tenant compte des contraintes d’optimisation, peut être une stratégie ou compromis intelligent pour améliorer l’efficacité du processus éditorial print et numérique. A minima, si la création du fichier EPUB est externalisée, et si les options d’exportation du balisage n’ont pas été réalisées dans la version print, il est indispensable de mettre à jour la maquette a posteriori.

Conséquence de l’utilisation des sélecteurs hiérarchiques sur les fichiers HTML

Il est tentant, lorsqu’on optimise le fichier CSS et qu’on cherche à limiter la prolifération des classes, de recourir à ces différents sélecteurs CSS en raison de leur efficacité. Dans ce cas, un certain nombre de classes, utilisées dans la maquette, deviennent de facto caduques. Par souci de cohérence, on doit donc idéalement modifier les balises dans le fichier HTML. Toutefois, il est nécessaire de garder en tête le contexte dans lequel ils sont utilisés, à savoir une création d’EPUB.

En effet, contrairement à une création de site web, le fichier InDesign est susceptible d’être réexporté lors d’une réédition ou d’une correction du contenu. Le fichier CSS doit donc rester au plus près de la maquette InDesign afin de pouvoir être réutilisé lorsque l’on réexporte le fichier InDesign. C’est cette raison, entre autres, qui exige qu’on renseigne les options du balisage en adaptant le nom des classes à la syntaxe CSS.

Toutefois, le fait de cibler les éléments en fonction de leur position dans le document HTML ou du contexte n’implique pas nécessairement de modifier les balises HTML. Or dans la mesure où certaines classes, inutiles dans le cadre d’une création de site Web ou lorsqu’on privilégie l’utilisation de sélecteurs hiérarchiques, existent déjà dans la maquette, il peut être plus simple ou tentant de les utiliser pour cibler certains éléments.

En revanche, les sélecteurs hiérarchiques peuvent constituer une alternative à la création de nouvelles classes lorsqu’on supprime les formatages locaux, ces derniers résultant le plus souvent d’une paresse d’une maquettiste ou de sa tentation de ne pas abuser des styles lorsqu’il doit produire une mise en forme ponctuelle.

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.