La version française de cette traduction est :
http://www.la-grange.net/w3c/html4.01/
Traducteur : Karl Dubost - <karl+misc@la-grange.net> dans le cadre de l'effort de la liste de discussion w3c-translators.fr@w3.org
La version française peut contenir des erreurs. La version anglaise de cette note est l'unique version
normative. Version originale : http://www.w3.org/TR/1999/REC-html401-19991224
Sommaire
Les feuilles de style représentent un progrès majeur pour les concepteurs de pages Web, en développant les possibilités d'améliorer l'aspect de leurs pages. Dans les milieux scientifiques au sein desquels le Web a été conçu, les personnes étaient plus attachées au contenu de leurs documents qu'à leur présentation. Au fur et à mesure de la découverte du Web par des personnes issus d'horizons plus larges, les limitations de HTML devinrent la source de frustrations continues et les auteurs furent forcés de contourner les limitations stylistiques de HTML. Bien que l'intention étaient louable, (améliorer la présentation des pages Web), les techniques employées pour le faire ont eu des effets secondaires malheureux. Ces techniques fonctionnent parfois pour certaines personnes, mais pas tout le temps pour toutes les personnes. Elles comprennent :
Ces techniques accroissent considérablement la complexité des pages Web, offrent peu de souplesse, souffrent de problèmes d'interopérabilité et sont une épreuve pour les personnes avec des handicaps.
Les feuilles de style résolvent tous ces problèmes en même temps qu'elles remplacent l'éventail limité des mécanismes de présentation dans HTML. Avec les feuilles de style, il devient facile de spécifier l'espacement entre les lignes de texte, l'indentation des lignes de texte, la couleur utilisée pour le texte et l'arrière-plan, la taille et le style de la police et quantité d'autres détails.
Par exemple, la courte feuille de style CSS suivante (stockée dans le fichier "special.css") définit la couleur du texte d'un paragraphe en vert et l'entoure avec une bordure pleine rouge :
P.special { color : green; border: solid red; }
L'auteur peut relier cette feuille de style à son document HTML source avec l'élément LINK :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
errata-17
</HEAD>
<BODY>
<P class="special">Le texte de ce paragraphe devrait être vert.
</BODY>
</HTML>
HTML 4 apporte la gestion des fonctionnalités de feuille de style suivantes :
Le placement des feuilles de style dans des fichiers séparés afin de faciliter leur réutilisation. Il est parfois utile d'inclure des instructions de restitution dans le document auquel elles s'appliquent, soit regroupées au début du document, soit dans les attributs des éléments tout au long du corps du document. Afin de faciliter la gestion du style pour un site entier, cette spécification décrit comment utiliser les en-têtes HTTP pour que les feuilles de style s'appliquent à un document.
Cette spécification n'attache pas HTML à un langage de style particulier. Cela permet l'utilisation d'un panel de langages, par exemple les plus simples pour la majorité des utilisateurs et les plus complexes pour une minorité d'utilisateurs aux besoins très spécialisés. Les exemples inclus ci-dessous utilisent tous le langage CSS [CSS1], mais d'autres langages de feuille de style seraient possibles.
C'est la faculté de certains langages de feuilles de style, tel que CSS, d'assembler les informations de style provenant de plusieurs sources. Celles-ci pourraient être, par exemple, la charte de style d'une entreprise, les styles communs à un groupe de documents et les styles propres à un seul document. En les stockant séparément, les feuilles de style peuvent être réutilisées, ce qui simplifie l'édition et utilise plus efficacement les caches du réseau. La cascade définit une séquence ordonnée de feuilles de style dans laquelle les dernières feuilles de style ont une priorité plus élevée que les premières. Certains langages de feuille de style ne gèrent pas la cascade.
HTML permet aux auteurs de spécifier les documents indépendament du média. Cela permet aux utilisateurs l'accès aux pages Web au moyen d'une grande variété d'appareils et de médias, par exemple, les écrans graphiques des ordinateurs tournant sous Windows, Macintosh OS ou X11, les appareils de télévision, les téléphones portables spéciaux et les agendas électroniques, les navigateurs à synthèse vocale et les appareils tactiles Braille.
Les feuilles de style, par contraste, s'applique à un média spécifique ou à un groupe de médias. Une feuille de style prévue pour un écran peut être éventuellement utilisable pour l'impression, mais sera de peu d'utilité pour un navigateur à synthèse vocale. Cette spécification permet de définir les catégories générales de médias pour lesquels une feuille de style donnée peut s'appliquer. Ceci permet aux agents utilisateurs d'éviter la recherche de feuilles de style innapropriées. Les langages de feuilles de style peuvent inclure des mécanismes décrivant les dépendances aux médias dans la même feuille de style.
Les auteurs peuvent vouloir offrir aux lecteurs plusieurs présentations d'un document. Par exemple, une feuille de style pour la restitution des documents compacts dans une petite taille de police, ou une autre qui spécifie une taille de police plus grande pour une meilleure lisibilité. Cette spécification permet aux auteurs de spécifier une feuille de style préférée tout comme les feuilles alternatives qui visent des utilisateurs ou des médias spécifiques. Les agents utilisateurs devraient donner aux utilisateurs la possibilité de choisir entre plusieurs feuilles de styles alternatives comme de désactiver les feuilles de style.
Certaines personnes ont exprimés des inquiétudes sur l'efficacité des feuilles de style. Par exemple, la recherche d'une feuille de style externe peut retarder la présentation complète à l'utilisateur. Une question similaire surgit pour l'en-tête d'un document qui contient une longue liste de règles de style.
La proposition actuelle répond à ces interrogations en permettant aux auteurs d'inclure des instructions de restitution à l'intérieur de chaque élément HTML. Les indications de restitution sont alors toujours disponibles au moment où l'agent utilisateur veut restituer chacun des éléments.
Dans de nombreux cas, les auteurs bénéficieront d'une feuille de style commune à un groupe de documents. Auquel cas, l'éparpillement des règles de style à travers le document entraînera en réalité une efficacité bien moindre que l'utilisation d'une feuille de style reliée, puisque la feuille de style sera déjà présente dans le cache local pour la plupart des documents. La disponibilité publique de bonnes feuilles de style encouragera cette tendance.
Remarque : L'exemple de feuille de style par défaut pour HTML 4 qui est donné dans [CSS2] exprime les informations de style par défaut généralement acceptées pour chaque élément. Les auteurs comme les développeurs pourraient considérer utilement cette ressource.
Les documents HTML peuvent contenir directement les règles de feuille de style ou bien peuvent les importer.
N'importe quel langage de feuille de style peut être utilisé avec HTML. Un langage de feuille de style simple peut suffire pour les besoins de la plupart des utilisateurs, mais d'autres langages peuvent mieux convenir pour des besoins très spécialisés. Cette spécification utilise le langage de style CSS ([CSS1]) pour les exemples.
La syntaxe des données de style dépend du langage de feuille de style.
Les auteurs doivent spécifier le langage de feuille de style des informations de style associées au document HTML.
Les auteurs devraient utiliser l'élément META pour définir le langage de feuille de style par défaut du document. Par exemple, pour définir le langage CSS par défaut, les auteurs devraient inclure la déclaration suivante dans la section HEAD de leurs documents :
<META http-equiv="Content-Style-Type" content="text/css">
On peut aussi définir le langage de feuille de style par défaut avec les en-têtes HTTP. La déclaration META précédente équivaut à l'en-tête HTTP :
Content-Style-Type: text/css
Les agents utilisateurs devraient déterminer le langage de feuille de style par défaut du document en suivant les étapes suivantes (de la plus haute priorité à la plus basse) :
Les documents, qui incluent des éléments spécifiant un attribut style, mais qui ne définissent pas de feuille de style par défaut sont erronés. Les outils d'édition devraient générer une indication de langage de feuille de style par défaut (typiquement une déclaration META), de sorte que les agents utilisateurs ne soient pas obligés de se rabattre sur un "text/css" par défaut.
Définition des attributs
La syntaxe de la valeur de l'attribut style est déterminée par le langage de feuille de style par défaut. Par exemple, pour un style en-ligne [[CSS2]], utilisez la syntaxe de bloc de déclaration décrite dans la section 4.1.8 (sans les accolades délimitrices).
Cet exemple CSS spécifie les informations de couleur et de police du texte dans un paragraphe particulier.
<P style="font-size: 12pt; color: fuchsia">Les feuilles de style ne sont-elles pas merveilleuses ?
Dans CSS, les déclarations des propriétés prennent la forme « nom : valeur » et sont séparées par des points-virgules.
Pour spécifier les informations de style de plusieurs éléments, les auteurs devraient utiliser l'élément STYLE. Pour une souplesse optimale, les auteurs devraient définir les styles dans des feuilles de style externes.
<!ELEMENT STYLE - - %StyleSheet -- info de style --> <!ATTLIST STYLE %i18n; -- lang, dir, à utiliser avec title -- type %ContentType; #REQUIRED -- type de contenu du langage de style -- media %MediaDesc; #IMPLIED -- conçu pour ce média -- title %Text; #IMPLIED -- titre consultatif -- >
Balise ouvrante : obligatoire, Balise fermante : obligatoire
Définition des attributs
Attributs définis ailleurs
L'élément STYLE permet aux auteurs de placer des règles de style dans l'en-tête du document. HTML autorise un nombre quelconque d'éléments STYLE dans la section HEAD d'un document.
Les agents utilisateurs, qui ne reconnaissent pas les feuilles de style ou bien le langage de feuille de style spécifique utilisé par un élément STYLE, doivent dissimuler le contenu de l'élément STYLE. La restitution du contenu de cet élément en tant que partie du texte du document constitue une erreur. Certains langages de feuilles de style gèrent une syntaxe pour dissimuler le contenu aux agents utilisateurs non conformes.
La syntaxe des données de style dépend du langage de feuille de style.
Certaines implémentations de feuille de style peuvent autoriser une plus grande variété de règles dans l'élément STYLE que dans l'attribut style. Par exemple, avec CSS, on peut déclarer les règles à l'intérieur d'un élément STYLE pour :
Les règles de préséance et d'héritage des règles de style dépendent du langage de feuille de style.
La déclaration CSS suivante, avec l'élément STYLE, met une bordure autour de chacun des é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 indiquer que ces informations de style ne devraient s'appliquer qu'aux éléments H1 appartenant à une classe particulière, nous modifions la règle de cette façon :
<HEAD> <STYLE type="text/css"> H1.maclasse {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="maclasse"> Cet H1 est touché par notre style </H1> <H1> Celui-ci ne l'est pas </H1> </BODY>
Finalement, pour restreindre la portée des informations de style à une instance unique d'élément H1, spécifions l'attribut id :
<HEAD> <STYLE type="text/css"> #monid {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="maclasse"> Cet H1 n'est pas touché </H1> <H1 id="monid"> Cet H1 est touché par le style </H1> <H1> Cet H1 n'est pas touché </H1> </BODY>
Tandis qu'on peut définir des informations de style pour pratiquement tous les éléments HTML, deux éléments, DIV et SPAN, sont particulièrement utiles dans la mesure où ils n'imposent aucune sémantique de présentation (en dehors de la distinction type bloc/type en-ligne). Lorsqu'ils sont utilisés conjointement avec les feuilles de style, ces éléments permettent aux utilisateurs un développement HTML illimité, particulièrement quand ils sont utilisés avec les attributs class et id.
Dans l'exemple suivant, nous utilisons l'élément SPAN pour spécifier le style de la police des 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 class="sc-ex">Les premiers mots</SPAN> de ce paragraphe en petites capitales. </BODY>
Dans l'exemple suivant, nous utilisons l'élément DIV et l'attribut class pour définir la justification du texte d'une succession de paragraphes qui constituent la section de résumé d'un article scientifique. Ces informations de style pourraient être réutilisées pour d'autres sections de résumé en utilisant l'attribut class ailleurs dans le document.
<HEAD> <STYLE type="text/css"> DIV.resume { text-align: justify } </STYLE> </HEAD> <BODY> <DIV class="resume"> <P>Les outils de gestion de contenu Web permettent de résoudre la plupart des problèmes de production liés aux sites web tout en jetant un pont entre les différents supports de diffusion de l'information.</P> <P>Mais l'engouement dont bénéficient ces logiciels ne doit pas faire oublier que leur déploiement reste difficile et que leur marché est très mouvant.</P> </DIV> </BODY>
HTML autorise les auteurs à concevoir des documents qui exploitent les caractéristiques du média sur lequel le document doit être restitué (par exemple, écran graphique, écran de télévision, appareil de poches, navigateur à synthèse vocale, appareil tactile Braille, etc.). En spécifiant l'attribut media, les auteurs permettent aux agents utilisateurs de charger et appliquer les feuilles de style de manière sélective. Veuillez consulter la liste des descripteurs de média reconnus.
Les déclarations des exemples suivants s'appliquent aux éléments H1. Pour une projection dans une réunion de travail, toutes leurs instances apparaîtront en bleu. Pour une impression papier, toutes les instances seront centrées.
<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 des effets sonores aux ancres pour une sortie vocale :
<STYLE type="text/css" media="aural"> A { cue-before: uri(ding.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD>
La commande du média est particulièrement intéressante quand elle s'applique aux feuilles de style externes, dans la mesure où les agents utilisateurs peuvent économiser du temps en ne chargeant à partir du réseau que celles des feuilles de style qui concernent l'appareil courant. Par exemple, les navigateurs vocaux peuvent s'épargner le chargement des feuilles de style conçues pour une restitution visuelle. Voir la section sur les cascades dépendant du média pour plus de renseignements.
Les auteurs peuvent séparer les feuilles de style des documents HTML. Ce qui offre plusieurs avantages :
HTML permet aux auteurs d'associer un nombre quelconque de feuilles de style externes à un document. Le langage de feuille de style définit comment plusieurs feuilles de style externes interagissent (par exemple, les règles de « cascade » de CSS).
Les auteurs peuvent spécifier un certain nombre de feuilles de style mutuellement exclusives appelées feuilles de style alternatives. L'utilisateur peut sélectionner sa feuille de style favorite parmi celles-ci en fonction de ses préférences. Par exemple, l'auteur peut spécifier une feuille de style conçue pour les petits écrans et une autre pour les utilisateurs dont la vision est faible (par exemple, avec une grande taille de police). Les agents utilisateurs devraient permettre aux utilisateurs d'opérer une sélection entre les feuilles de style alternatives.
L'auteur peut spécifier que l'une des feuilles de style alternatives est la préférée. Les agents utilisateurs devraient appliquer la feuille de style préférée de l'auteur, à moins que l'utilisateur n'ait sélectionné une autre alternative.
L'auteur peut regrouper plusieurs feuilles de style alternatives (y compris sa préférée) sous un seul nom de style. Quand un utilisateur sélectionne un style nommé, l'agent utilisateur doit appliquer toutes les feuilles de style de ce nom. Les agents utilisateurs ne doivent pas appliquer les feuilles de style alternatives avec un nom différent. La section sur la spécification des feuilles de style externes explique comment nommer un groupe de feuilles de style.
Les agents utilisateurs doivent respecter les descripteurs de média lors de l'application d'une feuille de style.
L'agent utilisateur devrait également permettre aux utilisateurs de désactiver entièrement les feuilles de style de l'auteur, auquel cas l'agent utilisateur ne doit pas appliquer les éventuelles feuilles de style persistentes ou alternatives.
Les auteurs spécifient les feuilles de style externes au moyen des attributs suivants de l'élément LINK :
Les agents utilisateurs devraient fournir aux utilisateurs les moyens de passer en revue et de choisir les feuilles de style alternatives dans une liste. On recommande la valeur de l'attribut title comme nom pour chaque option.
Dans cet exemple, nous spécifions d'abord une feuille de style persistente qui se trouve dans le fichier "meustilu.css" :
<LINK href="meustilu.css" rel="stylesheet" type="text/css">
En définissant l'attribut title, on en fait la feuille de style préférée de l'auteur :
<LINK href="meustilu.css" title="compact" rel="stylesheet" type="text/css">
En rajoutant le mot-clé "alternate" à la valeur de l'attribut rel, on en fait une feuille de style alternative :
<LINK href="meustilu.css" title="Moyenne" rel="alternate stylesheet" type="text/css">
Pour plus de renseignements sur les feuilles de style externes, veuillez consulter la section sur les liens et les feuilles de style externes.
L'auteur peut aussi utiliser l'élément META pour établir la feuille de style préférée du document. Par exemple, pour mettre « compact » comme feuille de style préférée (ci-dessus), l'auteur peut inclure la ligne suivante dans la section HEAD :
<META http-equiv="Default-Style" content="compact">
On peut encore spécifier la feuille de style préférée au moyen d'un en-tête HTTP. La déclaration META précédente équivaut à l'en-tête HTTP suivant :
Default-Style: "compact"
Si deux ou plus déclarations META, ou en-têtes HTTP, spécifient la feuille de style préférée, c'est la dernière qui sera retenue. Les en-têtes HTTP sont censés survenir avant la section HEAD du document dans ce cas.
Si deux ou plus éléments LINK spécifient une feuille de style préférée, le premier est retenu.
Les feuilles de style préférées au moyen d'éléments META ou d'en-têtes HTTP ont priorité sur celles spécifiées avec l'élément LINK.
Les langages de feuille de style en cascade, tel que CSS, autorisent l'assemblage des informations de style provenant de plusieurs sources. Pour définir une cascade, l'auteur spécifie une succession d'éléments LINK et/ou STYLE. Les informations de style se répandent en cascade selon l'ordre d'apparition des éléments dans la section HEAD.
Remarque : Cette spécification ne précise pas la manière dont les feuilles de styles issues de différents langages de style cascadent. Les auteurs devraient éviter de mélanger les langages de feuilles de style.
Dans l'exemple suivant, nous spécifions deux feuilles de style alternatives nommées "compact". Si l'utilisateur sélectionne le style « compact », l'agent utilisateur doit appliquer ces deux feuilles de style, ainsi que la feuille de style persistente "commune.css". Si l'utilisateur sélectionne « imprimer grand », seules la feuille de style alternative "imprimergrand.css" et la feuille de style persistente "commun.css" s'appliqueront.
<LINK rel="alternate stylesheet" title="compact" href="petit-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="petit-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="imprimer grand" href="imprimergrand.css" type="text/css"> <LINK rel="stylesheet" href="commun.css" type="text/css">
Voici un exemple de cascade qui fait intervenir les deux éléments LINK et STYLE.
<LINK rel="stylesheet" href="entreprise.css" type="text/css"> <LINK rel="stylesheet" href="rapport-technique.css" type="text/css"> <STYLE type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
La cascade peut inclure des feuilles de style qui concernent différents médias. Les éléments éléments LINK et STYLE peuvent tous deux être utilisés avec l'attribut media. L'agent utilisateur est alors responsable de l'élimination des feuilles de style qui ne s'appliquent pas au média courant.
Dans l'exemple suivant, nous définissons une cascade pour laquelle la feuille de style « entreprise » est proposée en plusieurs versions : une convenant pour l'impression, une pour l'écran et une pour les navigateurs vocaux (disons, utile quand on lit ses e-mails en voiture). La feuille de style "rapport-technique.css" convient pour tous les médias. La règle de couleur définie par l'élément STYLE est utilisée pour l'impression et pour l'écran, mais pas pour une restitution sonore.
<LINK rel="stylesheet" media="aural" href="entreprise-sonore.css" type="text/css"> <LINK rel="stylesheet" media="screen" href="entreprise-ecran.css" type="text/css"> <LINK rel="stylesheet" media="print" href="entreprise-impression.css" type="text/css"> <LINK rel="stylesheet" href="rapport-technique.css" type="text/css"> <STYLE media="screen, print" type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE>
Quand l'agent utilisateur veut restituer un document, il doit trouver les valeurs des propriétés de style, par exemple, la famille de police, le style de la police, la taille, la hauteur de ligne, la couleur du texte et ainsi de suite. Le mécanisme exact dépend du langage de feuille de style, mais la description suivante est applicable en général :
Le mécanisme de cascade est utilisé quand un certain nombre de règles de style s'appliquent toutes directement à un élément. Le mécanisme permet à l'agent utilisateur de ranger les règles selon leur spécificité, pour déterminer quelle règle s'applique. Si aucune règle n'est trouvée, l'étape suivante va dépendre de la propriété de style, si elle peut s'hériter ou non. Les propriétés ne peuvent pas toutes s'hériter. Auquel cas, le langage de feuille de style fournit des valeurs par défaut qu'il faut utiliser quand il n'y a aucune règle explicite pour un élément particulier.
Si la propriété peut s'hériter, l'agent utilisateur examine l'élément englobant immédiat pour voir si une règle s'y applique. Ce processus continue jusqu'à ce qu'une règle appliquable soit trouvée. Ce mécanisme autorise une spécification compacte des feuilles de style. Par exemple, l'auteur peut spécifier la famille de la police de tous les éléments de BODY par une seule règle appliquée à l'élément BODY.
Certains langages de feuille de style gère une syntaxe qui permet aux auteurs de dissimuler le contene de l'élément STYLE aux agents utilisateurs non conformes.
Cet exemple montre, dans le cas de CSS, la manière de masquer par un commentaire le contenu de l'élément STYLE pour s'assurer que les agents utilisateurs non conformes ne vont pas le restituer comme du texte.
<STYLE type="text/css"> <!-- H1 { color: red } P { color: blue} --> </STYLE>
Cette section ne concerne que les agents utilisateurs conformes aux versions de HTTP qui définissent un champs d'en-tête « Link ». Remarquez que le protocole HTTP 1.1, défini par le document [RFC2616], ne comprend pas de champs d'en-tête « Link » (se reporter à la section 19.6.3).
Les gestionnaires de serveur Web peuvent trouver commode de configurer leur serveur de sorte qu'une feuille de style soit appliquée à un groupe de pages. L'en-tête HTTP Link produit le même effet qu'un élément LINK ayant les mêmes attributs et valeurs. Les en-têtes Link multiples correspondent aux multiples éléments LINK qui surviendraient dans le même ordre. Par exemple :
Link: <http://www.acme.com/entreprise.css>; REL=stylesheet
cet en-tête correspond à :
<LINK rel="stylesheet" href="http://www.acme.com/entreprise.css">
Il est possible de spécifier plusieurs feuilles de style alternatives en utilisant plusieurs en-têtes Link, et d'utiliser ensuite l'attribut rel pour déterminer le style par défaut.
Dans l'exemple suivant, le style « compact » s'applique par défaut puisque le mot-clé "alternate" de l'attribut rel est absent.
Link: <compact.css>; rel="stylesheet"; title="compact" Link: <imprimergrand.css>; rel="alternate stylesheet"; title="imprimer grand"
Ceci devrait également fonctionner pour les documents HTML envoyés par e-mail. Certains agents de courrier peuvent altérer l'ordre des en-têtes [RFC822]. Pour s'en prémunir, car cela agit sur l'ordre de cascade des feuilles de style spécifiées par les en-têtes Link, les auteurs peuvent effectuer une concaténation des en-têtes pour fusionner plusieurs intances du même champs d'en-tête. Les guillemets sont seulement nécessaires quand les valeurs d'attribut contiennent des blancs. Utilisez les entités SGML pour référencer les caractères qui ne seraient pas admis sinon à l'intérieur des en-têtes HTTP ou de courrier, ou qui risquent vraisemblablement d'être altérés lors du transit dans les passerelles.
Les éléments LINK et META impliqués par les en-têtes HTTP sont définis comme survenant avant tous les éléments LINK et META dans la section HEAD du document.