Feuille de style en cascade (CSS)

Les CSS sont une façon de séparer les éléments de structure d'un site Web et sa présentation. L'utilisation d'une CSS vous permet de maintenir la partie « architecture » des documents à une taille minimum tout en gardant le contrôle absolu sur l'apparence du site.

Vous décidez de la grosseur et la couleur des polices utilisées, et vous en changez les détails, à volonté. Par exemple : l'apparence d'un site qui n'a pas été conçu à l'aide d'une CSS peut varier d'un utilisateur à l'autre, cela à cause des paramètres qui diffèrent d'un navigateur à l'autre

Pourquoi utiliser CSS?

Idéalement, tous les sites Web devraient être conçus à l'aide d'une feuille de style. Prenons un exemple pour illustrer le principe : vous créez un site de 30 pages en utilisant une police bleue tout au long. Trois mois plus tard, le client décide qu'il veut maintenant une police orange. Si le site n'a pas été conçu avec une CSS, la simple action de changer la couleur peut s'avérer très longue étant donné qu'il vous faudrait vous y prendre une page à la fois, et parfois même une section à la fois. Toutefois, si le site a été conçu avec une CSS, il suffit de spécifier que l'on désire une police orange, et le tour est joué, sur toutes les pages, en une seule opération.

La beauté de cette technique est que vous n'avez besoin que d'une seule feuille de style pour toutes les pages d'un site, ou alors quelques unes coordonnées entre elles si le site contient des pages qui diffèrent beaucoup, comme des sections comportant de la documentation technique et d'autres ayant un contenu de type marketing. Un autre avantage est que la CSS assure une uniformité dans l'apparence des pages, et cela tout au long de la navigation sur le site.

Contrairement à ce que l'on pourrait penser, ce que l'utilisateur voit n'est pas toujours ce que le programmeur voulait : les différentes plates-formes ne prennent pas en charge le HTML de la même façon. Mais, de par sa leur définition, les feuilles de style créent un effet de cascade, c'est-à-dire qu'elle communique avec le navigateur afin de créer une présentation harmonisée pour l'utilisateur. Ainsi, l'utilisation d'une CSS peut faire la différence entre un site qui sera extrêmement attrayant et un autre qu'on qualifiera de pollution visuelle.<

Les feuilles de style représentent une façon à la fois flexible et efficace de spécifier le formatage HTML. Elles permettent de séparer les données de mise en page du contenu des fichiers, vous laissant ainsi le plein contrôle sur le choix des polices, des couleurs, des retraits, des marges ainsi qu'un grand nombre de paramètres additionnels, sans jamais mettre en péril leur structure.<

Quand devrait-on utiliser une feuille de style?

En tant que concepteur, cela signifie que l'information propre au site devrait se trouver dans les fichiers HTML, mais ces derniers ne devraient pas contenir l'information sur la façon dont le site s'affichera. Vous l'avez déjà sûrement deviné, voilà le rôle de la feuille de style en cascade.

Grâce à une CSS, vous déterminez, par exemple, la façon dont vous voulez que les titres paraissent. Vous n'avez, pour cela, qu'à entrer l'information une seule fois. Chaque titre du site étant lié à la feuille de style adoptera maintenant cette apparence. Vous désirer différencier un peu plus les titres de niveau 3 de ceux du niveau 2? Éditez simplement la CSS et tous les titres en question arborent maintenant l'apparence désirée! Imaginez la quantité de travail que vous venez d'épargner (et d'erreurs que vous avez évitées).

L'un des autres avantages marqués se situe dans la gestion de sites volumineux et sophistiqués. Grâce à cette technique, des organisations complètes peuvent partager un petit nombre de feuilles de style, et ainsi s'assurer l'homogénéité du site en entier, sans devoir constamment tout mettre à jour ou éditer pour implanter les changements

Les CSS sont-elles compliquées à utiliser?

L'utilisation des CSS s'adresse à ceux qui possèdent une solide compréhension de la création de pages Web, soit le codage à la main ou bien en à l'aide d'outils conçus à cet effet comme Dreamweaver MX, GoLive, FrontPage ou autre. Une bonne connaissance du code HTML s'avérera également très utile de temps à autre

