Comment introduire du CSS personnalisé dans un gabarit de transformation  ?

Les gabarits par défaut des fiches s’appuient sur xslt/v2/transformations/html/fiche.xsl et celui de la compilation sur xslt/v2/transformations/odt/compilation.xsl.

Lorsqu’on crée un nouveau gabarit HTML, le fichier extraction.xsl proposé initialement correspond au gabarit par défaut et donc s’appuie également sur une de ces deux feuilles de styles (via l’instruction <xsl:include href="bdf://this/xslt/v2/transformations/html/fiche.xsl"/> ou <xsl:include href="bdf://this/xslt/v2/transformations/html/compilation.xsl"/> pour une compilation).

Ces deux feuilles de style se chargent notamment de construire l’élément <head> du document HTML final où sont stockés toutes les déclarations de style. Elles proposent trois mécanismes différents pour indiquer ses propres règles CSS :

Le fichier custom/fiche.css

Ce fichier est présent dans les ressources de la distribution et il est vide. On peut le modifier librement et les règles décrites s’appliqueront à tous les gabarits : ceux des fiches, des compilations, ceux par défaut et ceux s’appuyant sur les deux feuilles de styles.

Le fichier custom/import.xsl

Les deux feuilles de style possèdent l’instruction d’import <xsl:import href="bdf://this/xslt/v2/transformations/html/_common.xsl"/> qui charge la feuille de style xslt/v2/transformations/html/_common.xsl qui, elle-même, inclut le fichier custom/import.xsl.

Ce dernier fichier comprend la règle suivante <xsl:template match="/" mode="custom-Head"> qui est vide. Cette règle est appelée par les deux feuilles de style au moment de la construction de l’élément <head> final.

On voit donc que cette règle <xsl:template match="/" mode="custom-Head"> peut être réécrite pour introduire de nouveaux éléments dans le <head> final, notamment des éléments <style>.

Comme pour custom/fiche.css, les modifications de custom/import.xsl concernent tous les gabarit qui s’appuient sur les deux feuilles de style, que ce soit le gabarit par défaut.

La règle <xsl:template match="/" mode="_Head">

Les deux feuilles de style possèdent une règle vide <xsl:template match="/" mode="_Head"> qui est appelée juste avant la fermeture </head>.

Il suffit de surcharger cette règle dans le fichier extraction.xsl de son gabarit personnalisé pour rajouter les éléments de son choix.

Modification du style de la balise <h1>

<xsl:template match="/" mode="_Head" priority="2">
    <style>
        h1 {
            text-align: center;
            font-size: 2rem;
            }
    </style>
</xsl:template>

Alternative : ignorer les feuilles de style

Le passage par les feuilles de style xslt/v2/transformations/html/fiche.xsl et xslt/v2/transformations/odt/compilation.xsl n’est nullement obligatoire. On peut se contenter d’inclure xslt/v2/transformations/html/_common.xsl.

Il faut alors écrire dans son gabarit la règle <xsl:template match="/"> qui va servir à construire l’élément <html>. Dans cette situation, la liberté est totale.