SELFHTML/Aides à la navigation Feuilles de style CSS | SELFHTML/Aides à la navigation Feuilles de style CSS |
les feuilles de style sont un complément direct à HTML. Il s'agit d'un langage pour définir les propriétés de format de commandes HTML distinctes. À l'aide de feuilles de style vous pouvez par exemple déterminer que les titres N°1 auront une taille de police Helvetica de 18 points, mais pas en caractères gras et avec un espace de 1,75 centimètres les séparant du paragraphe suivant. Des mentions de cette nature ne sont pas possibles avec le HTML courant.
Mais ce n'est que le début. Les feuilles de style offrent beaucoup plus de possibilités. Vous pouvez affecter à des passages de votre choix d'un fichier HTML, une couleur d'arrière plan distincte, une image d'arrière plan (papier peint) distincte ou diverses bordures. Vous pouvez positionner au pixel près dans la fenêtre d'affichage du navigateur WWW, des éléments. Pour la présentation à l'impression, des commandes sont prêtes pour la mise en page et le contrôle du flux de texte. Pour la reproduction acoustique de fichiers HTML, il existe toute une panoplie de commandes pour régler finement des systèmes artificiels de restitution de la parole. Quelques propriétés CSS sont aussi en mesure d'influencer la fenêtre d'affichage du navigateur, comme par exemple l'aspect du curseur. Des filtres spéciaux enfin, qui à l'heure actuelle sont encore cependant spécifiques à Microsoft permettent des effets graphiques pour des textes normaux, effets qui nous sont connus via des programmes graphiques comme PhotoShop.
Une autre particularité importante des performances des feuilles de style est de permettre de mentionner des définitions globales. Ainsi par exemple vous pouvez noter dans l'entête d'un fichier HTML des définitions globales pour l'aspect d'une cellule de tableau. Toutes les cellules de tableau du fichier HTML correspondant reçoivent alors les propriétés de format qui ont été définies une fois de façon globale. Cela économise du travail de codification et réduit la taille des fichiers HTML. Vous pouvez même noter vos définitions de feuilles de style dans des fichiers séparés. Vous pouvez ensuite référencer de tels fichiers de feuilles de style dans autant de fichiers HTML que vous le désirez. De cette façon vous pouvez créer pour de grands projets des présentations uniformes. Avec quelques petits changements dans un fichier de feuilles de style central vous pouvez appliquer une autre présentation à des centaines de fichiers HTML.
Les feuilles de style soutiennent donc premièrement la présentation professionnelle dans la conception Web et deuxièmement elles contribuent à l'image de marque de la firme pour de grands projets ou pour des présentations spécifiques à la firme.
 
