Les premiers pas

Les feuilles de style en cascade, plus connues sous leur abréviation anglaise CSS (Cascading Style Sheets), représentent un langage de programmation dédié à la transformation de la présentation visuelle d'un document ou d'un ensemble de documents. Leur utilisation ne se limite pas seulement au développement de sites Web : elles se sont rapidement étendues à une multitude d'environnements variés, souvent éloignés du Web traditionnel. On les retrouve ainsi dans des contextes tels que les interfaces utilisateur d'appareils intégrés, où elles jouent un rôle essentiel dans l'esthétique et l'ergonomie. Par ailleurs, certains logiciels comme les clients RSS permettent d'appliquer des styles CSS aux flux de données et aux entrées de flux pour en améliorer la lisibilité ou la personnalisation. Les feuilles de style ont donc su dépasser les frontières du simple navigateur Web pour s'inviter dans une grande variété de technologies.

De manière plus spécifique, le CSS a trouvé sa place dans des outils que l'on n'associe pas forcément au design web classique. Prenons par exemple les applications de messagerie instantanée : plusieurs d'entre elles exploitent CSS pour styliser et organiser les fenêtres de discussion, permettant d'offrir une expérience utilisateur plus agréable et souvent personnalisable. Ces fonctionnalités de style vont bien au-delà de simples ajustements esthétiques, car elles permettent également une meilleure structuration et compréhension des contenus affichés. De plus, les développeurs ont trouvé des moyens d'intégrer des éléments inspirés de CSS dans d'autres langages ou cadres d'applications. Par exemple, les cadres d'applications JavaScript modernes utilisent une syntaxe fortement influencée par celle des feuilles de style pour définir des interfaces et gérer des animations.

Mais ce n'est pas tout : CSS influence aussi directement certains aspects de la programmation dans des langages comme JavaScript. Cette interaction est particulièrement évidente dans la manipulation dynamique des styles via le DOM (Document Object Model), où les développeurs peuvent modifier des propriétés CSS à la volée pour créer des interfaces interactives et adaptatives. Par exemple, en JavaScript, il est possible de changer la couleur d'un texte, la taille d'un élément ou même de déclencher des transitions en fonction des actions de l'utilisateur. Ainsi, le CSS ne se limite pas à un simple rôle passif, mais devient une composante active et indispensable dans la construction de nombreuses applications modernes. Cela montre à quel point CSS a influencé la manière dont les développeurs conçoivent les interactions et l'expérience utilisateur.

Cette omniprésence de CSS témoigne de son incroyable flexibilité et de sa capacité à s'adapter à divers contextes technologiques. Au fil des ans, ce langage de programmation a su évoluer pour répondre à des besoins toujours plus complexes, intégrant de nouvelles fonctionnalités comme les variables CSS, les grilles (CSS Grid) ou encore les flexboxes, facilitant la création de mises en page sophistiquées. Ces avancées, couplées à son adoption massive, ont également permis à CSS de rester pertinent, même dans des environnements n'étant pas initialement destinés à son utilisation. Par exemple, certains environnements d'affichage pour les objets connectés ou les tableaux de bord industriels exploitent CSS pour offrir une meilleure clarté visuelle et améliorer l'ergonomie des interfaces utilisateur.

Ses origines

Tout d'abord, le CSS a été proposé pour la première fois en 1994, au moment où le Web commençait à vraiment prendre de l'ampleur. À l'époque, les navigateurs offraient à l'utilisateur toutes sortes de possibilités de style : les préférences de présentation de NCSA Mosaic, par exemple, permettaient à l'utilisateur de définir la famille de polices de caractères, la taille et la couleur de chaque élément. Rien de tout cela n'était disponible pour les auteurs de documents; tout ce qu'ils pouvaient faire était de marquer un élément de contenu comme un paragraphe, comme un titre d'un certain niveau, comme un texte préformaté ou l'un des douze autres types d'éléments. Si un utilisateur configurait son navigateur pour que tous les titres de niveau 1 soient minuscules et roses et tous les titres de niveau 6 énormes et rouges, eh bien, c'était son point de mire.

C'est dans ce milieu que le CSS a été introduit. Son objectif était de fournir un langage de programmation de style simple et déclaratif étant flexible pour les auteurs de pages Web et, surtout, offrant un pouvoir de style aux auteurs et aux utilisateurs. Grâce à la cascade, ces styles pouvaient être combinés et hiérarchisés de manière à ce que les auteurs du site et les lecteurs aient leur mot à dire, même si ces derniers avaient toujours le dernier mot.

