代替スタイルシート関連の情報をいくつか見たのですが、私にとっては理解しにくい説明のサイトが多かったです。ので、私自身が理解しやすい形の説明を記述しておきます。
スタイルシートファイルの読込は通常、link要素に以下のように記述します(よね)。
<link rel="stylesheet" type="text/css" href="…">
これは厳密には「固定スタイルシート」になります。一般的なスタイルシートであり必ず読み込まれます。
…実は「固定スタイルシート」以外に「必ず読み込まれるわけではないスタイルシート」を設定する方法も用意されています。それが「優先スタイルシート」と「代替スタイルシート」です。この2つはともに、固定スタイルシートとは別に、ユーザが選択的に読み込むことが可能なスタイルシートです。
「優先スタイルシート」と「代替スタイルシート」はブラウザのメニューから、選択式のリストとして表示されます。本サイトでは2つをあわせたものを「選択式スタイルシート」という独自の名称を用います。「選択式スタイルシート」のうち、デフォルトで選択されるものが「優先スタイルシート」です。
「選択式スタイルシート」はlinkタグに、任意の名前のtitle属性をつけることによりスタイルをグループ化することが出来ます。これを本サイトでは独自に「スタイルグループ」と呼びます。「スタイルグループ」の名称が、ブラウザのメニューの選択式のリストに表示されます。
「選択式スタイルシート」は文字サイズを変更したり背景色を変更したりするときに有効でしょう。ただこの機能は、IE8以降・FireFox3以降など比較的新しいブラウザでないと対応していません。
「選択式スタイルシート」を使用する場合、「優先スタイルシート」だけでも「代替スタイルシート」だけでも、両方用意してもかまいません。ただし「優先スタイルシート」は0か1つのみにすべきでしょう。万が一、優先的に読み込むとされるスタイルグループが複数あった場合には、どれを読んでいいか分からなくなります。また、優先的に読み込まれなかった「優先スタイルシート」は実質的には「代替スタイルシート」になるというわけのわからない状態になります。
| title |
rel |
種類 |
備考 |
| なし |
stylesheet |
固定スタイルシート |
一般的なスタイルシート。必ず読み込まれる。 |
| あり |
stylesheet |
優先スタイルシート |
「選択式スタイルシート」のデフォルト。なくてもいい。 |
| あり |
alternate stylesheet |
代替スタイルシート |
「選択式スタイルシート」の優先スタイルシート以外の候補。 |
簡易まとめ
- スタイルシートには固定スタイルシートと「選択式スタイルシート」(本サイトでの独自の言葉)がある
- titleをつけると「選択式スタイルシート」になる
- 同じtitleのスタイルはグループ化される
- 「選択式スタイルシート」には「優先スタイルシート」と「代替スタイルシート」の2つがある
具体例
具体例をいくつか挙げておきます
例1
<link title="A" rel="stylesheet" type="text/css" href="…"><!-- (1) -->
<link title="B" rel="alternate stylesheet" type="text/css" href="…"><!-- (2) -->
<link title="B" rel="alternate stylesheet" type="text/css" href="…"><!-- (3) -->
<link title="C" rel="alternate stylesheet" type="text/css" href="…"><!-- (4) -->
この場合には、(1)が優先スタイルシートとなりデフォルトで(1)だけを読み込みます。(2)(3)(4)は代替スタイルシートになります。
例2
<link title="A" rel="alternate stylesheet" type="text/css" href="…"><!-- (1) -->
<link title="B" rel="alternate stylesheet" type="text/css" href="…"><!-- (2) -->
<link title="B" rel="alternate stylesheet" type="text/css" href="…"><!-- (3) -->
<link title="C" rel="alternate stylesheet" type="text/css" href="…"><!-- (4) -->
この場合には、すべてが代替スタイルシートであり、デフォルトでは何も読み込みません。
例3
<link title="A" rel="stylesheet" type="text/css" href="…"><!-- (1) -->
<link title="B" rel="stylesheet" type="text/css" href="…"><!-- (2) -->
<link title="B" rel="stylesheet" type="text/css" href="…"><!-- (3) -->
<link title="C" rel="stylesheet" type="text/css" href="…"><!-- (4) -->
この場合はすべてが優先スタイルシートであるはずです、一応。しかし、他に優先して読み込まれるものが複数あるという矛盾した状態であるといえます。この場合にはブラウザによって異なる挙動を示します。FireFox3.6ではAを、IE8ではBを読みます(IEはバグかもしれません)。混乱の元になるので、複数のスタイルグループを優先スタイルシートに設定することは避けるべきでしょう。
例4
<link title="A" rel="alternate stylesheet" type="text/css" href="…"><!-- (1) -->
<link title="B" rel="stylesheet" type="text/css" href="…"><!-- (2) -->
<link title="B" rel="alternate stylesheet" type="text/css" href="…"><!-- (3) -->
<link title="C" rel="alternate stylesheet" type="text/css" href="…"><!-- (4) -->
この場合は、(1)(4)が代替スタイルシートです。そしてスタイルグループBのうち(2)だけが優先スタイルシートで(3)は代替スタイルシートとなります…。ではスタイルグループのBは優先スタイルシートなのか代替スタイルシートなのかというと…正しいことはよくわかりません。
ブラウザの挙動から結果論を述べますと、FireFox3.6では(2)(3)を、IE8では(2)のみを読み込みます。※このケースではIEのほうが正しいような気もします…。なんにせよ混乱の元になるので、同一のtitleをつける要素のrel属性は統一するべきでしょう。
参考
代替スタイルシートの説明ページ。サンプルもあり理解しやすい。
2011/05/23
