Plusieurs CSS sur une seule page

Publié dans HTML et CSS | Marqué avec , , ,
Share

J’ai découvert aujourd’hui comment appliquer plusieurs feuilles de styles sur une seule et même page. J’avais essayé plusieurs fois sans réel succès, pourtant cela peut être très pratique pour séparer son code.

Un fichier CSS sur une page

<link rel="stylesheet" type="text/css" href="fichier.css" />

Pour proposer des designs alternatifs, on emploie le mot clef alternate.

<link rel="alternate stylesheet" type="text/css" title="Titre du design" href="fichier1.css" /> <link rel="alternate stylesheet" type="text/css" title="Autre titre du design" href="fichier2.css" />

C’est le premier qui sera utilisé par défaut.

Plusieurs fichiers CSS sur une page

<link rel="stylesheet" type="text/css" href="fichier1.css" />
<link rel="stylesheet" type="text/css" href="fichier2.css" />

Mais en utilisant les titres, on peut aller plus loin. L’exemple suivant utilisera les designs ayant pour titre « compact » et le design persistant (sans titre) commun.css. Mais l’utilisateur peut sélectionner les designs « beautiful », ce qui appellera aussi le design persistant.

<link rel="alternate stylesheet" type="text/css" title="compact" href="fichier1.css" />
<link rel="alternate stylesheet" type="text/css" title="compact" href="fichier2.css" />
<link rel="alternate stylesheet" type="text/css" title="beautiful" href="fichier3.css" />
<link rel="alternate stylesheet" type="text/css" title="beautiful" href="fichier4.css" />
<link rel="stylesheet" type="text/css" href="commun.css" />

Pour aller plus loin

On peut noter qu’il est possible d’utiliser une balise méta ou un header pour préciser le ou les fichiers CSS à afficher par défaut :

<meta http-equiv="Default-Style" content="compact" />
<?php
header(Default-Style: "compact");

Merci le W3C sur Lagrange !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*