Les travaux ont rapidement progressé et, fin 1996, CSS1 était terminé. Alors que le groupe de travail CSS nouvellement créé avançait avec CSS2, les navigateurs Web peinaient à implémenter CSS1 de manière interopérable. Bien que chaque élément de CSS soit assez simple en soi, la combinaison de ces éléments a créé des comportements étonnamment complexes. Des faux pas malheureux se sont également produits, comme la fameuse divergence dans les implémentations du modèle de boîte. Ces problèmes ont menacé de faire dérailler complètement CSS, mais heureusement, certaines propositions intelligentes ont été mises en ouvre et les navigateurs ont commencé à s'harmoniser. En quelques années, grâce à une interopérabilité croissante et à des développements de grande envergure tels que la refonte basée sur CSS du magazine Wired et du CSS Zen Garden, CSS a commencé à prendre de l'ampleur.

Mais avant tout cela, le groupe de travail CSS avait finalisé la spécification CSS2 au début de l'année 1998. Une fois CSS2 terminé, les travaux ont immédiatement commencé sur CSS3, ainsi que sur une version clarifiée de CSS2 appelée CSS2.1. Conformément à l'esprit du temps, ce qui a été initialement baptisé CSS3 a été construit comme une série de modules (théoriquement) autonomes au lieu d'une seule spécification monolithique. Cette approche reflétait la spécification XHTML alors en vigueur, ayant été divisée en modules pour des raisons similaires.

La modularisation de CSS était justifiée par le fait que chaque module pouvait être travaillé à son propre rythme, et que les modules particulièrement critiques (ou populaires) pouvaient progresser sur la voie du World Wide Web Consortium (W3C) sans être retardés par d'autres. En effet, cela s'est avéré être le cas. Début 2012, trois modules CSS de niveau 3 (ainsi que CSS1 et CSS 2.1) avaient atteint l'état de recommandation complète : CSS Color Level 3, CSS Namespaces et Selectors Level 3. Au même moment, sept modules étaient au état de recommandation candidate et plusieurs dizaines d'autres étaient à divers stades de brouillon. Avec l'ancienne approche, les couleurs, les sélecteurs et les espaces de noms auraient dû attendre que toutes les autres parties de la spécification soient terminées ou coupées avant de pouvoir faire partie d'une spécification complète. Grâce à la modularisation, ils n'ont pas eu à attendre.

Cela étant dit, nous sommes prêts à commencer à comprendre CSS. Commençons par aborder les bases de ce qui se trouve dans une feuille de style.

Contenu de la feuille de style

