mai

15

Bien utiliser les feuilles de style (CSS)

Par Martin

Après avoir vu comment bien écrire le code HTML & XHTML, voyons aujourd’hui comment bien utiliser les feuilles de style CSS.

Définition

Feuille sous la pluie
Photo de Courambel depuis Flickr

Historique

Les feuilles de style sont nées dès l’invention du web, mais elles étaient à l’origine destinées à l’internaute lui même qui pouvait ainsi faire sa propre mise en page pour son confort de lecture personnel. Plusieurs implémentations ont ensuite été proposées par les différents éditeurs de navigateurs web, puis à la création du W3C, La norme CSS1 est créée dès 1996. Les différents navigateurs de l’époque l’implémentent de manière partielle et faussée.
En 1998, le W3C publie la recommandation CSS2, elle aussi ne sera que partiellement utilisable et buggée notamment dans Internet Explorer 6.
A partir de 2001 une version CSS2.1 corrige les problème de la version précédente en intégrant les usages réels des navigateurs.

Aujourd’hui la norme 3.0 est en cours d’écriture, mais depuis 1999 ! Aucun module n’est fini et les navigateurs n’appliquent les nouvelles fonctionnalités que de manière expérimentale.

Pour plus d’information lisez l’historique complet des feuille de style en cascade sur Wikipédia.

A quoi ca sert

Les feuilles de style en cascade, souvent abréviées CSS, sont un langage informatique normalisé par le W3C qui permet de mettre en forme les document HTML et XML et donc XHTML de façon simple et homogène.

Le principe réside dans la séparation entre le contenu et la mise en forme. Il est ainsi très simple de changer la mise en forme sans toucher au contenu ou d’appliquer une même mise en forme sur une multitude de contenus. On peut ainsi écrire le contenu sans se soucier de la mise en forme et changer la mise en forme uniformément sur toutes les pages d’un site en ne modifiant que le fichier CSS.

Les styles peuvent être définis dans un fichier séparé du contenu HTML, au début d’un fichier HTML, ou directement dans les balises HTML. La première solution est la meilleure et permet une bonne séparation du contenu et de la mise en forme. L’héritage, permet aussi de définir des propriétés générales et d’autres plus précises qui héritent des propriétés générales de leurs parents, ainsi pas besoin de tout redéfinir pour chaque balise.

Les feuilles de style sont définissables par média. Ainsi vous pouvez définir une image pour un affichage sur un écran et ne pas l’afficher pour une impression sur papier. L’internaute vous en sera reconnaissant.

Un très bon exemple de l’utilisation que l’on peut faire des feuilles de style est sans conteste le site caméléon CSS Zen Garden, qui change complètement de style au gré des propositions de mise en page de contributeurs aux goûts divers et variés.

Comment apprendre ?

Bien sûr il faut connaître la référence française en la matière depuis déjà quelques années : Alsacréations, vous y trouverez toutes les informations nécessaires, des tutoriels, et un forum accueillant ou l’on vous aidera volontiers.

Je vous conseille aussi un bon tutoriel CSS de Joe Gillespie traduit par Pompage

Les normes

Les normes sont toutes accessibles sur le site du W3C, certaines sont traduites en français, je vous livre ici les principales à connaître ou à découvrir.

Les bonnes pratiques

  • Utilisez tout le temps des feuilles de style, ne définissez jamais vos styles directement dans une page
  • Valider les fichiers afin d’être sûr qu’il respectent les normes
  • Utiliser les hacks avec parcimonie, respectez les standards, les navigateurs suivront
  • Essayer d’avoir un seul fichier CSS par média sur un site en production, afin d’optimiser le temps de chargement des pages
  • Utilisez une feuille de style par média afin de définir des propriétés spécifiques à chaque rendu
  • Utilisez un framework ou un fichier « reset » pour gagner du temps, ne réinventez pas la roue à chaque nouveau site

Les outils

Validateur

Comme pour HTML, il est parfois bien utile d’avoir un avis rapidement sur la validité du code, afin de traquer les petites imperfections que l’on a pu laisser passer.

Frameworks

Pour vous faciliter la tâche, les frameworks CSS vous permettent aujourd’hui de gérer la base de votre feuille de style. Ils permettent d’initialiser les styles afin de les rendre similaires d’un navigateur à l’autre, ils définissent un layout générique utilisable facilement, le mot clé est la simplicité et la réutilisabilité.

A noter que pour les librairies Yahoo, vous pouvez faire un lien directement vers les serveurs de Yahoo et en pas héberger les scripts. Ainsi le fichier étant le même que celui de Yahoo et une multitude d’autres sites, il est probable que l’internaute visitant votre site l’ai déjà en cache dans son navigateur.

Extensions Firefox

La barre d’outil « developper toolbar » est un incontournable du développeur, elle permet bien plus que la manipulation des CSS, mais sur ce point qui nous intéresse, elle
autorise par exemple la désactivation des styles, ou le changement de feuille de style à la volée.
Firebug permet d’inspecter au plus profond des feuilles de style et d’ajouter, modifier ou supprimer des propriétés, de les visualiser graphiquement, là aussi cet outil vous réserve bien d’autre utilisations pour le code HTML et Javascript principalement.

Ces outils feront l’objet de prochains articles plus détaillés.

Bibliographie

Encore un excellent mémento, et un livre référence indispensable pour creuser le sujet.

Vous pourrez aussi approfondir le sujet avec un livre sur l’utilité des standards

Ce dernier livre date peu être un peu, et est en rupture de stock, mais on le trouve d’occasion, et à la vitesse ou avancent HTML et CSS, et pour les principes qu’il défend, il est loin d’être dépassé.

Les sites de référence

Pour aller plus loin avec les CSS

Une nouvelle approche des CSS fait désormais son apparition, CSS Orienté Objet ou OOCSS. Je vous laisse vous faire votre propre idée…

Vous avez vous aussi certainement des astuces et de bons outils pour travailler les CSS, j’attends vos remarques avec impatience pour partager avec vous sur ce sujet très intérressant.

Sur le même thème

RSS
Classé dans: CSS, Développement
»
«

Laisser un commentaire