|
Exactement comme pour HTML les CSS sont également normalisées par le consortium W3. Il s'agit donc d'un standard librement utilisable, clairement documenté et indépendant de toute firme. Pour les CSS il y a exactement comme pour HTML un groupe de travail au consortium W3 qui s'occupe du développement du langage et qui se soumet pour le faire au règlement présidant à la création de ce qu'on appelle les Recommandations (Recommendations) du consortium W3.
Exactement comme il y a plusieurs versions du langage HTML, il y a aussi plusieurs versions du langage CSS. La première version 1.0 apparut en 1996 et fut remaniée en 1999. En 1998 la version 2.0 reçut le statut de recommandation. Entre temps la version 3.0 est en cours d'élaboration. Dans la présente documentation, il ne sera tenu compte que des deux premières versions. Dans ce chapitre, les symboles suivants seront utilisés pour distinguer les versions CSS:
|
Il existe plusieurs langages pour définir des feuilles de style, les CSS ne sont que l'un d'entre eux. Mais c'est le langage qui a été créé spécialement pour compléter HTML et qui est pour cette raison optimisé pour les pages Web basées sur HTML. CSS représente les initiales de "Cascading Style Sheets". Il y a d'autres langages de style comme le "Document Style Semantics and Specification Language" (DSSSL), qui a été conçu pour SGML et qui est exactement comme SGML un peu "sophistiqué", et le "Extensible Stylesheet Language" (XSL) entre-temps plus connu, qui a été développé comme langage de formatage pour XML (sur XSL voir aussi 
représentation de données XML).
Sur le Web vous pouvez suivre le développement des CSS jusqu'à aujourd'hui et sa poursuite à l'avenir sur les pages du consortium W3:
Page d'accueil sur les feuilles de style au consortium W3
Par cette page vous aboutissez à des informations sur les CSS, sur XSL et DSSSL ainsi qu'à des projets logiciels touchant au soutien du Style.
Page d'accueil sur les feuilles de style CSS au consortium W3
Par cette page vous aboutissez directement à des informations et actualités sur les CSS.
|
|
Netscape 4.x interprète beaucoup de propriétés du langage CSS version 1.0 et une partie des commandes de la version CSS 2.0. L' Explorer Internet MS connaît déjà une grande part de la version CSS 1.0 depuis sa version 3.0 de l'année 1996. Dans sa version 4.0 il interprète une partie de la version CSS 2.0 et quelques mentions de feuilles de style spéciales introduites par Microsoft. Sur le plan de la 4ème génération de produits des deux navigateurs, l'implémentation CSS est cependant encore incomplète et très différentes, et en particulier pour Netscape de la 4ème génération il y a en partie encore certaines erreurs à hérisser le poil. Depuis la version 5 de l'Explorer Internet MS et de la version 6 de Netscape la situation s'est un peu améliorée. Le navigateur Opera se trouve depuis sa version 5 à un bon niveau en ce qui concerne les CSS. Il n'y a cependant toujours pas d'implémentations complètes de CSS 2.0 chez les logiciels de navigateurs meneurs.
Tout cela ne vous dispense pas, quand vous créez des styles pour vos pages Web, de tester tous les formats avec différents navigateurs. Les implémentations CSS dans les navigateurs ne sont tout simplement pas assez uniformes pour que vous vous fiiez à ce que tout ait la même apparence qu'avec celui avec lequel vous travaillez. En outre, vous devez avoir conscience que l'effet optique de pages Web est aussi fortement dépendant du matériel en place chez l'utilisateur. Les pages Web ne sont pas seulement lues par des ordinateurs haut de gamme avec des écrans de 19 pouces et 16,7 millions de couleurs. Elles sont aussi affichées avec des ordinateurs portatifs et des ordinateurs de poche ou même avec des ordinateurs désuets. Ce sont justement les technologies différentes qui aujourd'hui se partagent le marché, qui garantissent des effets très différents par exemple pour les couleurs. Ce qui sur un écran paraîtra beige, paraîtra rose bonbon sur le suivant. Il est certes possible de calibrer les écrans, mais vous pouvez difficilement exiger de l'utilisateur qu'il règle son écran avant de contempler vos pages Web. Cependant depuis CSS 2.0, existe la possibilité de définir différents formats CSS pour différents moyens de sortie. Ce qui ne résout pourtant pas tous les problèmes.
Ce qui est regrettable par ailleurs, c'est que les mentions de taille de police en CSS ne donnent pas des résultats uniformes à l'écran. Tandis que pour l'impression une police de 10 points est toujours de même taille, parce qu'il a été défini quelle est la taille d'un point, de telles mentions à l'écran sont converties en pixels. Là par contre rien ne fixe la taille d'un pixel. Et mêmes les facteurs de conversion ne sont pas les mêmes. Ainsi par exemple Windows convertit autrement les mentions de taille de police en pixels que les interfaces graphiques sous Unix ou que le système d'exploitation Macintosh. En bref - beaucoup de choses en CSS ne sont précises que dans le fichier, mais les résultats à l'écran peuvent pourtant être très différents et souvent peu satisfaisants.
Un aspect très important pour la création de styles pour pages Web, ce sont aussi les personnes qui doivent contempler ces pages lors de leurs visites. Rares sont ceux qui ne peuvent profiter que d'une manière limitée des couleurs et des formes en raison de faiblesses visuelles. Ce qu'en créant, vous estimerez peut être "raffiné", ne sera ressenti par ces gens que comme "illisible". Et "illisible" signifie: vous avez à nouveau un visiteur de moins sur vos pages. Les feuilles de style incitent facilement en raison de leurs possibilités à utiliser des polices sortant de l'ordinaire, ou bien à des choses telles que l'utilisation de couleurs ton sur ton. Aussi "beau" que cela puisse paraître - cela peut être aux dépens selon le périphérique d'affichage et sa résolution de la "convivialité" chez l'utilisateur, aux dépens mêmes donc de ce qui est recherché. D'un autre côté vous pouvez aussi utiliser les feuilles de style expressément pour optimiser vos pages pour les mal-voyants. Des contrastes de couleurs raisonnables, des polices d'écriture d'une taille normale, des espacements de caractères et des hauteurs de ligne courants, des combinaisons de couleurs critiques évitées comme rouge/vert pour l'arrière-plan/premier-plan - ce sont des propriétés qui doivent être la marque de pages Web bien visitées.
Quand vous mettez en page des pages Web, vous devez en tirer vos propres conclusions. Les feuilles de style vous permettent des possibilités inédites pour la présentation de pages Web. Toutefois plus vous rendrez la présentation de vos pages dépendantes des effets de feuilles de style, plus elles seront susceptibles d'engendrer des problèmes sur un matériel moins performant ou chez des personnes ayant des problèmes de vue. Certes, il n'y a, excepté des navigateurs basés sur le texte comme Lynx, pour ainsi dire plus de navigateur considéré comme répandu qui ne soutienne pas du tout les feuilles de style. Pourtant dans les premières variantes de Netscape 4.x, qui sont encore répandues, une dépendance lourde de conséquences est programmée: quand l'utilisateur y désactive JavaScript, le navigateur n'affiche plus non plus de feuilles de style. La raison en est que dans le navigateur Netscape, les feuilles de style CSS étaient à l'origine interprétées directement par l'interpréteur JavaScript, ce pourquoi il y a dans Netscape 4.x une dualité de syntaxe aujourd'hui vieillie du nom de JSSS qui permet les définitions de feuilles de style CSS au moyen de JavaScript. D'un autre côté, cette spécialité de Netscape 4.x présentait un avantage: en y désactivant JavaScript, il est possible de tester vos pages Web stylisées avec les CSS sans soutien CSS. Dans les versions plus récentes de la version 4.x de Netscape, il est possible de désactiver les CSS indépendamment de JavaScript. Il faut vous efforcer en tout cas de faire passer ce "test de rigueur".
|
|
Les feuilles de style CSS sont constituées de formats que vous définissez pour certains éléments HTML ou pour un certain nombre de ces éléments HTML. Pour choisir un certain groupe d'éléments HTML auquel doit s'appliquer un format, il y a dans les CSS la syntaxe de ce qu'on appelle les sélecteurs. Les formats CSS peuvent être définis soit dans un passage de style global, dans un fichier CSS externe ou bien dans le repère d'ouverture d'un élément HTML.
Les formats CSS se composent d'une ou plusieurs propriétés et d'affectations de valeur à ces propriétés. Vous pouvez ainsi par exemple définir un format pour les titres N°3 pour lequel vous fixez pour les propriétés telles la taille de police, la couleur de police et l'espace qui le sépare du paragraphe qui suit les valeurs correspondantes.
Dans le chapitre expliquant comment définir des formats CSS est décrit à quels endroits vous pouvez, en HTML, incorporer des CSS, comment fonctionne la sélection de groupes d'éléments HTML, et quelles règles générales s'appliquent pour les définitions de format. Le chapitre traitant des propriétés CSS décrit par contre systématiquement les diverses propriétés possibles pour la mise en place d'éléments que vous pouvez noter dans les formats et quelles sont les affectations de valeur possibles pour ces propriétés.
|
| |
 |
 Incorporer des feuilles de style en HTML
|
 |
Variantes HTML (strict, transitional, frameset)
|
| SELFHTML/Aides à la navigation Feuilles de style CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
