Sommaire
L'usage de feuilles de style constitue l'évolution majeure de la façon dont les concepteurs de documents HTML vont travailler, en étendant la possibilité qu'ils ont de "sculpter" l'apparence de leurs pages. Dans le contexte scientifique originel duquel le Web est sorti, les gens sont plus intéressés par le contenu des documents que leur présentation. Au fur et à mesure que des personnes de bords plus diversifiés venaient découvrir le Web, les limitations du HTML devenaient une source grandissante de frustration. Ces auteurs étaient souvent habitués au travail infographique pour l'impression, de laquelle ils gardaient le contrôle absolu et total. Il apprirent alors à contourner les limitations stylistiques du HTML. Alors que les intentions étaient pures au départ - améliorer la présentationd es pages Web - les techniques utilisées pour ce faire avaient souvent des effets de bord. Ces techniques fonctionnaient pour certaines personnes, et de temps en temps, mais jamais pour tous et tout le temps. On y trouvait :
Ces techniques ont considérablement augmenté la complexité des pages Web, et ont limité la souplesse du média en faisant naître de nombreux problèmes d'interopérabilité, et contribuant à isoler encore plus les personnes handicapées.
Les feuilles de style sont un retour à la simplicité en matière de présentation, et augmente largement la gamme des mécanismes de présentations ajoutés au HTML depuis ces quelques dernières années. Les feuilles de style rendent très simple la spécification de la hauteur d'interligne, l'indentation de ces lignes, les couleurs du texte et des fonds, les tailles et styles de polices, et une tonne d'autre détails.
Le HTML 4.0 apporte les fonctionnalités suivantes :
Les feuilles de style, à l'inverse, s'appliquent à un médium ou un groupe de média identifié. Une feuille de style destinée à un affichage écran pourra être éventuellement applicable pour de l'impression, mais sera en général inutile pour des navigateurs à synthèse vocale. Cette spécification vous permettra de définir la catégorie de média couverts par une feuille de style. Cela permettra aux agents utilisateur d'éviter la récupération de feuilles de style inadaptées. Les langages de description de style doivent avoir des ressources pour définir les média sur lesquels les feuilles agissent à l'intérieur de ces mêmes feuilles.
Note : Cette spécification inclue de plus amples informations sur les feuilles de style dans les sections traitant des performances et nouveaux types de média.
Les HTML peuvent contenir des attributs stylistiques directement dans leur code, ou importer des feuilles de style externes. N'importe quel langage de définition de feuilles de style peut être utilisé avec le HTML. Un langage de style assez élémentaire pourra suffire aux besoins de la plupart des utilisateurs, mais des langages bien plus complexes pourront être employés si les besoins sont beaucoup plus précis. Le HTML ne dépend pas du type de langage de description de style employé. Pour les besoins de nos explications cependant, nous présenterons des exemples de langage de style en cascade ([CSS1]), que nous abbrégerons par CSS (Cascading Style Sheets).
La syntaxe d'une règle stylistique fait partie du langage de définition de style, pas du HTML. Du fait que les agents utilisateurs qui supportent les feuilles de style doivent aussi interpréter les règles stylistiques, les auteurs devront déclarer quels langages de style vont être utilisés.
La définition du langage de feuille de style par défaut pour le document se fait par un élément META. Par exemple, si l'on souhaite que ce langage soit le CSS, vous écrirez la déclaration suivante dans la section HEAD de votre document :
<META http-equiv="Content-Style-Type" content="text/css">
Le langage de style par défaut peut aussi être fixé par le biais de champs d'en-tête HTTP. La déclaration ci-avant d'élément META est équivalente au champ d'en-tête HTTP suivant :
Content-Style-Type: text/css
Si plusieurs déclarations META ou champs d'en-tête HTTP spécifient le langage de style par défaut, c'est la dernière mention qui l'emporte. Il sera toujours considéré que les champs d'en-tête HTTP sont pris en compte avant la section HEAD du document. En l'absence de déclaration explicite, le langage de style par défaut est le CSS. Nous recommandons que les agents utilisateurs en permettent une déclaration explicite.
Les interpréteurs HTML conformes doivent pouvoir distinguer le HTML des règles stylistiques. Les éléments et attributs HTML définissent le début des données de style. La fin des données de style est marquée par la balise de fin (</) immédiatement suivi d'un caractère de début de nom au sens du SGML ([a-zA-Z]). Toutes les données de feuille de style détectées devront être transférées au gestionnaire de style approprié de l'agent utilisateur.
L'attribut style spécifie le style applicable à un élément unique. Les règles stylistiques qui composent cette définition seront écrites dans le langage de style par défaut.
L'exemple qui suit définti la couleur et la taille de police du texte d'un paragraphe spécifique.
<P type="text/css" style="font-size: 12pt; color: fuschia">Les feuilles de style ne sont elles pas géniales?
Notez la syntaxe d'une déclaration CSS : nom : valeur. Les déclarations de propriétés sont séparées entre elles par des points-virgules.
L'attribut style est approprié lorsque vous souhaitez appliquer un style à une instance particulière d'un élément HTML. Si le style doit être réutilisé pour plusieurs instances, il sera plus judicieux de considérer une déclaration par un élément STYLE. Pour une souplesse accrue, vous placerez les définitions de style dans des feuilles de style séparées.
<!ELEMENT STYLE - - CDATA -- style --> <!ATTLIST STYLE %i18n; -- lang, dir, à utiliser avec le titre -- type CDATA #REQUIRED -- Type MIME pour ce language de définition de style -- media CDATA #IMPLIED -- indication des média concernés -- title CDATA #IMPLIED -- titre indicatif -- >
Balise de début : requise, Balise de fin : requise
Définition des attributs
Attributs définis par ailleurs
L'élément STYLE permet aux auteurs de rassembler des règles stylistiques dans l'en-te^te d'un document. Le HTML autorise la présence d'un nombre quelconque d'éléments STYLE dans la section HEAD d'un document.
Les agents utilisateurs ne supportant pas les feuilles de style, ou qui ne supportent pas le langage de feuille de style utilisé dans un élément STYLE doivent cacher le contenu de l'élément STYLE. Il serait érroné d'afficher le contenu d'un tel élément comme une partie du texte du document. Certains langages de feuilles de style disposent d'une syntaxe pour cacher leur contenu aux agents utilisateurs non conformes.
Certaines implémentations de feuilles de style accepteront une plus grande variété de règles à l'intérieur d'un élément STYLE que dans l'attribut style. Par exemple, pour CSS, les règles seront déclarées dans un élément STYLE pour ce qui concerne :
Les règles particulières d'héritage et de précédence des règles de style dépendent du langage de feuille de style employé.
La déclaration CSS suivante de STYLE active une bordure autour de chaque élément H1 du document, et le centre au centre de la page.
<HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD>
Pour spécifier que ces informations de style ne doivent s'appliquer qu'aux éléments H1 d'une certaine classe, nous modifierions la déclaration comme suit :
<HEAD> <STYLE type="text/css"> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> Cet H1 est affecté par notre style </H1> <H1> celui-là ne l'est pas </H1> </BODY>
Enfin, pour limiter la portée de cette déclaration à un seul et unique instance de l'élément H1, il faudrait mentionner l'attribut id :
<HEAD> <STYLE type="text/css"> H1.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"> Celui-là l'est </H1> <H1> Celui-ci ne l'est pas non plus </H1> </BODY>
Bien que des styles puissent appliqués à pratiquement tous les éléments HTML, deux de ces derniers se révèlent particulièrement utiles en ce sens qu'ils n'ont intrinsèquement aucun effet prédéfini sur la présentation. Du fait que les éléments DIV et SPAN n'apportent que des informations de structure, ils permettront aux utilisateurs d'étendre le HTML à l'infini.
Dans l'exemple suivant, nous utiliserons l'élément SPAN pour écrire les quelques premiers mots d'un paragraphe en petites capitales.
<HEAD> <STYLE type="text/css"> SPAN.sc-ex { font-variant: small-caps } </STYLE> </HEAD> <BODY> <P><SPAN id="sc-ex">Les quelques premiers</SPAN> mots de ce paragraphe sont écrits en petites capitales. </BODY>
Dans l'exemple suivant, nous utiliserons un élément DIV et son attribut class pour régler la justification de texte d'une série de paragraphes constituant le résumé d'un article scientifique. Cette information de style pourrait être réutilisée pour toute autre section de résumé en assignant l'attribut class d'un élément DIV à cet endroit.
<HEAD> <STYLE type="text/css"> DIV.Abstract { text-align: justify } </STYLE> </HEAD> <BODY> <DIV class="Abstract"> <P>The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products. <P>Chieftain replaces the Commander range, which will remain on the price list until further notice. </DIV> </BODY>
HTML permet aux auteurs de concevoir des documents qui ne dépendent pas d'un médium présentationnel particulier. De ce fait, les utilisateurs finaux pourront naviguer sur le Web en utilisant une grande variété d'agents utilisateurs : programmes multi-fenêtrés pour micro ordinateurs et stations de travail, boîttiers de réception pour téléviseurs, navigateurs à synthèse vocale, ou afficheurs tactiles en braille, etc.
L'attribut media spécifie le médium particulier auquel s'adresse une régle de style. En définissant l'attribut media, les auteurs permettront aux agents utilisateurs de trier parmi les feuilles de style celles qui sont applicables aux média qu'ils emploient.
Les exemples de déclarations suivants s'appliquent tous à un élément H1. Lorsqu'ils seront rendus sur un écran informatique, toutes les instances seront écrites en bleu et centrées. Imprimées, les mêmes instances seront simplement centrées. Nous y spécifions un style particulier pour les navigateurs vocaux.
<HEAD> <STYLE type="text/css" media="screen"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="screen, print"> H1 { text-align: center } </STYLE> <STYLE type="text/acss" media="speech"> H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)} </STYLE> </HEAD>
Le contrôle du médium est particulièrement intéressant lorsqu'il s'applique à des feuilles de style externes car les agents utilisateurs pourront alors gagner du temps en ne récupérant du réseau que les feuilles de style qui les concernent.
L'exemple précédent peut être réécrit pour se référer à des feuilles de style externes (plutôt qu'à des éléments STYLE inscrits dans l'en-tête de fichier) contrôlés par un attribut media. Les agents utilisateurs pourront consulter l'attribut media et ne requérir les seules feuilles de style appropriées au médium utilisé.
<HEAD> <LINK href="doc1-screen.css" rel="stylesheet" type="text/css" media="screen"> <LINK href="doc1-print.css" rel="stylesheet" type="text/css" media="print"> <LINK href="doc1-speech.css" rel="stylesheet" type="text/css" media="speech"> </HEAD>
Voir la section suivante traitant de l'importation de feuilles de style pour plus d'informations.
Les feuilles de style peuvent être définies séparément du document HTML qui les applique. Ceci présente des avantages majeurs et offre la possibilité de :
Lorsque les feuilles de style sont actives, les utilisateurs pourrotn éventuellement se voir offrir lapossibilité de choisir leur style. Chaque style est potentiellement une mise en cascade de plusieurs feuilles de style. Certains feuilles de style (connues sous le nom de persistantes) seront appliquées indépendemment du choix de l'utilisateur (pour autant qu'il se réfère à un type de média adéquat), tandis que d'autres (connues sous le nom de alternatives) ne s'appliqueront que sur choix délibéré. Une feuille de style par défaut est une feuille de style qui s'applique au chargement du document, mais que l'utilisateur peut désactiver au profit d'une version alternative.
Utilisez l'élément LINK pour désigner une feuille de style externe. Il faudra spécifier les attributs suivants :
Dans l'exemple qui suit, nous spécifions l'importation d'une feuille de style externe persistante définie par le fichier monstyle.css.
<LINK href="monstyle.css" rel="stylesheet">
En ajoutant l'attribut title , nous commutons cette feuille de style du statut persistant au statut "par défaut" ; les agents utilisateurs offriront à l'utilisateur la possibilité d'appliquer des styles nommés, sur la base des attributs title.
<LINK href="monstyle.css" title="Compact" rel="stylesheet">
En ajoutant le mot-clef "alternate" dans l'attribut rel, nous spécifions la feuille de style comme alternative.
<LINK href="monstyle.css" title="Medium" rel="alternate stylesheet">
Tous les styles alternatifs qui partagent le même titre seront appliqués lorsque l'utilisateur (via l'agent utilisateur) active ce style particulier. Les feuilles de styles assignées à d'autres titres ne seront pas prises en compte. Cependant, les feuilles de style qui ne sont associées à aucun title s'appliqueront systématiquement (au titre de "persistantes", sauf si l'application des styles est totalement désactivée).
Les agents utilisateurs fourniront les facilités nécessaires à la visualisation et à la sélection d'uin style parmi les alternatives proposées. Nous recommandons que ce soit la valeur de l'attribut title qui serve de libellé à chacun des choix possibles.
Des langages de styles en cascade tels que CSS permettent d'obtenir un style effectif à partir d'une combinaison de définitions de style provenant de sources diversifiées. Cependant, tous les langages de feuilles de style ne supportent pas cette technique. Pour définir la cascade, il suffit d'inscrire une séquence d'éléments LINK et/ou STYLE. Les informations de style sont cascadées dans l'ordre dans lequel elles apparaissent dans la section HEAD du document. Une mise en cascade peut inclure des feuilles de style applicables à des média différents. Il sera du ressort de l'agent utilisateur de filtrer lesquelles de toutes ces définitions de style sont applicables ou non aux interfaces qu'il contrôle.
Dans l'exemple qui suit, nous définissons deux alternatives de feuilles de style nommées "compact". Si l'utilisateur sélectionne le style "compact", les deux feuilles de style externes seront appliquées, en plus de la feuille nommée "common.css", (toujours appliquée du fait de l'absence de tout attribut title dans sa définition). Si l'utilisateur sélectionne le style "big print", les feuilles "bigprint.css" et "common.css" seront appliquées par l'agent utilisateur, et les feuilles "compact" ne le seront plus.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css">
<LINK rel=stylesheet href="common.css">
Voici un exemple qui combine les éléments LINK et STYLE elements.
<LINK REL=stylesheet HREF="corporate.css"> <LINK REL=stylesheet HREF="techreport.css"> <STYLE TYPE="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
Un élément META permettra& de définir le style nommé par défaut pour le document. Par exemple, pour fixer le style par défaut à la valeur "compact" (voir l'exemple précédent), vous incluerez la ligne suivante dans la section HEAD du document :
<META http-equiv="Default-Style" content="compact">
Le style par défaut peut aussi être défini par des en-têtes HTTP. La déclaration META ci-dessus serait équivalente au champ d'en-tête HTTP :
Default-Style: "compact"
Si plusieurs déclarations de style par défaut sont mentionnées, soit sous forme d'éléments META ou de champs HTTP, c'est la dernière vue qui est prédominante. Les mentions apparaissant dans des champs d'en-tête HTTP sont toujours considérées comme antérieures à tout déclaration au sein de la section HEAD. En l'absence de déclaration implcite, le style par défaut est pris comme celui défini par le premier élément LINK dont l'attribut title a été défini et dont l'attribut rel vaut "stylesheet".
Lorsqu'un agent utilisateur doit visualiser un document, il doit tout d'abord déterminer des valeurs pour les diverses propriétés stylistiques, par exemple, la famille de polices, le style de caractères, leur taille, la hauteur de ligne, la couleur du texte, etc. Le mécanisme exact pour cela dépend du langage de feuille de style, mais on peut dire que la description suivante est en général applicable :
Le mécanisme de cascade est utilisé lorsqu'un certain nombre de feuilles de style s'appliquent directement à une instance. Le mécanisme permet à l'agent utilisateur de trier les règles par spécificité, et de déterminer quelles règles sont à appliquer. Si aucun règle ne répond à ce choix, l'étape suivante consiste à déterminer les propriétés de style qui peuvent être héritées. Toutes les propriétés ne peuvent pas être héritées. Pour ces dernières, le langage de feuille de style procurera des valeurs par défaut à utiliser lorsqu'aucune règle ne vient donner une valeur explicite pour l'élément.
S'il est possible d'hériter de la propriété, l'agent utilisateur examine l'élément directement englobant pour voir si une règle lui est appliquée, et qu'il faudrait transmettre à l'élément inclus. Ce processus continue jusqu'à ce qu'une règle applicable soit trouvée. Ce mécanisme permet de définir des feuilles style de façon très compacte. Par exemple, vous pouvez spécifier la famille de polices pour tous les éléments de la section BODY et ce par une unique règle qui s'appliquerait à l'élément BODY lui-même.
Certains langages de feuille de style supportent une syntaxe destinée à permettre le masquage du contenu des éléments STYLE au vu d'agents utilisateurs non conformes.
Cet exemple illustre avec CSS comment passer en commentaire HTML le contenu des éléments STYLE afin de s'assurer que des navigateurs plus anciens et non conformes n'aient pas tendance à le considérer comme un fragment de texte du document.
<STYLE type="text/css"> <!-- H1 { color: red } P { color: blue} --> </STYLE>
Il peut être parfois intéressant de configurer un serveur Web de sorte que celui-ci indique systématiquement la feuille de style à appliquer pour toutes les pages d'un certain groupe de documents. Le champ d'en-tête HTTP Link à le même effet qu'un élément LINK de même attributs et valeurs. Des champs Link multiples correspondent à de multiples éléments LINK placés dans le même ordre. Ainsi,
Link: REL=stylesheet HREF="corporate.css"
équivaut à:
<LINK rel="stylesheet" href="corporate.css">
Vous pouvez par ce biais spécifier plusieurs alternatives de style, en utilisant de multiples champs Link, puis en spécifiant l'attribut rel qui déterminera le style par défaut.
Dans l'exemple suivant, "compact" est appliqué par défaut car le mot-clef "alternate" est omis dans l'attribut rel.
Link: rel="stylesheet" title="compact" href="compact.css" Link: rel="alternate stylesheet" title="big print" href="bigprint.css"
Ceci fontionnera aussi lorsque les documents HTML sont transportés via email. Certains agents de courrier peuvent néanmoins altérer l'ordre des en-têtes [RFC822]. Pour éviter que ceci ne vienne influer sur l'ordre de cascade des feuilles de style définies dans les champs d'en-têtes Link, vous pourrez utiliser la concaténation des champs d'en-tête pour réunir plusieurs instances du même type de champ. Les guillemets ne sont nécessaires que lorsque la valeur de l'attribut comporte des séparateurs (espaces). Il faudra utiliser des entités SGML pour inclure des caractères non permis dans les champs d'en-tête HTTP ou de courrier, ou tout autre symbole susceptible d'être affecté par tout intermédiaire de transport.
Les éléments LINK et META suggérés par des champs d'en-tête HTTP sont toujours supposés être intervenus avant toute déclaration explicite d'éléments LINK et META situés à l'intérieur de la section HEAD.