Feuilles de style 

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 :

• L'utilisation d'extensions propriétaires et non normalisées du HTML
• L'utilisation d'images pour mettre en forme du texte
• L'utilisation d'images pour effectuer des tabulations invisibles
• L'utilisation de tableaux pour effectuer la mise en page
• L'écriture de programmes au lieu d'utiliser le HTML

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 :

Souplesse du placement des informations stylistiques

L'écriture d'inforamtions stylistiques dans des fichiers séparés rend celles-ci plus réutilisables. Parfois il est utile d'inclure des instructions relatives à la façon d'afficher dans le document auquel elles s'appliquent, soit groupées en tête de ce dernier, ou en tant qu'attributs des éléments répartis dans le corps du document. Pour rendre plus simple la gestion de ces informations dans un contexte de site Web, cette spécification décrit comment exploiter les champs d'en-tête HTTP pour spécifier la feuille de style à appliquer à un document.

Indépendance par rapport aux langages spécifiques de feuilles de style

Cette spécification ne lie pas le HTML à un langage de description de style particulier. Ceci permettra d'utiliser plusieurs de ces langages indifféremment, par exemple des langages relativement simplistes pour la majorité des utilisateurs et des langages beaucoup plus complexes pour des utilisateurs avertis aux besoins particulièrement exigeants. Les exemples inclus ci-dessous utilisent tous le langage CSS (Cascading Style Sheets) ou "styles en caszcade" [CSS1], mais d'autres lanagages pourraient être utilisés.

Styles en cascade

Il s'agit d'une capacité qu'ont certains langages de définition de styles tels que CSS de permettre de combiner des informations de styles à partir de sources distinctes. Par exemple, des indications de charte graphique d'entreprise, des styles communs à un groupe documentaire, et enfin des styles particuliers à un document donné. en enregistrant ces informations séparément, les feuilles de style pourront être réutilisées, simplifiant la production documentaire et rendant plus efficaces les mécanimes de cache. La cascade définit un ordre de précédence entre les diverses feuilles de styles combinées pour obtenir le style final. Tous les langages de feuille de style ne supportent pas la cascade.

Dépendance au média

Le HTML vous permet de spécifier un document indépendamment du média. Il permet de ce fait à quiconque de visualiser des documents Web via des appareils et interfaces très différentes, par exemple des écrans graphiques sous Windows, macOS, et X11, des boîtiers de réception sur téléviseur, des appareils spéciaux sur casque audio, à travers des navigateurs à synthèse vocale ou à affichage en braille.

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.

Alternatives de styles

Les auteurs voudront probablement proposer plusieurs styles alternatifs pour un même document. Par exemple, une version compacte écrite en petits caractères, et une en caractères plus gros pour une lisibilité plus confortable. La présente spécification vous permettra de définir de telles alternatives, et parmi celles-ci laquelle doit être utilisée par défaut. Il devra être proposé aux utilisateurs un moyen de sélectionner le style final, ou même de désactiver l'application d'un quelconque style.

Ajout de style au HTML 

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).

Définition du langage par défaut pour les feuilles de style 

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.

Informations stylistiques "en ligne" 

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'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.

En-têtes de style: L'élément STYLE 

<!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

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 :

• L'application à toutes les instances d'un élément HTML (ex., tous les éléments P, tous les éléments H1, etc.)
• Toutesles instances d'un élément HTML appartenant à une classe particulière (c-à-d, dont l'attribut class vaut une certaine valeur).
• Des instances uniques d'un élément HTML (c-à-d, dont l'attribut id vaut une certaine valeur).

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é.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

<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>

<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.

<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>

<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>

Types de média 

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.

<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.

<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.

Feuilles de style externes 

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 :

• partager des ensembles de définitions de styles entre plusieurs documents (voire serveurs)
• Modifier les style de présentation d'un document sans changer le document lui-même

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 :

• L'attribut href devra indiquer la localisation du fichier de style. La valeur inscrite dans href est une URL.
• L'attribut rel indiquera si la feuille de style est persistante (rel="stylesheet"), la feuille par défaut (rel="stylesheet"), ou une alternative (rel="alternate stylesheet").
• L'attribut title sera mentionné s'il s'agit d'une feuille de style par défaut, c'est-à-dire, si elle peut être désactivable par l'utilisateur.

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.

    <LINK REL=stylesheet HREF="corporate.css">
    <LINK REL=stylesheet HREF="techreport.css">
    <STYLE TYPE="text/css">
        p.special { color: rgb(230, 100, 180) }
    </STYLE>

Spécification du style par défaut 

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".

Héritage et cascade 

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.

Masquage du contenu de l'élément Style pour les agents utilisateurs non conformes 

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.

<STYLE type="text/css">
<!--
   H1 { color: red }
   P  { color: blue}
   -->
</STYLE>

Specification de style par des champs d'en-tête HTTP 

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.

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.