Table des matières
Les feuilles de styles sont un changement majeur pour les auteurs de pages Web, et offrent le moyen d'améliorer la présentation de leurs documents. Dans les milieux scientifiques, où le Web a été conçu, les intéressés se préoccupent plus de contenu que de présentation. A mesure que le Web s'ouvrait aux autres, les limitations du HTML devenaient réellement frustrantes, et les auteurs se retrouvaient forcés de trouver des moyens de les contourner. Si les intentions étaient bonnes -- améliorer la présentation des pages -- les techniques employées ont révélé des effets secondaires indésirables. Elles fonctionnent quelques fois et pour quelques uns, mais pas à chaque fois ni pour tout le monde. En voici certaines :
Ces techniques augmentent énormément la complexité des pages Web, sont peu flexibles, posent des problèmes d'interopérabilité et sont éprouvantes pour les personnes handicapées.
Les feuilles de styles résolvent ces problèmes tout en remplaçant les moyens limités de présentation du HTML. Elles simplifient les contrôles des espacements entre les lignes, les indentations précises, les couleurs de texte ou de fond, les types et corps de polices de caractères, et bien d'autres détails.
Par exemple, la petite feuille de styles "CSS" suivante (enregistrée dans le fichier "special.css") spécifie un paragraphe dont le texte est vert, entouré d'une bordure rouge continue :
P.special {
color : green;
border: solid red;
}
La feuille de styles doit être liée au document HTML avec l'élément LINK :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">Le texte de ce paragraphe doit paraître en vert.
</BODY>
</HTML>
Le HTML 4.0 et ses feuilles de styles proposent les avantages suivants :
Au contraire, les feuilles de styles s'adressent à des matériels précis. Une feuille conçue pour un écran sera la plupart du temps imprimable, mais inutilisable en synthèse vocale. Cette spécification permet de définir des rendus pour plusieurs catégories de matériels. Un matériel n'interprète que ce qui le concerne. Des langages de feuilles de styles permettent de définir des instructions relatives aux différents matériels dans une même feuille de styles.
Les spécifications répondent à ces questions en laissant la possibilité aux auteurs de spécifier les mises en forme ponctuellement ; les éléments sont donc ainsi présentés au fur et à mesure.
Mais la plupart du temps, les feuilles de styles communes à un groupe de documents sont avantageuses : elles sont mises en cache et ne sont pas téléchargées à chaque demande de mise en forme, ce qui n'est pas le cas des attributs ponctuels. La disponibilité publique de bonnes feuilles de styles encouragera ce partage en cache.
Note. La feuille de style par défaut définie pour le HTML 4.0 et incluse dans [CSS2] spécifie des styles de base pour chaque élément HTML. S'ils la trouve utile, les auteurs et développeurs pourront s'y référer.
Les documents HTML peuvent intégrer les règles de mise en forme directement dans leurs sources, ou bien importer des feuilles de styles. Tout langage de feuille de styles peut être utilisé avec le HTML. Un langage simple suffira en général, mais d'autres langages peuvent être plus appropriés à des besoins très spécifiques. Cette spécification emploie le langage baptisé "Cascading Style Sheets" ([CSS1]), abrégé "CSS" dans ce document.
La syntaxe utilisée dans les données de styles est celle du langage de feuilles de styles et non du HTML. L'auteur doit donc préciser quel langage est utilisé pour permettre au logiciel client de l'interpréter.
L'élément META est utilisé pour désigner le langage de feuilles de styles employé pour un document. Par exemple, pour définir CSS comme langage par défaut, l'auteur doit ajouter la déclaration suivante dans l'en-tête (HEAD) de ses documents :
<META http-equiv="Content-Style-Type" content="text/css">
Le langage de feuilles de styles par défaut peut aussi être spécifié par un en-tête HTTP. La déclaration META ci-dessus est équivalente à l'en-tête HTTP :
Content-Style-Type: text/css
Les logiciels clients déterminent le langage de feuilles de styles par défaut d'un document selon les règles suivantes (priorité décroissante) :
Un document incluant des éléments avec attributs de style sans définir un langage de feuilles de styles par défaut est incorrect. Les outils de composition de pages HTML doivent générer une information de langage par défaut (généralement une déclaration META) de telle sorte que le logiciel client Web n'ait pas à s'appuyer sur "text/css" faute de d'indication.
Un interpréteur HTML conforme doit être capable de distinguer le code HTML des règles de feuilles de styles. L'élément STYLE et l'attribut style indiquent le début des données de feuilles de styles. La fin de ces données est définie par le délimiteur de fin de code SGML (</). Toutes les données de feuilles de styles doivent être fournies au logiciel client Web avec les balises appropriées. Les styles s'appliquent aux contenus des éléments HTML, et ceux-ci commencent immédiatement après le délimiteur de clôture (>) de la balise HTML. La fin des données de feuilles de styles est définie par le délimiteur de balise de fin (</) suivi immédiatement par un caractère de début de nom SGML ([a-zA-Z]).
Définition des attributs
L'attribut style spécifie des informations de styles pour un seul élément. Le langage de feuilles de style par défaut est employé.
Cet exemple positionne une couleur et un corps de police pour le texte du paragraphe.
<P style="font-size: 12pt; color: fuchsia">Les feuilles de styles ne sont-elle pas merveilleuses ?
Notez la syntaxe d'une déclaration CSS : nom: valeur. les propriétés des déclarations sont séparées par des points-virgules.
L'attribut style peut être employé pour appliquer un style ponctuel à un élément HTML. Si ce style doit être réutilisé avec d'autres éléments, il est plus intéressant d'employer l'élément STYLE où seront regroupées ces informations. Mais pour plus de souplesse encore, les auteurs peuvent définir leurs styles dans des feuilles de styles externes.
<!ELEMENT STYLE - - CDATA -- informations sur le style --> <!ATTLIST STYLE %i18n; -- lang, dir, à utiliser pour le "title" -- type %ContentType; #REQUIS -- Type de Contenu du langage de styles -- media %MediaDesc; #IMPLICITE -- conçu pour ce "media" -- title %Text; #IMPLICITE -- titre de consultation -- >
Balise de début : requise, balise de fin : requise
Définition des attributs
Attributs définis ailleurs
L'élément STYLE permet d'insérer des règles de feuilles de styles dans les en-têtes des documents. Le HTML autorise plusieurs éléments STYLE dans la section HEAD d'un document.
Les logiciels clients Web ne supportant pas les feuilles de styles ou le langage de feuilles de styles spécifique employé dans l'élément STYLE doivent cacher le contenu de cet élément. Interpréter ce contenu comme faisant partie du texte du document serait une erreur. Certains langages de feuilles de styles proposent une syntaxe particulières destinée à cacher le contenu aux yeux des logiciels clients non conformes.
Certaines implémentations de feuilles de styles peuvent permettre de définir un plus grand nombre de règles dans l'élément STYLE que dans l'attribut style. Par exemple, en CSS, des règles peuvent être déclarées dans l'élément STYLE pour :
Les règles de priorité et d'héritage dépendent du langage de feuilles de styles employé.
La déclaration CSS STYLE suivante place une bordure autour de tous les éléments H1 du document et les centre dans la page.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Pour que cette information de style ne s'applique qu'aux éléments H1 d'une classe spécifique, on la modifie comme suit :
<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> Le style s'applique à ce H1 </H1>
<H1> il ne s'applique pas à celui-là </H1>
</BODY>
Enfin, pour limiter la portée d'une information de style à un seul élément H1, on emploie l'attribut id :
<HEAD>
<STYLE type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> Ce H1 n'est pas affecté </H1>
<H1 id="myid"> Le style s'applique à ce H1 </H1>
<H1> et pas à celui-là </H1>
</BODY>
Bien que des informations de style peuvent être spécifiées pour la plupart des éléments HTML, deux éléments, DIV et SPAN, sont particulièrement utiles parce qu'ils n'impliquent pas d'exécution de présentation (comme un passage à la ligne ou un changement de paragraphe). Combinés aux feuilles de styles, ces éléments permettent d'étendre le langage HTML, en particulier s'ils sont utilisés avec les attributs class et id.
Dans l'exemple suivant, l'élément SPAN spécifie le style de la police en petites capitales pour les premiers mots d'un paragraphe.
<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="sc-ex">Les premiers mots</SPAN> de ce paragraphe
sont en petites capitales.
</BODY>
Dans l'exemple ci-dessous, l'élément DIV et l'attribut class permettent de préciser la justification d'une série de paragraphes que l'on met en exergue. Cette information de style peut être réutilisée pour d'autres sections que l'on veut placer en exergue, n'importe où dans le document, grâce à l'attribut class.
<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>Chante déesse, la colère d'Achille, le fils de Pélée, détestable
colère, qui aux Achéens valut des souffrances sans nombre...
<P>L'aurore en robe de safran se lève des eaux d'Océan
pour porter la lumière aux immortels comme aux humains.
</DIV>
</BODY>
Le HTML permet de créer des documents destinés à être interprétés sur différents types de matériels et logiciels clients. Par exemple : écrans graphiques de micro-ordinateurs ou de stations de travail, interfaces pour télévisions, téléphones adaptés au Web et micros de poche sans fils, browsers à synthèse vocale et périphériques tactiles en Braille. L'attribut media précise les types de supports de lecture auxquels les règles de style sont destinées.
Les déclarations suivantes s'appliquent à l'élément H1 ; projetés lors d'une conférence, les titres de niveau 1 seront affichés en bleu, tandis qu'ils seront centrés à l'impression.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Cet exemple ajoute un effet sonore aux liens (<A HREF...>) sur un périphérique capable de sortie audio :
<STYLE type="text/css" media="aural">
A { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
</STYLE>
</HEAD>
Le contrôle des matériels et logiciels de sortie est particulièrement intéressant lorsqu'il est employé dans les feuilles de styles externes, car les logiciels clients peuvent optimiser le temps de chargement en ne récupérant que les feuilles de styles qui les concernent. Par exemple, un client à synthèse vocale ne téléchargera pas les feuilles de styles destinées à une interprétation graphique. Consulter la section Cascades dépendantes du matériel pour plus de détails.
Les feuilles de styles peuvent être définies indépendamment des documents, avec les avantages suivants :
Quand les feuilles de styles sont actives, l'utilisateur peut se voir offrir un choix entre les styles. Chaque style peut résulter potentiellement d'une cascade de plusieurs feuilles styles. Certaines feuilles de styles (baptisées persistantes) sont appliquées quel que soit le choix de l'utilisateur (pour autant qu'elles désignent le matériel correctement), tandis que d'autres (nommées alternatives) s'appliquent uniquement lors de certains choix. La feuille de styles par défaut s'applique au moment où la page est chargée, mais l'utilisateur peut la désactiver au profit d'une feuille de styles alternative.
L'élément LINK pointe sur une feuille de styles externe. Les attributs suivants doivent être renseignés :
Dans cet exemple, on spécifie une feuille de styles externe persistante avec le fichier mystyle.css.
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
En renseignant son attribut title, une feuille de styles de type "persistant" devient "par défaut" ; le logiciel client peut alors proposer à l'utilisateur la possibilité d'appliquer les styles portant un nom, c'est à dire possédant un attribut title.
<LINK href="mystyle.css" title="Compact" rel="stylesheet" type="text/css">
Ajouter le mot clé "alternate" à l'attribut rel déclare la feuille de styles comme étant alternative.
<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">
Tous les styles alternatifs qui partagent le même titre seront appliqués lorsque l'utilisateur (via son logiciel client) activera ce style. Les feuilles de styles de titres différents ne seront pas activées dans ce cas. Quoi qu'il en soit, les feuilles de styles sans attribut title s'appliqueront toujours (à moins que l'utilisateur ne désactive complètement les feuilles de styles).
Le logiciel client Web devra fournir à l'utilisateur la possibilité de sélectionner dans ce choix de styles alternatifs. Il est recommandé d'utiliser les valeurs des l'attributs title comme noms de styles dans la liste de choix.
Les langages de feuilles de styles en Cascades tels que CSS permettent de mélanger les informations de styles provenant de plusieurs sources. Cependant, tous les langages de feuilles de styles ne supportent pas les cascades. Il suffit d'établir une séquence d'éléments LINK et/ou STYLE pour créer une cascade. Les informations de styles sont alors interprétées, en cascade, dans l'ordre d'apparition des éléments dans le HEAD.
L'exemple suivant définit deux feuilles de styles alternatives baptisées "compact". Si l'utilisateur sélectionne le style "compact", ces deux feuilles de styles externes seront activées, de même que la feuille de styles "common.css" (toujours active puisque son attribut title n'est pas renseigné). Si l'utilisateur sélectionne le style "big print", les fichiers "bigprint.css" et "common.css" seront activés par le logiciel client tandis que les feuilles de styles "compact" ne le seront pas.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">
Voici un exemple avec les deux éléments LINK et STYLE.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Le nom de style par défaut d'un document est défini grâce à l'élément META. Par exemple, pour attribuer le style "compact" par défaut (voir l'exemple précédent), il faut inclure la ligne suivante dans l'en-tête (HEAD) du document :
<META http-equiv="Default-Style" content="compact">
Le style par défaut peut aussi être défini avec un en-tête HTTP. La déclaration META précédente est équivalente à l'en-tête HTTP suivante :
Default-Style: "compact"
Si deux ou plusieurs déclarations META ou en-tête HTTP spécifient le style par défaut, la dernière seulement est retenue. Les en-têtes HTTP ne sont pas prioritaires sur le contenu du HEAD du document dans ce cas. En l'absence d'une déclaration spécifique, le style par défaut est défini par le premier élément LINK dont l'attribut title est précisé et dont l'attribut rel possède la valeur "stylesheet".
Une cascade peut comprendre des feuilles de styles destinées à différents supports. LINK et STYLE peuvent être utilisés avec l'attribut media. Le logiciel client Web doit alors filtrer les feuilles de styles qui ne le concerne pas.
L'exemple suivant montre une cascade où la feuille de styles "Corporate" est définie en plusieurs versions : l'une destinée à l'impression, une autre pour écran, une troisième à l'attention d'un browser à synthèse vocale (utile pour lire son mail en voiture). La feuille de styles "techreport" peut s'appliquer à tout support. La règle de couleur définie par l'élément STYLE est destinée à l'impression et aux écrans, mais ignorée à l'interprétation audio.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Pour interpréter un document, le logiciel client doit trouver les valeurs à attribuer aux propriétés des styles, telles que la famille de police de caractères, son style, son corps, l'interligne, la couleur de texte, etc. Le mécanisme exact dépend du langage de style utilisé, mais la description suivante s'applique généralement :
Le mécanisme des cascades est employé lorsque plusieurs règles de styles s'appliquent toutes directement à un élément. Ce système permet au logiciel client de trier les règles selon leurs genres, puis de sélectionner celles qui sont adéquates. Si aucune règle n'est trouvée, la prochaine étape dépend des propriétés du style, à savoir transmissibles ou non (héritage). Toutes les propriétés ne sont pas transmissibles. Dans ce cas, et si aucune règle n'est explicitement indiquée, le langage de feuilles de styles fournit des valeurs par défaut pour chaque élément en particulier.
Si une propriété peut être héritée, le logiciel client examine l'élément concerné afin de déterminer si la règle le concerne. Le processus se poursuit jusqu'à trouver une règle applicable. Ce mécanisme permet de concevoir des feuilles de styles compactes. Par exemple, l'auteur peut spécifier une famille de police à appliquer à tous les éléments contenus dans le document à l'aide d'une seule règle appliquée à l'élément BODY.
Certains langages de feuilles de styles proposent une syntaxe conçue pour permettre de cacher le contenu des éléments STYLE à la vue des logiciels clients non conformes.
Cet exemple montre comment placer en commentaire le contenu d'un élément STYLE de manière à empêcher un logiciel client trop ancien et non conforme de l'interpréter comme texte du document.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Les gestionnaires de serveurs Web peuvent configurer un serveur de telle sorte qu'une feuille de styles soit appliquée à un groupe de pages. L'en-tête HTTP Link décrite dans la [RFC2068] a le même effet que l'élément LINK, les mêmes attributs et les mêmes valeurs. Des en-têtes Link multiples correspondent aux éléments LINK multiples, utilisés dans les même ordre. Par exemple,
Link: <http://www.acme.com/corporate.css>; REL=stylesheet
correspond à :
<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">
Il est possible de préciser plusieurs styles alternatifs grâce à plusieurs en-têtes Link, et en employant l'attribut rel pour désigner le style par défaut.
Dans l'exemple suivant, le style "compact" est appliqué par défaut puisque le mot clé "alternate" de l'attribut rel est omis :
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"
Ceci doit aussi fonctionner pour l'envoi de documents HTML en e-mail. Mais certains clients e-mail modifient l'ordre des en-têtes [RFC822]. Cet ordre affectera l'interprétation des cascades de feuilles de styles précisées par les en-têtes Link. Pour s'en protéger, une concaténation des en-têtes permettra de regrouper plusieurs instances dans un même champs d'en-tête. Les guillemets sont nécessaires uniquement lorsque les valeurs des attributs utilisent des espaces. Il faut utiliser des entités SGML pour référencer les caractères interdits en en-têtes HTTP ou e-mail, ou des caractères réputés mal transiter sur le réseau.
Les éléments LINK et META fournis en en-tête HTTP sont interprétés avant tout élément LINK et META contenu dans le HEAD du document (ces derniers sont donc prioritaires).