5.9.6. Modularisation en CSS

Le support des feuilles de style en CSS par les spécialisations DITA peut se manifester en utilisant les mêmes principes que pour les définitions DTD ou les schémas, aboutissant à des feuilles de style faciles à tenir qui appuieront une spécialisation suivante avec un minimum d'effort.

Spécification de la définition de module

La forme du sélecteur CSS d'une propriété compatible avec les spécialisations est la suivante :

*[class~="topic\/section"]   {
  margin-top: 12pt;
  display: block;
}

Le sélecteur CSS qui associe le style à l'élément n'utilise pas une correspondance littérale avec le nom de l'élément. En effet, en fonction de la valeur par défaut de l'élément, par exemple class="- topic/section reference/refsyn ", cette règle s'appliquera sur la valeur "topic/section" (ou encore le « mot ») et réalisera le stylage ou la transformation associés, indépendamment du nom réel de l'élément.

Notez que la chaîne d'attribut doit contenir un caractère d'échappement pour le caractère BARRE OBLIQUE « / », qui n'est pas valide dans un sélecteur CSS sinon.

Le motif de sélecteur dans cet exemple indique effectivement dans la terminologie CSS de « sélectionner tout élément dont l'attribut class contient le mot "topic\/section" ».

Les systèmes CSS ne sont pas tous capables de filtrer sur des valeurs qui ne sont pas physiquement présentes dans le document d'instance. Puisque les valeurs d'attribut class en DITA sont typiquement fournies par des déclarations par défaut dans la définition DTD ou le schéma, les systèmes CSS ne pourront pas tous filtrer directement sur une source DITA.

Lorsque les correspondances directes sur les spécialisations ne sont pas possibles, on peut autrement effectuer une normalisation (un prétraitement de la source DITA afin de pousser les valeurs de la définition DTD ou du schéma directement dans l'instance) ou utiliser des règles fondées sur les noms des éléments.

Les règles fondées sur des noms d'élément ne seront pas compatibles avec les spécialisations. La feuille de style d'appel devra importer chaque feuille de style supplémentaire requise dans le champs d'application (scope) des thèmes et vocabulaires spécialisés, chacune définie explicitement en utilisant des sélecteurs de nom d'élément. Dans ce scénario, les nouveaux éléments non gérés n'auront pas de propriétés de rendu associées, tandis que dans les systèmes compatibles avec les spécialisations ces éléments pourront se replier (fall back) sur une règle qui se déclenche depuis une valeur gérée précédemment dans la chaîne de l'attribut class.

Règles d'assemblage des feuilles de style CSS

CSS gère la spécialisation d'une façon similaire à XSLT. Ce document décrit une pratique exemplaire de nommage et de remplissage des feuilles de style CSS qui suit le modèle de conception des spécialisations pour les définitions DTD et les schémas. Bien que non obligatoire pour la mise en œuvre de la gestion CSS pour DITA, le respect de cette pratique permettra de réaliser les spécialisations suivantes d'après le modèle avec un minimum d'effort et devrait faciliter la maintenance des fichiers afférents.

Pour gérer une définition DTD ou un schéma DITA nouvellement spécialisés qui auront été rendus compatibles avec une spécialisation avec des valeurs d'attribut class uniques, créez un module qui contient seulement les règles nécessaires pour les nouveaux éléments uniques dans la spécialisation, de façon similaire aux fichiers modules (« .mod ») qui déclarent les éléments uniques dans la spécialisation. Le nom de ce module devrait être le même que que le nom racine du module de spécialisation. Dans le cas de la définition DTD de référence de DITA, les déclarations d'élément se trouvent dans le fichier reference.mod et les règles deltas correspondantes pour CSS dans le fichier reference.css.

Créez ensuite une feuille de styleCSS de surclassement ("override") qui commence par une instruction @import nommant le fichier CSS utilisé par cette définition DTD parente de la spécialisation. Cette importation recueille la gestion de tous les éléments qui sont communs avec la définition DTD parente. Puis ajoutez une autre instruction @import, nommant le module delta CSS créé précédemment. Puis copiez les règles CSS pour toute gestion définie antérieurement à associer aux nouveaux noms d'élément, et renommez au besoin les sélecteurs avec les nouvelles valeurs spécialisées pour chaque nouvel élément. Ces règles CSS ajoutées sont les deltas de la nouvelle feuille de style, un peu comme les définitions DTD spécialisées construites sur des définitions DTD précédentes ajoutent des définitions d'élément deltas. Cette technique se rapproche d'une gestion de type "fall-through", de ce qui se produirait normalement si l'attribut class pouvait se lier à la classe racine.

Finalement, si nécessaire, modifiez les comportements de ces nouvelles règles CSS deltas. Comme ce processus réutilise une part importante des comportements précédents, le temps passé à gérer les changements deltas est minimal.

Pour utiliser une feuille de style CSS compatible avec une spécialisation avec un thème DITA spécialisé, associez-la simplement au thème soit en utilisant l'instruction de traitement de lien de feuille de style définie par le W3C, soit en suivant les règles de configuration de votre éditeur ou de votre navigateur.