Le contenu d'une feuille de style en CSS correspond à l'ensemble des règles définissant la présentation visuelle des éléments HTML d'un document. Ces règles sont structurées sous la forme de blocs comprenant un sélecteur, des propriétés et des valeurs. Le sélecteur identifie les éléments HTML auxquels les styles doivent s'appliquer (par exemple h1, .classe, ou #id), tandis que les propriétés déterminent les aspects visuels à modifier (comme color, font-size ou margin), et les valeurs définissent les réglages spécifiques pour ces propriétés. Ces règles constituent la base du langage de programmation CSS et permettent de personnaliser l'apparence des pages web.

Une feuille de style peut contenir divers types de règles, allant des sélecteurs simples aux sélecteurs complexes. Les sélecteurs simples, comme p ou h1, ciblent des balises spécifiques, tandis que les sélecteurs complexes, comme ul > li (enfants directs) ou a:hover (pseudo-classes), permettent de cibler des éléments dans des contextes particuliers. En outre, il est possible de regrouper plusieurs sélecteurs pour appliquer les mêmes styles à plusieurs éléments en une seule déclaration. Cela rend les feuilles de style plus efficaces et plus faciles à gérer, en particulier pour les projets de grande envergure.

Les feuilles de style peuvent être intégrées dans un document HTML de différentes manières. La méthode recommandée est d'utiliser une feuille de style externe, liée au document avec une balise <link> dans la section <head> de la page. Le contenu du fichier externe contient les règles CSS s'appliquant au document. Une autre option consiste à inclure des styles dans une balise <style> directement dans le fichier HTML, bien que cela soit moins flexible pour les mises à jour globales. Enfin, les styles en ligne (dans une balise HTML spécifique avec l'attribut style) sont possibles mais déconseillés pour une bonne maintenabilité du code.

Un exemple typique de contenu d'une feuille de style pourrait inclure des règles globales pour le corps de la page, des styles spécifiques pour des composantes tels que des menus ou des boutons, ainsi que des classes personnalisées. Par exemple, une règle pour le menu de navigation pourrait définir que les éléments de liste (li) s'affichent en ligne (display: inline-block) et ont un espacement entre eux. En combinant ces styles, il est possible de créer des designs cohérents et professionnels. Des pseudo-classes comme :hover permettent également d'ajouter des interactions dynamiques, comme le changement de couleur d'un lien lorsqu'on le survole avec la souris.

Dans une feuille de style, vous trouverez un certain nombre de règles ressemblant un peu au code source suivant :

Les styles tels que ceux-ci constituent l'essentiel de toute feuille de style, qu'elle soit simple ou complexe, courte ou longue. Mais quelles parties sont lesquelles et que représentent-elles ?

Structure des règles

Pour illustrer le concept de règles plus en détail, décomposons la structure. Chaque règle comporte deux parties fondamentales : le sélecteur et le bloc de déclaration. Le bloc de déclaration est composé d'une ou plusieurs déclarations, et chaque déclaration est une combinaison d'une propriété et d'une valeur. Chaque feuille de style est composée d'une série de ces règles.

Le sélecteur, affiché sur le côté gauche de la règle, définit la partie du document qui sera sélectionnée pour le style. Les éléments <h1> (niveau de titre 1) sont sélectionnés. Si le sélecteur était p, alors tous les éléments <p> (paragraphe) seraient sélectionnés. Le côté droit de la règle contient le bloc de déclaration, étant composé d'une ou plusieurs déclarations. Chaque déclaration est une combinaison d'une propriété CSS et d'une valeur de cette propriété. Dans l'exemple, le bloc de déclaration contient deux déclarations. La première stipule que cette règle fera en sorte que certaines parties du document aient une couleur bleu, et la seconde stipule que certaines parties du document auront un arrière-plan cyan. Ainsi, tous les éléments <h1> du document (définis par le sélecteur) seront stylisés en texte rouge sur fond cyan.

Préfixes de fournisseur

Parfois, vous verrez des éléments CSS précédés de tirets et d'étiquettes, comme ceci : -o-border-image. Ces préfixes de fournisseur étaient un moyen pour les fournisseurs de navigateurs Web de marquer les propriétés, les valeurs ou d'autres éléments de CSS comme étant expérimentaux ou propriétaires (ou les deux). Début 2023, quelques préfixes de fournisseur sont disponibles, les plus courants étant indiqués dans le tableau suivant :

Comme l'indique le tableau précédent, le format généralement accepté d'un préfixe de fournisseur est un trait d'union, une étiquette et un trait d'union, bien que quelques préfixes omettent par erreur le premier trait d'union. Les utilisations et les abus des préfixes de fournisseurs sont longs et tortueux. Il suffit de dire qu'ils ont commencé comme un moyen pour les fournisseurs de tester de nouvelles fonctionnalités, contribuant ainsi à accélérer l'interopérabilité sans craindre d'être enfermés dans des comportements hérités incompatibles avec d'autres navigateurs Web. Cela a permis d'éviter toute une classe de problèmes ayant presque étranglé CSS à ses débuts. Malheureusement, les propriétés préfixées ont ensuite été déployées publiquement par les auteurs Web et ont fini par provoquer toute une nouvelle classe de problèmes.

Au début de 2023, les fonctionnalités CSS préfixées par les fournisseurs sont presque inexistantes, les anciennes propriétés et valeurs préfixées étant lentement mais régulièrement supprimées des implémentations de navigateur Web. Vous n'écrirez probablement jamais de CSS préfixé, mais vous pouvez en rencontrer dans la nature ou en hériter dans une base de code héritée. Voici un exemple :

Cela revient à dire la même chose quatre fois : une fois pour chacune des lignes de navigateur WebKit, Gecko (Firefox) et Opera, puis enfin de la manière standard CSS. Encore une fois, ce n'est plus nécessaire. Nous l'incluons ici uniquement pour vous donner une idée de ce à quoi cela pourrait ressembler, si vous rencontrez ce problème à l'avenir.

Gestion des espaces blancs

Le CSS est fondamentalement insensible aux espaces blancs entre les règles, et largement insensible aux espaces blancs à l'intérieur des règles, bien qu'il existe quelques exceptions. En général, le CSS traite les espaces blancs comme le fait HTML : toute séquence de caractères d'espacement est réduite à un seul espace à des fins d'analyse. Ainsi, vous pouvez formater cette règle arc-en-ciel hypothétique des manières suivantes :

ainsi que tout autre modèle de séparation que vous pouvez imaginer. La seule restriction est que les caractères de séparation doivent être des espaces : un espace vide, une tabulation ou un saut de ligne, seuls ou en combinaison, autant que vous le souhaitez. De même, vous pouvez formater des séries de règles avec des espaces comme vous le souhaitez. Ce ne sont là que cinq exemples parmi un nombre infini de possibilités :

Comme vous pouvez le constater avec la première règle, les espaces peuvent être largement omis. En effet, c'est généralement le cas avec le CSS minifié, étant un CSS dont le moindre espace superflu a été supprimé, généralement par un script automatisé côté serveur. Les règles suivant les deux premières utilisent des quantités de plus en plus extravagantes d'espaces jusqu'à ce que, dans la dernière règle, presque tout ce qui peut être séparé sur sa propre ligne ait été séparé.

Toutes ces approches sont valables, vous devez donc choisir le formatage qui vous semble le plus logique, c'est-à-dire le plus facile à lire, et vous y tenir.

Les remarques CSS (les commentaires CSS)

Le CSS autorise les commentaires. Ceux-ci sont très similaires aux commentaires des langages de programmation C/C++ dans la mesure où ils sont entourés de /* et */ :

Les remarques peuvent s'étendre sur plusieurs lignes, comme en C++ :

Il est important de se rappeler que les commentaires CSS ne peuvent pas être imbriqués. Par exemple, ceci ne serait pas correct :

Une façon de créer accidentellement des commentaires «imbriqués» consiste à commenter temporairement un gros bloc d'une feuille de style contenant déjà un commentaire. Étant donné que CSS n'autorise pas les commentaires imbriqués, le commentaire «extérieur» se terminera là où le commentaire «intérieur» se termine.

Malheureusement, il n'existe pas de modèle de commentaire «reste de ligne» tel que // ou # (ce dernier étant de toute façon réservé aux sélecteurs d'ID). Le seul modèle de commentaire en CSS est /* */. Par conséquent, si vous souhaitez placer des commentaires sur la même ligne que le balisage, vous devez faire attention à la manière dont vous les placez. Par exemple, voici la bonne façon de procéder :

Étant donné cet exemple, si chaque ligne n'est pas balisée, la majeure partie de la feuille de style fera partie du commentaire et ne fonctionnera donc pas :

Dans cet exemple, seule la première règle (h1 {color: gray;}) sera appliquée au document. Les autres règles, en tant que partie du commentaire, sont ignorées par le moteur de rendu du navigateur Web.

Remarque : les commentaires CSS sont traités par l'analyseur CSS comme s'ils n'existaient pas du tout et ne sont donc pas considérés comme des espaces à des fins d'analyse. Cela signifie que vous pouvez les placer au milieu des règles, même à l'intérieur même des déclarations !

La balise

Il n'y a pas de balise dans les feuilles de style. Cela peut sembler évident, mais vous seriez surpris. La seule exception est le balisage des commentaires HTML, étant autorisé dans les éléments <style> pour des raisons historiques :

Voilà, et même cela n'est plus recommandé; les navigateurs Web en ayant besoin ont presque disparu.

En parlant de balisage, il est temps de faire un très léger détour pour parler des éléments que notre CSS servira à styliser, et de la façon dont ceux-ci peuvent être affectés par CSS de la manière la plus fondamentale.

Les éléments

Les éléments constituent la base de la structure d'un document. En HTML, les éléments les plus courants sont facilement reconnaissables, comme <p>, <table>, <span>, <a> et <article>. Chaque élément d'un document joue un rôle dans sa présentation.

Éléments remplacés et non remplacés

Bien que CSS dépende des éléments, tous les éléments ne sont pas créés égaux. Par exemple, les images et les paragraphes ne sont pas du même type d'élément. Dans CSS, les éléments prennent généralement deux formes : remplacés et non remplacés.

Éléments remplacés

Les éléments remplacés sont utilisés pour indiquer le contenu devant être remplacé par quelque chose n'étant pas directement représenté dans le document. L'exemple HTML le plus connu est probablement l'élément <img>, étant remplacé par un fichier image externe au document lui-même. En fait, <img> n'a pas de contenu réel, comme vous pouvez le voir dans cet exemple simple :

Ce fragment de balisage contient uniquement un nom d'élément et un attribut. L'élément ne présente rien à moins que vous ne le pointiez vers un contenu externe (dans ce cas, un fichier image dont l'emplacement est donné par l'attribut src). Si vous pointez vers un fichier image valide, l'image sera placée dans le document. Sinon, le navigateur n'affichera rien ou affichera un espace réservé «image brisée».

De même, l'élément d'entrée peut également être remplacé par un bouton radio, une case à cocher, une zone de saisie de texte ou autre, selon son type.

Éléments non remplacés

La majorité des éléments HTML sont des éléments non remplacés. Leur contenu est présenté par l'agent utilisateur (généralement un navigateur) dans une boîte générée par l'élément lui-même. Par exemple, <span>Salut</span> est un élément non remplacé et le texte «salut» sera affiché par l'agent utilisateur. Cela est vrai pour les paragraphes, les titres, les cellules de tableau, les listes et presque tout le reste en HTML.

Rôles d'affichage des éléments

Le CSS possède deux rôles d'affichage de base : le contexte de formatage de bloc et le contexte de formatage en ligne. Il existe de nombreux autres types d'affichage, mais ceux-ci sont les plus basiques et les types auxquels la plupart, sinon la totalité, des autres types d'affichage font référence. Les contextes de bloc et en ligne seront familiers aux auteurs qui ont passé du temps avec le balisage HTML et son affichage dans les navigateurs Web.

Éléments de niveau de bloc

Par défaut, les éléments de niveau de bloc génèrent une zone d'élément qui (par défaut) remplit la zone de contenu de son élément parent et ne peut pas avoir d'autres éléments à ses côtés. En d'autres termes, ils génèrent des «sauts» avant et après la zone d'élément. Les éléments de bloc les plus connus du HTML sont <p> et <div>. Les éléments remplacés peuvent être des éléments de niveau bloc, mais ce n'est généralement pas le cas.

En CSS, on parle d'élément générant un contexte de mise en forme de bloc. Cela signifie également que l'élément génère un type d'affichage externe de bloc. Les parties à l'intérieur de l'élément peuvent avoir des types d'affichage différents.

Éléments de niveau en ligne

Par défaut, les éléments de niveau en ligne génèrent une zone d'élément dans une ligne de texte et ne perturbent pas le flux de cette ligne. Le meilleur exemple d'élément en ligne est l'élément <a> en HTML. Les autres candidats sont <strong> et <em>. Ces éléments ne génèrent pas de «saut» avant ou après eux-mêmes, ils peuvent donc apparaître dans le contenu d'un autre élément sans perturber son affichage.

En CSS, on parle d'élément générant un contexte de mise en forme en ligne. Cela signifie également que l'élément génère un type d'affichage externe en ligne. Les parties à l'intérieur de l'élément peuvent avoir des types d'affichage différents. (En CSS, il n'y a aucune restriction sur la façon dont les rôles d'affichage peuvent être imbriqués les uns dans les autres.)

Rapprocher CSS et HTML

Nous avons mentionné que les documents HTML ont une structure inhérente, et c'est un point méritant d'être répété. En fait, c'est en partie le problème des anciennes pages Web : nous avons trop souvent oublié que les documents sont censés avoir une structure interne, étant tout à fait différente d'une structure visuelle. Dans notre hâte de créer les pages Web, nous avons tordu, déformé et généralement ignoré l'idée que les pages doivent contenir des informations ayant une signification structurelle.

Cette structure fait partie intégrante de la relation entre HTML et CSS; sans elle, il ne pourrait y avoir de relation du tout. Pour mieux la comprendre, examinons un exemple de document HTML et décomposons-le en plusieurs parties :

On obtiendra le résultat de ce balisage et les styles appliqués suivant :

Examinons maintenant les différentes manières dont ce document se connecte à CSS.

La balise <link>

Commençons par considérer l'utilisation de la balise <link> :

L'objectif principal de la balise <link> est de permettre aux auteurs HTML d'associer d'autres documents au document contenant la balise <link>. Le CSS l'utilise pour lier les feuilles de style au document.

Ces feuilles de style, ne faisant pas partie du document HTML mais sont néanmoins utilisées par celui-ci, sont appelées feuilles de style externes. En effet, ce sont des feuilles de style externes au document HTML.

Pour charger avec succès une feuille de style externe, <link> doit être placé à l'intérieur de l'élément <head>, bien qu'il puisse également apparaître à l'intérieur de l'élément <body>. Cela amènera le navigateur Web à localiser et à charger la feuille de style et à utiliser les styles qu'elle contient pour restituer le document HTML. Les importations doivent être placées au début de la feuille de style les contenant.

Et quel est le format d'une feuille de style externe ? Il s'agit d'une liste de règles, comme celles que vous avez vues dans la section précédente et dans l'exemple de document HTML; mais dans ce cas, les règles sont enregistrées dans leur propre fichier. N'oubliez pas qu'aucun HTML ni aucun autre langage de balisage ne peut être inclus dans la feuille de style, uniquement des règles de style. Voici le contenu d'une feuille de style externe :

C'est tout ce qu'il y a à faire : pas de balise HTML ni de commentaires, juste des déclarations de style simples et claires. Celles-ci sont enregistrées dans un fichier texte brut et portent généralement une extension .css, comme dans sheet1.css.

Avertissement : Une feuille de style externe ne peut contenir aucun balise de document, uniquement des règles CSS et des commentaires CSS. La présence de balisage dans une feuille de style externe peut entraîner l'ignorance de tout ou partie de celui-ci.

Attributs

Pour le reste de la balise <link>, les attributs et les valeurs sont assez simples. L'attribut rel signifie relation, et dans ce cas, la relation est la feuille de style. Notez que l'attribut rel est obligatoire. CSS a un attribut type facultatif dont la valeur par défaut est text/css, vous pouvez donc inclure type="text/css" ou l'omettre, selon votre préférence.

Ces valeurs d'attribut décrivent la relation et le type de données étant chargées à l'aide de la balise <link>. De cette façon, le navigateur Web sait que la feuille de style est une feuille de style CSS, un fait qui déterminera la manière dont le navigateur traitera les données qu'il importe. (D'autres langages de style peuvent être utilisés à l'avenir. Dans un tel avenir, si vous utilisez un langage de style différent, l'attribut type devra être déclaré.)

