固定・優先・代替のスタイルシート

link要素に以下の設定を行うと、スタイルシートを「固定スタイルシート」、「優先スタイルシート」、「代替スタイルシート」に分類することができます。

この設定を行うことで、対応しているブラウザでは「優先」と「代替」のスタイルシートを切り替えられるようになります。（使用するスタイルを選択できるようになります）

title属性に関する詳細は、「要素に補足情報を付ける」をご覧ください。

【3タイプのスタイルシート】

以下の方法で、スタイルシートを3つのタイプに分類することができます。

■固定スタイルシート

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

rel属性の値を「stylesheet」にし、かつtitle属性を指定しないようにします。（通常の指定方法です）

このタイプのスタイルシートは、常に適用されることになります。

■優先スタイルシート

<link rel="stylesheet" type="text/css" href="basic.css" title="優先スタイル">

rel属性の値を「stylesheet」にし、かつtitle属性でスタイル名を指定します。

このタイプのスタイルシートは、「固定スタイルシート」と共に優先的に適用されることになります。

■代替スタイルシート

<link rel="alternate stylesheet" type="text/css" href="alt.css" title="代替スタイル">

rel属性の値を「alternate stylesheet」にし、かつtitle属性でスタイル名を指定します。

このタイプのスタイルシートは、通常は適用されません。ブラウザの操作で切り替えた場合に、「優先スタイルシート」の代わりとしてこのスタイルシートが適用されることになります。

【スタイルシートのグループ化】

同じスタイル名を持たせることによって、複数のスタイルシートをグループ化することができます。

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

<link rel="stylesheet" type="text/css" href="basic1.css" title="優先スタイル">
<link rel="stylesheet" type="text/css" href="basic2.css" title="優先スタイル">

<link rel="alternate stylesheet" type="text/css" href="alt1.css" title="代替スタイル">
<link rel="alternate stylesheet" type="text/css" href="alt2.css" title="代替スタイル">

例えば上記の場合は、「優先スタイル」というスタイル名によって basic1.css と basic2.css を、「代替スタイル」というスタイル名によって alt1.css と alt2.css をグループ化しています。

※グループ単位でスタイルが適用されることになります。

【スタイルシートの切り替え方法】

スタイルシートの切り替えは、IE 8以上、Firefox、Operaなどで対応しています。（IE 7以下では対応していません）

例えばFirefoxでは、「表示 → スタイルシート」の操作でスタイルシートを切り替えることができます。

title属性の値が、メニューに表示されることになります。