Quels programmes comprennent la technologie CSS?

Presque tous les éditeurs HTML, tels que GoLive de Adobe, Dreamweaver de Macromedia, Topstyle Pro de Bradbury, Stylemaster de Western Civilisation, Style Studio de style-sheets.com ainsi que beaucoup d'autres incorporent les CSS. On peut aussi rédiger sa propre feuille de style dans un éditeur de texte et l'enregistrer avec une extension .css.

Existe-t-il des problèmes de compatibilité avec CSS?

À ses débuts, CSS n'était que partiellement pris en charge par Netscape 4.0x et 4.5 ainsi que par Internet Explorer 3 (très peu), 4, 4.5 et 5. Il s'agissait alors d'un sérieux problème. Les concepteurs sentaient qu'ils devaient créer leurs sites en fonction de tout ceux qui utilisaient des navigateurs de l'ère « avant CSS ». Ils évitaient ainsi toute forme de feuille de style. C'est maintenant chose connue que la quantité d'internautes qui utilisent soit un navigateur moderne, soit la plus récente mouture ne cesse de croître. Ce qui, il y a un an, n'était que très peu employé fait maintenant office de norme. Si vous avez résisté à l'utilisation ou à l'apprentissage des feuilles de style parce qu'il s'agissait d'une technologie « expérimentale , notez bien que la grande majorité des visiteurs de votre site utilisent un navigateur qui prend en charge les CSS. Désormais, il ne s'agit plus du tout d'une technologie expérimentale.

Sur une autre note, même si la plupart des navigateurs prennent en charge les CSS depuis déjà un bon moment, il reste que la norme n'est pas universelle. Un certain nombre de concepteurs de site Internet croient, à tort, qu'une éventuelle prise en charge uniforme est un rêve utopique. Il s'agit plutôt, en partie, d'un prétexte pour ne pas toucher aux nouvelles technologies. C'était le cas il y a quelques années, mais maintenant ce n'est plus qu'une justification.

Qu'en est-il des différents niveaux de CSS?

CSS 1 a premièrement joué le rôle de recommandation vers la fin de 1996. La prise en charge de CSS 1 est maintenant quasi-totale pour la version 7 de Netscape, et très bonne pour les versions 5 et au-dessus de Internet Explorer pour Windows et la version 4.5 pour Macintosh. Pour ce qui est du navigateur Opéra pour Windows, la prise en charge était déjà excellente à partir de la version 3.5; les versions ultérieures en offrent une encore meilleure.

CSS 2 a fait son entrée en mai 1998, toujours à titre de recommandation. Il s'agissait d'un développement de CSS 1, avec quelques différences mineures. La prise en charge de CSS 2 était quasi inexistante pour les versions 4.x de Netscape et était très limitée pour les versions 4.5, 5 et 5.5 de Internet Explorer pour Windows

Même si les versions 6 de Internet Explorer et 7 de Netscape et Opera démontraient des signes prometteurs d'adaptation à CSS 2, le temps a clairement démontré que certains de ses aspects plus complexes (et parfois presque ésotériques) ne feraient jamais l'objet d'un consensus. Ainsi, c'est en janvier 2003 que CSS 2.1 a vu le jour. Il s'agit d'une version de CSS 2 épurée de ses aspects trop complexes. Désormais, les utilisateurs et les concepteurs pourront bénéficier de CSS tant sur les plans de la légèreté de chargement et de l'uniformité que ceux de la fiabilité et de la convivialité.

Voici un exemple d'un site Internet qui se sert bien de la technologie CSS. Petyourdog.com se sert constamment de la technologie CSS pour pouvoir rajouter du nouveau contenu. Leur section ï¿½ Dog Breeds ï¿½ incluant tous les ï¿½ Purebreds ï¿½ et les ï¿½ Hybrid dogs ï¿½ doit constamment ï¿½tre amï¿½liorï¿½e et modifiï¿½e. Sans le CSS cela deviendrait une tache trï¿½s ardue!