WEB1901

 


FORUM


NOS PRATIQUES
Communiquer et travailler grâce au réseau
Mieux comprendre l'internet
S'équiper
S'informer, se former et former à l'internet
Sites web
 


NOUS




PLAN
PLAN

 

> ACCUEIL > NOS PRATIQUES > SITES WEB > MAÎTRISER LA TECHNIQUE

Du bon usage des feuilles de style (CSS)


Les feuilles de style, en HTML, sont l'équivalent, sur votre logiciel de traitement de texte favori, des styles. Elles permettent de réunir, sous un nom que vous avez déterminé, puis d'attribuer un ensemble de caractéristiques à différents éléments de vos pages : arrière plan, texte, liens, titres, positionnement des éléments, alignement de texte, bordures... Les caractéristiques d'un style sont établies une fois pour toutes, et s'appliquent toutes en appliquant le style, sans avoir à ressaisir chacune d'entre elles.

Ce document n'est pas un texte pour l'apprentissage des CSS : tout au plus propose-t-il une liste des pages de formation bien faites. Mais il met en garde contre certaines erreurs fréquentes, et vous invite à réaliser des CSS visibles par tous.

 

Pourquoi les utiliser ?


Les feuilles de style sont "vendues" pour deux raisons, fort différentes.

La première est complètement inutile : les CSS vous permettent de positionner ("comme les magazines de la presse écrite", quelle référence…), au pixel près, les différents éléments de votre charte graphique, et, plus nocif encore, d'outrepasser les préférences du navigateur de votre lecteur. Adieu la souplesse du web qui permet à chacun, riche ou pauvre, 19" ou 15", Netscapien, IEnaute ou Linuxophile, presbyte ou astigmate, d'admirer vos pages de manière optimum.

L'autre raison est la bonne : il s'agit de différencier la structure du contenu. C'est à dire que, quel que soit le support (écran, papier, projecteur, braille, synthétiseur vocal…) , les feuilles de style vous permettent de rendre compréhensible la structure de votre document, tout en adaptant leur présentation. La méthode la plus antique de représentation de la structure d'un texte est celle utilisée dans la "littérature grise", mémoires ou thèses, mais également autrefois par les secrétaires, quand elles n'avaient pas encore à leur disposition la variété actuelle de polices de caractères. Les "grandes parties" se nomment I, II, III, etc, et leurs titres sont en majuscules. Les sous-parties sont appelées 1., 2., 3, etc. Les sous-parties deviennent alors 1.1., 1.2., 1.3., les sous-sous-parties 1.1.1., 1.1.2., 1.1.3., etc. Vous savez ainsi très exactement où vous en êtes, dans la logique de la démonstration ou de l 'exposé.

Dans la presse, ou dans les livres imprimés, qui ont à leur disposition un plus grand nombre de caractères, c'est la typographie qui permet la visualisation de la structure. Les modes évoluent, depuis Gutenberg et à travers les cultures écrites, mais, en ce début de 3e millénaire, et en France, on utilise communément un caractère "bâton" (type Arial, Helvetica) pour les titres et les sous-titres (plus ou moins grand, plus ou moins gras), et un caractère à empattement (type Times) pour les sous-titres de plus bas niveau, et le texte courant.

Vous comprenez maintenant les concepts de contenu, inhérents à un texte, et de structure (dépendant du media grâce auquel on consulte le texte : papier ou web, par exemple). La tendance actuelle travaille à séparer l'un de l'autre, afin de n'avoir qu'un original, qui s'adapte rapidement à tous les medias (c'est la base de la réflexion autour du XML, si vous en avez entendu parler). Les feuilles de style, lorsqu'elles définissent des niveaux de titre, s'intègrent à cette tendance. Voilà pourquoi vous concevrez vos différents styles selon leur fonction ("grandtitre", "titre", "soustitre", "texte"), et non selon leur apparence ("vertclairgrand", "rosevifpetit", "italiquebleu", etc.) : vous aurez ainsi également moins de mal à les appliquer de manière homogène, sur toutes vos pages.

Derniers avantages des CSS : si vous utilisez les feuilles de style externes, vous pouvez, en corrigeant quelques lignes sur un seul fichier, modifier l'apparence d'un style sur toutes vos pages (d'où un gain de temps notable). Elles économisent de la bande passante, en allégeant vos fichiers HTML des spécifications de polices et autres, toutes regroupées dans un seul (petit) fichier.

 

Comment ça marche ?


Les Cascading Style Sheets (CSS) ont été proposées à l'origine par le W3C (http://www.w3c.org/) : puisqu'il ne s'agit pas d'une invention d'un navigateur particulier, elles sont universelles (ou presque…).

Elles font partie du DHTML (Dynamic HTML), la version 4 du HTML. C'est à dire qu'elles ne sont reconnues par les navigateurs qu'à partir de versions récentes : Netscape 4, Internet Explorer 4. Vous devez donc penser à offrir une alternative pour les navigateurs plus anciens, ou pour les gens ayant désactivé la fonction dans les préférences (c'est possible avec Netscape).

