Introduction

Les feuilles de style en cascade (CSS, Cascading Style Sheets) permettent d'ajouter des informations de style (polices, couleurs, mises en page) aux documents Web. Le principe du CSS consiste à séparer le contenu de la forme. Le contenu est rédigé dans un langage de balisage tel que le HTML et la présentation est définie dans une feuille de style CSS. Les éléments sont stylisés par le biais d'un ensemble de règles, où chaque règle s'applique à un groupe (ou famille) d'éléments. Etant donné que le style associé à une famille d'éléments est transmis aux éléments qui appartiennent à cette famille, cette méthode de regroupement permet de réduire la complexité des pages Web et d'éviter les répétitions. Vous pouvez également appliquer différentes feuilles de styles CSS à un même contenu balisé afin de l'utiliser à différentes fins (affichage à l'écran, impression, etc.).

Si vous ne connaissez pas encore les feuilles de style CSS et que vous souhaitez en savoir plus à leur sujet, de nombreux ouvrages et didactitiels en ligne sont à votre disposition, tels que le didactitiel HTML Dog[1]. Ce chapitre explique comment minimiser la consommation de bande passante de votre site Web en utilisant des feuilles CSS pour définir tous les aspects présentationnels de votre site et comment optimiser vos feuilles de style CSS.

Avant de vous lancer dans la définition de votre feuille de style CSS, rappelez-vous que les designs les plus simples sont souvent les plus efficaces. En outre, l'utilisation de polices et de couleurs variées vous permettra d'obtenir une apparence claire et soignée, tout en réduisant la quantité d'informations de style à spécifier.

Enfin, il est important d'ajouter que certains navigateurs d'ancienne génération ne sont pas en mesure de traiter les feuilles de style CSS ou les fichiers CSS compressés (voir le chapitre Compression pour plus de détails). Nous vous recommandons donc de tester votre site pour vérifier qu'il reste utilisable (c'est-à-dire navigable) même lorsque sa feuille de style associée n'est pas disponible.

Utilisez des feuilles de style externes plutôt qu'imbriquées dans la page

Les règles de mise en forme peuvent être spécifiées de trois manières :

• Par le biais des balises style en langage HTML :

<style type="text/css">
#box {margin:0; padding:1em 0 0.5em 0;}
#tab_content form,
#tab_content input
{margin:0;padding:0;}
</style>

• Par le biais de l'attribut style :

<div style="padding:0.1em 0 0 0;height:1.5em;width:54em;">

• Par le biais d'une feuille de style externe référencée :

<link rel='stylesheet' type='text/css' 
href='templates/aptivate/css/styles.css'/>

ou

<style type="text/css" media="screen,projection">
@import url(css/screen.css);
</style>

En règle générale, nous vous déconseillons d'imbriquer vos feuilles de style CSS dans vos pages (tel que dans les deux premiers exemples). Utilisez plutôt des feuilles de style externes. Si vous référencez la même feuille de style statique externe dans chacune des pages de votre site, celle-ci pourra être mise en cache par le navigateur Web et ne devra donc être téléchargée qu'une seule fois. Cette méthode vous permettra également de conférer un style homogène à l'ensemble de votre site avec un minimum d'efforts.

