Modèle de feuille de style en cascade (Cascading Style Sheet; CSS) pour les sites du Gouvernement du Canada
Modèle de feuille de style en cascade
(CSS Cascading Style Sheet)
pour les sites du Gouvernement du Canada
Table de matières
1.0 Introduction
2.0 Objectifs
3.0 Fichiers
4.0 Mise en application
5.0 Variantes connues
Le but du présent document est de décrire le modèle de feuilles de style en
cascade (CSS) conçu pour être utilisé dans le cadre de la Normalisation des
Sites Internet (Common Look and Feel). Le modèle comprend un ensemble de
pratiques exemplaires et constitue un point de départ pour la création de CSS
plus complexes. Le fichier CSS est accompagné d'une page HTML qui explique
l'utilisation et qui peut servir de point de départ à l'établissement d'un modèle
("template"). Finalement, un guide est fournit pour montrer comment
utiliser les éléments du CSS.
Veuillez lire les instructions qui suivent attentivement avant d'utiliser la
feuille de style. Vous trouverez des liens pour télécharger les fichiers requis à la section 3.0.
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é.
L'objectif principal visé dans la conception de la feuille de style en cascade
a été de permettre que tous les éléments textuels d' une page Web se
redimensionnent de façon proportionnelle lorsque les réglages du navigateur sont
modifiés. Il s'agit d'une fonction importante pour toute personne désirant
augmenter ou diminuer la taille du texte d' une page Web, que la personne ait un
handicap visuel ou non.
La feuille de style en cascade est conforme aux normes du W3C pour les CSS et
pour l'accessibilité des sites Web, et non aux caractéristiques des divers
navigateurs. Durant la conception et les essais, l'accent a toujours été mis sur
les techniques générales plutôt que sur des techniques adaptées à un
navigateur en particulier.
- La feuille de style en cascade s'adapte aux normes actuelles régissant le Web
tout en assurant une plus grande compatibilité avec les versions futures des
technologies Web.
- Cette feuille de style a comme avantage secondaire de ne pas obliger
l'utilisateur à recourir à des techniques de détection de navigateur.
La feuille de style en cascade se limite principalement à l'utilisation des
directives CSS-1 plutôt que des directives CSS-2 plus avancées afin d'assurer
une plus grande compatibilité avec les navigateurs. Ceci garantit garantit que le résultat
final sera compatible avec les nombreux navigateurs sur le marché
- Les directives CSS pour la mise en page ont volontairement été laissées de
côté et l'utilisation des directives CSS-2 a été limitée au strict minimum.
- L'utilisation des directives concernant les technologies non-visuelles, comme
les logiciels d'impression et les feuilles de style sonores, a aussi été tenue
au minimum à cause du manque de normalisation des renseignements qui
apparaissent à l'écran.
Dans le but de faciliter l'adoption de cette feuille de style en cascade dans
les ministères et organismes fédéraux, la feuille définit un minimum d'éléments
purement cosmétiques.
- Bien que la feuille de style en cascade comporte une palettes de couleurs
initiale pour les boutons et les entêtes, les ministères et organismes qui
l'utiliseront sont encouragés à faire les modification requises pour y intégrer
leur propre style visuel .
- De nombreux éléments HTML comment le <a href> n'ont pas de style
visuel défini afin de permettre aux organismes de les modifier ou de les
laisser ainsi.
- Puisque la feuille de style en cascade est conçue avec simplicité, elle est
facile et à comprendre et remplit ainsi un rôle éducatif.
Tel que mentionné dans la section sur la simplicité, la feuille de style en
cascade a été conçue de façon à permettre aux organismes de la modifier en
fonction de leurs besoins.
- Quelques déclarations de classes spécialisées sont inclues afin d'indiquer
comment on peut étendre et adapter la feuille de style.
- Les ministères et organismes qui utilisent déjà des feuilles de style en
cascade pourront ajouter leurs styles à la feuille de style en cascade de base.
Les fichiers décrits ci-dessous définissent et accompagnent la feuille de style en cascade. Vous pouvez télécharger
un fichier ZIP qui les contient. La prochaine section expliquera comment l'utiliser.
- clf-nsi.css: feuille de style en cascade de base
- clf-nsi2.css: feuille de style en cascade supplémentaire qui permet de
changer la taille du texte dans les navigateurs plus récents
- template_f.html: Cette page HTML démontre l'utilisation des styles définis et
peut servir de gabarit.
- model-css-style-guide_f.html: Ce guide décrit les classes dans la feuille de style en
cascade et explique comment les utiliser.
- autres fichiers: le fichier template_f.html utilise quelques images (model-css-spacer.gif,
model-css-fip_f.gif, model-css-testimage.gif)
Remarque concernant le gabarit
Le fichier template_f.html est un excellent exemple de page Web construite selon
les normes et qui utilise des boutons en mode texte, donc parfaitement
accessibles. Le code est valide selon les normes HTML et CSS et rencontre de
surcroît les normes d'accessibilité. De plus, la page comporte des exemples de
la plupart des éléments HTML dans ce contexte de conformité aux normes.
N'hésitez pas à vous reporter au modèle et à l'utiliser comme point de départ.
Tout ce qui manque, c'est la touche artistique et personnelle qui permettra à
votre organisation de l'adapter pour le faire vôtre.
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.
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é.
Avant d'utiliser la feuille de style en cascade sur votre site Web, veuillez
examiner les points suivants :
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.
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.
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.
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).
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.
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.
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.
|