Ensuite, nous trouvons l'attribut href. La valeur de cet attribut est l'URL de votre feuille de style. Cette URL peut être absolue ou relative, c'est-à-dire relative à l'URL du document contenant l'URL, ou bien une URL complète pointant vers un emplacement unique sur le Web. Dans notre exemple, l'URL est relative. Il aurait pu s'agir d'une URL absolue, comme http://localhost/sheet1.css.

Enfin, nous avons un attribut media. La valeur de cet attribut est un ou plusieurs descripteurs de média, étant des règles concernant les types de média et les caractéristiques de ces médias, chaque règle étant séparée par une virgule. Ainsi, par exemple, vous pouvez utiliser une feuille de style liée à la fois dans les médias d'écran et d'impression :

La valeur par défaut est all, ce qui signifie que le CSS sera appliqué à tous les médias.

Notez que plusieurs feuilles de style liées peuvent être associées à un document. Dans ces cas, seules les balises <link> avec un rel de stylesheet seront utilisées dans l'affichage initial du document. Ainsi, si vous souhaitez lier deux feuilles de style nommées premier.css et deuxieme.css, cela ressemblera à ceci :

Cela obligera le navigateur à charger les deux feuilles de style, à combiner les règles de chacune et à les appliquer toutes au document dans tous les types de médias (car l'attribut media est omis, sa valeur par défaut all est utilisée). Par exemple :

L'attribut ne figurant pas dans cet exemple de balise, mais pouvant l'être, est le titre. Cet attribut n'est pas souvent utilisé, mais il pourrait devenir important à l'avenir et, s'il est utilisé de manière incorrecte, il peut avoir des effets inattendus.

Feuilles de style alternatives

Il est possible de définir des feuilles de style alternatives que les utilisateurs peuvent sélectionner dans certains navigateurs. Celles-ci sont définies en définissant la valeur de l'attribut rel comme feuille de style alternative, et elles ne sont utilisées dans la présentation du document que si elles sont sélectionnées par l'utilisateur.

Si un navigateur peut utiliser des feuilles de style alternatives, il utilisera les valeurs des attributs title de l'élément <link> pour générer une liste d'alternatives de style. Vous pouvez donc écrire ce qui suit :

Les utilisateurs pouvaient alors choisir le style qu'ils souhaitaient utiliser, et le navigateur passait du premier style, appelé Default dans ce cas, à celui choisi par l'utilisateur. L'image suivante montre une façon dont ce mécanisme de sélection pouvait être réalisé (et c'était d'ailleurs le cas au début de la renaissance des CSS) :

Il est également possible de regrouper des feuilles de style alternatives en leur attribuant la même valeur de titre. Ainsi, vous permettez à l'utilisateur de choisir une présentation différente pour votre site sur écran et sur support papier :

Si un utilisateur sélectionne Gros texte à partir du mécanisme de sélection de feuille de style alternative dans un agent utilisateur conforme, grostexte.css sera utilisé pour styliser le document sur l'écran et print.css sera utilisé sur le support d'impression. Ni sheet1.css ni print.css ne seront utilisés sur aucun support.

Pourquoi ? Parce que si vous donnez un titre à un <link> avec un rel de stylesheet, vous désignez cette feuille de style comme feuille de style préférée. Son utilisation est préférée aux feuilles de style alternatives et elle sera utilisée lors du premier affichage du document. Cependant, une fois que vous avez sélectionné une feuille de style alternative, la feuille de style préférée ne sera pas utilisée.

De plus, si vous désignez un certain nombre de feuilles de style comme préférées, toutes sauf une seront ignorées. Considérez l'exemple de code suivant :

Les trois éléments <link> font désormais référence à des feuilles de style préférées, grâce à la présence d'un attribut title sur les trois, mais un seul d'entre eux sera réellement utilisé de cette manière. Les deux autres seront complètement ignorés. Lesquels ? Il n'y a aucun moyen d'en être sûr, car HTML ne fournit pas de méthode permettant de déterminer quelles feuilles de style préférées doivent être ignorées et lesquelles doivent être utilisées.

Si vous ne donnez pas de titre à une feuille de style, elle devient une feuille de style persistante et est toujours utilisée dans l'affichage du document. Souvent, c'est exactement ce que souhaite un auteur, d'autant plus que les feuilles de style alternatives ne sont pas largement prises en charge et sont presque totalement inconnues des utilisateurs.

L'élément <style>

L'élément <style> est une façon d'inclure une feuille de style et il apparaît dans le document lui-même :

Les styles entre les balises d'ouverture et de fermeture <style> sont appelés feuille de style du document ou feuille de style intégrée (car ce type de feuille de style est intégré au document). Elle contient des styles qui s'appliquent au document, mais elle peut également contenir plusieurs liens vers des feuilles de style externes via la directive @import, abordée dans la section suivante.

Vous pouvez attribuer aux éléments <style> un attribut media, fonctionnant de la même manière que sur les feuilles de style liées. Cela, par exemple, limitera les règles d'une feuille de style intégrée à l'application uniquement aux supports imprimés :

Vous pouvez également étiqueter une feuille de style incorporée avec un élément <title>, de la même manière et pour les mêmes raisons que celles évoquées dans la section précédente sur les feuilles de style alternatives.

Comme pour l'élément <link>, l'élément <style> peut utiliser l'attribut type; dans le cas d'un document CSS, la valeur correcte est «text/css». L'attribut type est facultatif en HTML tant que vous chargez du CSS, car la valeur par défaut de l'attribut type sur l'élément <style> est text/css. Il serait nécessaire de déclarer explicitement une valeur de type uniquement si vous utilisiez un autre langage de style, peut-être dans un futur où une telle chose serait prise en charge. Pour le moment, cependant, l'attribut reste entièrement facultatif.

La directive @import

Nous allons maintenant discuter des éléments se trouvant à l'intérieur de la balise <style>. Tout d'abord, nous avons quelque chose de très similaire à <link>, la directive @import :

Tout comme <link>, @import peut être utilisé pour demander au navigateur Web de charger une feuille de style externe et d'utiliser ses styles dans le rendu du document HTML. La seule différence majeure réside dans la syntaxe et le placement de la commande. Comme vous pouvez le voir, @import se trouve à l'intérieur de l'élément <style>. Il doit être placé en premier, avant les autres règles CSS, sinon il ne fonctionnera pas du tout. Considérez cet exemple :

Comme avec <link>, un document peut avoir plusieurs instructions @import. Cependant, contrairement à <link>, les feuilles de style de chaque directive @import seront chargées et utilisées; il n'existe aucun moyen de désigner des feuilles de style alternatives avec @import. Ainsi, étant donné la balise suivant :

... les trois feuilles de style externes seront chargées et toutes leurs règles de style seront utilisées dans l'affichage du document.

Comme avec <link>, vous pouvez restreindre les feuilles de style importées à un ou plusieurs médias en fournissant des descripteurs de médias après l'URL de la feuille de style :

Comme indiqué dans «La balise <link&tt;», les descripteurs de médias peuvent être assez compliqués. La directive @import peut être très utile si vous avez une feuille de style externe devant utiliser les styles trouvés dans d'autres feuilles de style externes. Étant donné que les feuilles de style externes ne peuvent contenir aucun balisage de document, l'élément <link> ne peut pas être utilisé, mais @import le peut. Par conséquent, vous pouvez avoir une feuille de style externe qui contient les éléments suivants :

Bon, peut-être pas exactement ces styles, mais j'espère que vous avez compris l'idée. Notez l'utilisation d'URL absolues et relatives dans l'exemple précédent. Les deux formes d'URL peuvent être utilisées, tout comme avec <link>.

Notez également que les directives @import apparaissent au début de la feuille de style, comme dans l'exemple de document. Comme nous l'avons dit précédemment, CSS exige que les directives @import soient placées avant toutes les règles d'une feuille de style, bien qu'elles puissent être précédées de déclarations @charset et @layer. Une directive @import qui vient après d'autres règles (par exemple, body {color: red;}) sera ignorée par les agents utilisateurs conformes.

Avertissement : certaines versions d'Internet Explorer pour Windows n'ignorent aucune directive @import, même celles venant après d'autres règles, mais tous les navigateurs Web modernes ignorent les directives @import mal placées.

Un autre descripteur pouvant être ajouté à une directive @import est un identifiant de couche en cascade. Cela affecte tous les styles de la feuille de style importée à une couche en cascade. Cela ressemble à ceci :

Cela affecte les styles de basic-text.css à la couche cascade de base. Si vous souhaitez affecter les styles à une couche sans nom, utilisez la couche sans la dénomination entre parenthèses, comme suit :

Notez que cette capacité est une différence entre @import et <link>, car ce dernier ne peut pas être étiqueté avec une couche en cascade.

Liaison HTTP

Une autre façon, beaucoup plus obscure, d'associer du CSS à un document consiste à lier les deux via des entêtes HTTP.

Sous Apache HTTP Server, cela peut être accompli en ajoutant une référence au fichier CSS dans un fichier .htaccess. Par exemple :

Cela obligera les navigateurs compatibles à associer la feuille de style référencée à tous les documents servis à partir de ce fichier .htaccess. Le navigateur Web la traitera alors comme s'il s'agissait d'une feuille de style liée. Alternativement, et probablement plus efficacement, vous pouvez ajouter une règle équivalente au fichier httpd.conf du serveur :

L'effet est exactement le même dans les navigateurs compatibles. La seule différence réside dans l'endroit où vous déclarez la liaison.

Vous avez probablement remarqué l'utilisation du terme «navigateurs Web compatibles». Fin 2022, les navigateurs les plus utilisés prenant en charge la liaison HTTP des feuilles de style sont la famille Firefox et Opera. Cela limite cette technique principalement aux environnements de développement basés sur l'un de ces navigateurs. Dans une telle situation, vous pouvez utiliser la liaison HTTP sur le serveur de test pour marquer quand vous êtes sur le site de développement par opposition au site public. C'est également un moyen intéressant de masquer les styles des navigateurs Web Chromium, à condition que vous ayez une raison de le faire.

Remarque : Des équivalents à cette technique de liaison sont utilisés dans les langages de script courants tels que PHP et IIS, permettant tous deux à l'auteur d'émettre des entêtes HTTP. Il est également possible d'utiliser ces langages pour écrire explicitement des éléments de lien dans le document en fonction du serveur proposant le document. Il s'agit d'une approche plus robuste en termes de prise en charge du navigateur : chaque navigateur prend en charge l'élément de lien.

Styles en ligne

Si vous souhaitez simplement attribuer quelques styles à un élément individuel, sans avoir recours à des feuilles de style intégrées ou externes, vous pouvez utiliser l'attribut HTML style :

L'attribut style peut être associé à n'importe quelle balise HTML, même à des balises situées en dehors de <body> (<head> ou <title>, par exemple).

La syntaxe d'un attribut style est assez ordinaire. En fait, elle ressemble beaucoup aux déclarations trouvées dans le conteneur <style>, sauf qu'ici les accolades sont remplacées par des guillemets doubles. Ainsi, <p style="color: cyan; background: blue;"> définira la couleur du texte comme cyan et l'arrière-plan comme bleu pour ce paragraphe uniquement. Aucune autre partie du document ne sera affectée par cette déclaration.

Notez que vous ne pouvez placer qu'un bloc de déclaration, et non une feuille de style entière, à l'intérieur d'un attribut style en ligne. Par conséquent, vous ne pouvez pas placer un @import dans un attribut style, ni inclure des règles complètes. La seule chose que vous pouvez mettre dans la valeur d'un attribut style est ce qui pourrait se trouver entre les accolades d'une règle.

L'utilisation de l'attribut style est déconseillée. La plupart des principaux avantages des CSS (la possibilité d'organiser des styles centralisés contrôlant l'apparence d'un document entier ou l'apparence de tous les documents sur un serveur Web) sont annulés lorsque vous placez des styles dans un attribut de style. À bien des égards, les styles en ligne ne sont pas beaucoup plus performants que l'ancienne balise <font>, même s'ils offrent beaucoup plus de flexibilité en termes d'effets visuels qu'ils peuvent appliquer.