Seule exception à cette règle : les feuilles de style CSS dont la taille est relativement réduite. Dans ce cas, le temps système et les délais occasionnés par l'envoi d'une requête HTTP supplémentaire au serveur peuvent dépasser le temps nécessaire à la restauration des informations CSS à chaque chargement de page. Cet argument s'avère d'autant plus pertinent lorsque certaines pages incluent des données CSS qui leur sont propres (qui ne sont pas partagées avec d'autres pages).

Référencez vos feuilles de style dans l'en-tête (HEAD) du document

Les feuilles de style doivent être référencées dans l'en-tête (HEAD) du document pour deux raisons : premièrement parce que dans certains cas, Internet Explorer risque d'afficher une page vierge jusqu'à que ce que la feuille de style ait été chargée, empêchant ainsi les utilisateurs de commencer à consulter une partie du contenu pendant que le reste de la page se charge ; deuxièmement, parce que la page risque de devoir être rectifiée en fonction des informations du contenu CSS une fois la feuille de style chargée.

Utilisez des feuilles de style pour toutes les informations de présentation

Remplacez tous les éléments présentationnels en HTML.

Plutôt que d'utiliser des balises font pour définir chaque élément de texte, appliquez des règles de police appropriées à chaque famille d'éléments. Par exemple :

p {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:1.5em;
}

Ce type d'optimisation est particulièrement efficace pour les sites Web qui contiennent une grande quantité de texte et où une seule feuille de style est utilisée pour de nombreuses pages.

Remplacez les tables utilisées pour la mise en page.

Les informations présentationnelles s'appliquent également à la mise en page. Du temps où les navigateurs Web n'étaient pas encore en mesure de prendre en charge le CSS, les développeurs Web utilisaient des tables HTML destinées à représenter les données sous forme de tableaux de type feuilles de calcul pour définir la mise en page et contourner ainsi les limitations des technologies Web alors disponibles. Malheureusement, les mauvaises habitudes persistent et cette méthode reste communément utilisée sur Internet.

L'utilisation de feuilles de style CSS est préférable à celle des tables pour de nombreuses raisons. Le CSS permet de positionner les éléments de façon plus efficace et d'obtenir des pages et des feuilles de style moins volumineuses. Le CSS permet également de spécifier l'ordre d'affichage des éléments dans chaque page, ce qui signifie que le contenu le plus pertinent peut être présenté plus rapidement.

A moins que leur largeur ne soit spécifiée, les tables ne peuvent pas être affichées de façon incrémentielle. Cela signifie que les utilisateurs doivent attendre que l'ensemble de la table ait été chargé pour pouvoir en consulter le contenu, ce qui peut se montrer particulièrement problématique si l'ensemble de la page est formaté sous forme de table.

Dans l'exemple ci-dessous, du CSS est utilisé pour définir une mise en page relativement simple. Des éléments flottants et des marges sont utilisés pour positionner les éléments de navigation à droite de la page et le corps du texte principal à gauche de la page, c'est-à-dire dans l'ordre contraire à celui dans lequel ils apparaissent dans le contenu HTML.

Contenu CSS :

.testnav { float: right; width: 6.4em; }
.testbody { margin-right: 7em; }

Contenu HTML :

<div class="testpage">
<div class="testnav">Navigation</div>
<div class="testbody">Lorem ipsum dolor sit amet...</div>
</div>

De cette manière, les éléments de navigation sont affichés à la suite du texte (à droite) bien qu'ils apparaissent en premier dans le fichier et se chargent donc plus rapidement.

Utilisez des raccourcis

Si vous souhaitez qu'un même style soit appliqué à tous les éléments de la page, associez-le à l'élément body et il sera propagé :

body {
font-family: Arial, Helvetica, sans-serif;
}

Cette règle de s'applique pas aux attributs de style non-hérités, tels que padding, border et margin.

Vous pouvez appliquer des règles à des éléments particuliers par le biais de sélecteurs. Le sélecteur universel (*) équivaut à tous les noms d'élément présents dans le document.

* {
border-collapse:collapse;
font-family:'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
margin:0;
padding:0;
}

Il existe une multitude de sélecteurs disponibles. Certains identifient les éléments en fonction de leurs parents et ancêtres, d'autres en fonction leur ordre dans la page, leur ID, leur classe CSS, etc.

Le CCS intègre un système d'abréviation permettant d'optimiser les règles de mise en forme. Si vous souhaitez appliquer une même règle à plusieurs familles d'éléments, vous pouvez utiliser la syntaxe suivante :

ul, ol {
margin: 0.5em 1em 1em 2em;
list-style: inside;
}

Les couleurs peuvent parfois être abrégées. Par exemple :

color:#ff0000;

peut être abrégé de la manière suivante :

color:#f00;

Les règles de police multiples peuvent être simplifiées. Par exemple :

font-size:1em;
font-style:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;

peut être simplifié de la manière suivante :

font:normal 1em Verdana, Arial, Helvetica, sans-serif;

De même les règles de bordure et de marge peuvent être définies sous forme d'une simple ligne :

border-width:thin;
border-style:solid black;

équivaut à :

border:thin solid black;

et

margin-left:0;
margin-right:0;
margin-top:0.2em;
margin-bottom:0.1em;

peut être abrégé de la manière suivante :

margin:0.2em 0 0.1em;

Avec les bordures et les marges, la bordure gauche est égale à la bordure droite par défaut, la bordure du bas est égale à la bordure du haut par défaut, et si une seule valeur est spécifiée, elle s'applique alors à toutes les bordures.

Supprimez les commentaires et les espaces du CSS

Les commentaires et les espaces offrent une meilleure lisibilité aux développeurs mais ils sont ignorés par les navigateurs et consomment de la bande passante.

Utilisez des feuilles de style différentes pour chaque type de support

Si vous souhaitez spécifier différentes mises en pages pour différents types de supports (unité fixes pour l'impression, unités relatives pour l'affichage à l'écran, etc.), utilisez une feuille de style différente pour chaque type de support. Le navigateur ne téléchargera ainsi que la feuille nécessaire.

<head>
...
<style type="text/css" media="screen,projection">
@import url(css/styles.css);
</style>
<style type="text/css" media="print">
@import url(css/print.css);
</style>
...
</head>

Combinez les fichiers CSS

Si plusieurs feuilles de style doivent être chargées pour une page, vous pouvez les combiner sous forme d'un fichier unique. Sur les connexions lentes, chaque fichier CSS ajoutera quelques secondes au délai de chargement de la page, le temps que le navigateur sollicite le fichier et obtienne une réponse du serveur. Les versions de fichier CSS spécifiques à un navigateur doivent donc être remplacées par un fichier unique compatible avec tous les navigateurs.

Utilisez des outils d'optimisation

Des outils d'optimisation sont disponibles pour vous permettre de supprimer les commentaires et les espaces de vos feuilles de style et de combiner ou abréger les règles de mise en forme qu'elles contiennent. Au moment de la rédaction de cet article, les outils suivants étaient disponibles en ligne. Ces outils ne sont pas infaillibles et introduisent parfois des bogues dans les fichiers CSS. Il est donc recommandé de tester le fichier CSS résultant avec votre site et de changer de compresseur si nécessaire. Une comparaison de ces outils[2] effectuée par http://www.bloggingpro.com indique que les outils CSS Compressor de Icey et CleanCSS sont les plus fiables et que CSS Compressor permet d'obtenir une meilleure compression.

• http://iceyboard.no-ip.org/projects/css_compressor
• http://www.cleancss.com/
• http://www.cssoptimiser.com/
• http://flumpcakes.co.uk/css/optimiser/

Compatibilité avec les navigateurs

Il a fallu un certain temps avant que les navigateurs puissent prendre en charge le CSS et la mauvaise interprétation des standards applicables a ainsi conduit à de nombreuses incohérences. La mise en œuvre du CSS dans les navigateurs d'ancienne génération tels que Netscape 4 reste problématique, ce qui signifie que les pages Web ne s'affichent parfois pas du tout avec ces navigateurs. Si des feuilles de style externes sont référencées à l'aide de la directive @import, elles seront ignorées par les anciens navigateurs. Toutefois, si une feuille de style est chargée à l'aide de la directive @import plutôt que de la balise link, Internet Explorer affiche une page vierge pendant que la feuille de style se charge plutôt que d'afficher le contenu progressivement. Pour une compatibilité optimale, utilisez la directive @import ; pour une plus grande rapidité, utilisez la balise link.

Les navigateurs communs actuels, tels qu'Internet Explorer et Firefox, interprètent le CSS de manière différente selon qu'ils fonctionnent en mode quirks ou standard. En mode quirks, les navigateurs tentent d'afficher les pages de manières à ce qu'elles soient compatibles avec leurs précédentes versions, c'est-à-dire en émulant les bogues qu'elles comprenaient. Comme son nom le suggère, le mode standard se conforme aux standards Web de façon plus stricte. Nous vous recommandons donc de développer votre site Web de manière à ce qu'il puisse être affiché en mode standard. Pour ce faire, il vous suffit de définir le type de document de façon correcte en haut de vos pages. En HTML 4.01 Strict :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Ce paramètre vous permettra d'obtenir un site Web cohérent sur tous les navigateurs compatibles avec le mode standard.

Références

[#1] http://www.htmldog.com/

[#2] http://www.bloggingpro.com/archives/2006/08/17/css-optimization/

[#3] http://iceyboard.no-ip.org/projects/css_compressor