Utiliser des titres corrects avec des feuilles de styles externes

Les feuilles de style externes sont souvent associées aux documents HTML en utilisant l'élément link, mais il est important d'en employer correctement les attributs. En effet, il y a trois sortes de feuilles de style, et l'attribut title est la clé de deux d'entre elles. Sa présence dans un élément link qui référence une feuille de style externe transforme celle-ci en feuille de style par défaut. Dans la plupart des cas, ceci conduira la feuille de style externe à être ignorée, ce qui n'est généralement pas l'intention de l'auteur.

Pourquoi les titres sont-ils importants

L'attribut title détermine la façon dont votre feuille de style externe s'applique à votre document. En fait, l'utilisation de l'attribut title est tellement significative que le HTML 4.01 classe les feuilles de style par catégorie selon sa présence ou son absence. En spécifiant un attribut title, vous pouvez décider si une feuille particulière affecte le document en permanence ou si elle est employée seulement dans certaines circonstances.

Il y a trois sortes de feuilles de style possibles : permanente, par défaut et alternative. Les auteurs sont surtout familiarisés avec les feuilles de style permanentes, qui peuvent s'appliquer simultanément en n'importe quel nombre à un document. Une feuille de style permanente n'a pas d'attribut title et son attribut rel a la valeur stylesheet. Un document peut se référer à une ou plusieurs feuilles de style permanentes, qui seront toutes utilisées pour sa présentation.

Une feuille de style par défaut, quant à elle, a un attribut rel doté de la valeur stylesheet et un attribut title de n'importe quelle valeur. En voici deux exemples :

<link type="text/css" rel="stylesheet" title="Basic styles" href="basic.css" />
<link type="text/css" rel="stylesheet" title="Fish and boats" href="ocean.css" />

Selon la spécification HTML 4.01, seulement une et une seule feuille de style par défaut peut être utilisée à la fois. Dès lors, dans l'exemple ci-dessus, une seule des deux feuilles de style par défaut sera appliquée au document. La spécification ne fournit pas de procédure pour décider laquelle doit être utilisée ; les agents utilisateur sont donc libres de choisir.

Par conséquent, aucun link vers une feuille de style incluant un attribut title ne sera permanent. Il risque au contraire d'être ignoré par le navigateur. N'importe quel élément link se rapportant à une feuille de style avec un attribut title doit être par défaut ou alternatif, selon la valeur de l'attribut rel.

Dans un document qui propose des styles alternatifs, la feuille de style par défaut sera employée à condition qu'aucun des styles alternatifs ne soit choisi par l'utilisateur. Ainsi, quand le document est chargé, le navigateur emploiera tous les styles permanents et une des feuilles de style par défaut (mais attention, il ne peut y avoir qu'un seul style par défaut). Lorsque l'utilisateur choisit un des styles alternatifs, le style par défaut ne sera plus employé, bien que l'utilisateur puisse toujours le sélectionner à nouveau.

Le rôle essentiel des styles par défaut est d'indiquer le style de préférence pour l'affichage du document ; c'est-à-dire que c'est sa « présentation » par défaut. Si l'une ou l'autre des feuilles de style alternatives est choisie, alors le style par défaut est ignoré en faveur du style alternatif choisi par l'utilisateur. Ceci diffère donc des styles permanents qui sont toujours appliqués au document, qu'un style alternatif ait été choisi ou pas.

Recommandations

Les auteurs doivent s'assurer que chaque feuille de style qui doit toujours s'appliquer est permanente et non alternative. Pour citer la Spécification HTML 4.01, section 14.3.1 :

• Pour rendre une feuille de style permanente, il faut spécifier la valeur « stylesheet » pour l'attribut rel et ne pas spécifier d'attribut title.
• Pour rendre une feuille de style par défaut, il faut spécifier la valeur « stylesheet » pour l'attribut rel et spécifier un attribut title.

Liens

• HTML 4.01 Specification, section 14.3: External style sheets