Modèle de feuille de style en cascade (Cascading Style Sheet; CSS) pour les sites du Gouvernement du Canada

4.0 Mise en application

La mise en application de la feuille de style en cascade est relativement simple. Il suffit de suivre les étapes décrites ci-dessous et de se reporter au fichier template_f.html comme exemple.

Certains aspects requièrent une attention particulière. Il est donc important de bien suivre les étapes.

4.1. Sauvegardez les fichiers

Téléchargez le fichier ZIP en utilisant le lien qui se trouve à la section 3.0 et décompressez les fichiers dans un endroit approprié.

4.2. Modifiez la feuille de style en cascade

Avant d'utiliser la feuille de style en cascade sur votre site Web, veuillez examiner les points suivants :

4.2.1. Couleurs

Les couleurs « officielles » varient d'un ministère ou organisme à l'autre. Le style à dominante bleu utilisé dans le modèle n'est peut-être pas idéal pour votre contexte. Modifiez les couleurs au besoin en changeant les valeurs définies par le symbole # (exemple : #003366) dans le fichier clf-nsi.css.

4.2.2. Commentaires

La feuille de style en cascade comporte de nombreux commentaires textuels qui servent à en expliquer la conception et l'utilisation. Ces commentaires augmentent sensiblement la taille des fichiers et le volume de données transmises sur la bande passante augmentera proportionnellement. Il sera donc peut-être utile de retirer une partie ou la totalité des commentaires dans la version qui ira en production.

4.2.3. Taille extensible du texte

La question suivante s'adresse uniquement aux experts dans le domaine : devrions-nous utiliser une ou deux feuilles de styles? Le présent guide présente l'utilisation de deux feuilles de styles: la première fonctionne avec la plupart des navigateurs et la deuxième (qui est chargée grâce à la directive @import) permet aux navigateurs plus récents de modifier la taille du texte. Si vous travaillez dans un environnement contrôlé, comme un Intranet, où vous pouvez être certains du type de navigateur utilisé pour accéder à vos pages, vous pouvez simplement intégrer la deuxième feuille à la première en remplaçant les tailles fixes de la première par les pourcentages de la deuxième. Par contre, cela empêchera les anciens navigateurs de modifier la taille du texte. Il faut donc faire des essais approfondis avant d'adopter cette approche.

4.3. Vérifiez avec l'aide du modèle

Lorsque vous aurez modifié la feuille de style en cascade à votre goût, vous pourrez utiliser la page template_f.html pour vérifier les résultats. Modifiez les couleurs au besoin. Faites des essais complets dans le plus grand nombre de navigateurs possible (les sites Internet doivent être compatibles avec le plus grand nombre de navigateurs alors que les sites Intranet sont parfois visités par un nombre plus limité de navigateurs).

4.4. Intégrez la feuille de style en cascade à votre site

Pour intégrer la feuille de style en cascade à votre site, utiliserez la syntaxe suivante (tel que dans le fichier "template_f.html"):

<link rel="stylesheet" href="clf-nsi.css" type="text/css">
<style type="text/css">
 @import url(clf-nsi2.css);
</style>

La balise <link...> renvoie au premier fichier CSS. La directive @import renvoie au deuxième fichier CSS et permet de changer la taille du texte dans les navigateurs plus récents. (Si on n'utilise qu'une feuille de style, tel que discuté dans la section 5.2.3., seule la balise <link...> est utilisée.) Vous devrez modifier le chemin des fichiers CSS, soit dans l'attribut href de la balise link ou dans la portion url de la directive @import, si les fichiers CSS ne se trouvent pas dans le même dossier que les pages HTML.

ATTENTION: Les pages existantes nécessiteront peut-être des changements. En effet, si des balise <font> sont utilisées, par exemple, il faudra éventuellement les remplacer par des références à des classes CSS. De plus, si vous utilisez déjà une feuille de style en cascade, vous devrez intégrer vos classes existantes à la nouvelle feuille de style en cascade ou bien relier les pages à plusieurs CSS. Les besoins varieront d'un cas à l'autre.

4.5. Modifier la feuille de style en cascade

Il y a de nombreuses raisons de modifier la feuille de style en cascade :

• vous utilisez la feuille de style en cascade pour la première fois et vous devez adapter les couleurs à l'usage local;
• vous devez réaliser des effets visuels qui ne sont pas définis dans la feuille de style en cascade;
• vous devez intégrer des styles existants à la nouvelle feuille de style en cascade;
• l'exemple fourni (template_f.html) vous a inspiré à concevoir d'autres styles.

Veuillez respecter les lignes directrices ci-dessous lorsque vous modifiez la feuille de style en cascade :

• Modifiez le moins d'éléments possible : d'importants efforts ont été investis dans la conception et la validation de ce modèle afin d'assurer sa compatibilité avec le plus grand nombre de navigateurs possible. Tout changement risque d'engendrer des problèmes.
• Ajoutez des classes plutôt que de modifier les éléments de base : cette recommandation découle du premier principe et vous encourage à modifier le moins possible les éléments de base afin d'éviter de réduire l'accessibilité et la compatibilité.
• Vérifiez toujours les modifications dans le plus grand nombre de plate-formes de navigateur possible.
• N'oubliez pas de rajuster les pourcentages dans le deuxième fichier si vous modifiez les tailles dans le premier.

5.0 Variantes connues

Tel qu'indiqué plus haut, la feuille de style en cascade a été conçue pour respecter les cinq principes suivants: l'accessibilité, la conformité aux normes, la compatibilité, la simplicité et l'extensibilité. Le résultat est une solution qui fonctionne bien avec la plupart des navigateurs, sur toutes les plate-formes techniques, assurant ainsi le meilleur accès possible à l'information. Évidemment, cela ne signifie pas que toutes les pages auront une apparence identique dans tous les navigateurs et sur toutes les plate-formes.

Plusieurs variantes ont été documentées, trop nombreuses pour être énumérées ici. Toutefois, aucune de ces variantes n'empêchera qui que ce soit d'obtenir les informations désirées dans les pages Web qui utiliseront cette feuille de style en cascade. Les choses seront simplement affichées d'une manière légèrement différente. Par exemple, il est possible que quelques utilisateurs de Macs voient du texte un peu plus petit dans les liens à gauche des pages, et que des utilisateurs de Netscape 4 trouvent que les boutons en haut de la page ne sont pas tous exactement de la même largeur.