Offrir une alternative est très simple : il vous suffit de nommer vos feuilles de style du nom des styles habituellement utilisés par le code HTML. Pour vos titres, au lieu d'utiliser "titreorange", choisissez "H1". Pour ce site (web1901), nous avons défini les styles suivants : BODY, P, H1, H2, H3, ADRESS, PRE (pour les indications de code, en typographie à chasse fixe type Courrier), UL, BLOCKQUOTE, et les paramètres pour les liens : A :link, A :hover (modification de l'aspect du lien quand on passe la souris au-dessus du texte : ce style ne marche que pour certains navigateurs) ; A :active et A :visited. Le fait d'utiliser les balises traditionnelles du HTML (H1, H2, H3, p, etc.), facilite en outre l'accès des sites aux handicapés visuels, dont les transcripteurs (braille ou vocaux) explicitent la structure du texte.

 

Quelques détails, encore


D'autre part, soignez votre code : aussi bien celui utilisé pour "déclarer" vos feuilles de style, que celui qui les appelle, dans vos fichiers HTML. Sachez que Netscape et Internet Explorer ne réagissent pas de la même manière au code (cela vous étonne ?), que vous aurez à tester le résultat, et que votre éditeur web favori n'est peut-être pas assez exigeant (une raison de plus pour étudier le code HTML, pour savoir le vérifier et le corriger, et ne jamais faire entièrement confiance à votre éditeur).

Si vous décidez d'utiliser la méthode consistant en déclarer vos feuilles de style dans un document externe, du type "mes_feuilles_de_style.css", veillez à n'utiliser, pour nommer les styles, que les caractères autorisés : les caractères de A à Z, de a à z et de 0 à 9, pour plus de sécurité. Les noms de feuilles de style contenant le signe "_" sont acceptées par DreamWeaver et par Internet Explorer 5, mais pas par Netscape 4.7. Faites tout de suite cette vérification : si vous devez reprendre toutes vos pages HTML pour modifier le nom de feuilles de style, c'est un peu tard… Par exemple : "notaemeraude", et non "nota_emeraude".

Vérifiez que les fonctions que vous décidez d'utiliser peuvent être interprétées par les navigateurs dont vous estimez que le parc de vos lecteurs est constitué. Il existe deux générations de feuilles de style : les CSS1 (recommandation du W3C en 1996) et les CSS2 (recommandation de 1998). Ne faites pas confiance à votre éditeur HTML, qui, pour avoir l'air branché, vous propose les tous derniers gadgets. Vérifiez la validité des styles sur les navigateurs grâce aux sites proposés dans le par. "Liens utiles", ci-dessous.

Pour les polices, proposez la vôtre, mais aussi, à chaque fois, un équivalent standard pour tous les systèmes ne la possédant pas, et en finissant par la police générique :

- pour les caractères bâtons : verdana, arial, helvetica, sans-serif
- pour les caractères à empattements : "times new roman", times, serif
- pour les polices à chasse fixe : "courier new", courier, monospace

Et mettez les noms composés entre guillemets : font-family :"Times New Roman", et non font-family :Times New Roman.

 

Liens utiles


Le site du WebDesignGroup, qui promeut la création de sites visibles par tous, indépendamment du navigateur ou de la machine utilisés par le lecteur. Dans ses outils ("Tools"), utilisez le "CSSCheck", un outil permettant de valider (gratuitement) votre fichier de déclaration de feuilles de style. Vous indiquez où se trouve votre fichier (par exemple, http://www.web1901.org/tek/web1901.css) et vous lancez le vérificateur.

http://www.htmlhelp.com/ (en anglais)

La référence ultime est bien sûr le site du WorldWideWeb Consortium (W3C, pour les intimes) :

http://www.w3.org/Style/ (en anglais)

La traduction en français de ces recommandations du W3C se trouve là :

- http://www.yoyodesign.org/doc/w3c/css1/index.html, pour les CSS1

- et là : http://www.yoyodesign.org/doc/w3c/css2/cover.html, pour les CSS2

Pour vérifier la compatibilité des propriétés et des navigateurs :

- le tableau référencé ci-dessous donne la liste des propriétés et la compatibilité (Yes, No, Partial, Buggy, Quirky (pire que Buggy ?), Unknown), pour les systèmes et les navigateurs suivants (mise à jour : janvier 2001) : sur Win95/98/NT : Netscape Navigator 4.6, 6.0, Internet Explorer 3.01, 4.0, 5.0, 5.5, Opera 3.6, 4.02, 5 ; sur Macintosh : Netscape Navigator 4.5, 6.0, Internet Explorer 3.02, 4.5 et 5.0 :

http://www.webreview2.com/style/mastergrid.shtml (en anglais)

- un groupe issu des News (comp.infosystems.www.authoring.stylesheets) sur les CSS, le "CSS Pointers Group", tient à jour une liste des bugs (mise à jour : décembre 2001)

http://css.nu/pointers/bugs.html (en anglais)

Quelques liens vers des pages francophones vous permettront de mettre très simplement en œuvre des feuilles de style :

- All HTML : Feuilles de Styles

http://www.allhtml.com/langages/themes02dhtml.php3

- Publication Html : Les feuilles de style

http://www.ccim.be/ccim328/htmlplus/idxstyle.htm

- JDNet Développeurs : Introduction aux feuilles de style

http://developpeurs.journaldunet.com/tutoriel/css/010315css_intro.shtml


Auteur(s) : Eve
Date : 27 janvier 2002

haut
FORUMNOS PRATIQUESNOUS
[WEB1901] Le site des webmestres associatifs
http://www.web1901.org - equipe⊕web1901.org