link要素にtitle属性を付けてスタイルシートを読み込ませるとこれは優先スタイルシートと呼ばれるスタイルシートになります。 この件について問題があるサイトが報告されていますので、この辺の仕様と注意点について紹介しておきましょう。
link要素から取り込まれるスタイルシートは三種類に分類されます。 まずはこれら三種類について簡単に解説しておきましょう。
固定スタイルシートとは文字通り、固定的に読ませるスタイルシートの指定方法です。 これによって指定されているスタイルは、以下で説明する優先スタイルシートや、代替スタイルシートと同時に適用されます。
固定スタイルシートはtitle属性を付けずにlink要素を記述します。
<link rel="stylesheet" href="foobar.css" type="text/css">
優先スタイルシートも文字通りの意味を持ちます。 これは優先的に読み込ませるスタイルシートの指定方法です。
優先スタイルシートはtitle属性を付けてその名前でグループ化します。
<link rel="stylesheet" href="foobar.css" type="text/css" title="グループ1">
優先スタイルシートを理解するにはいくつかの例を見てもらうのが一番良いでしょう。
<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" title="グループ1">
この例ではまず、固定スタイルシートのfoo.cssが読み込まれます。 そして、二番目に出現するbar.cssが優先スタイルシートとして読み込まれます。
つまり、単純に二つのスタイルシートが読み込まれることになります。
<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" title="グループ1">
<link rel="stylesheet" href="hge.css" type="text/css" title="グループ2">
この例ではまず、最初の例と同様に固定スタイルシートのfoo.cssと、 二番目の優先スタイルシートのbar.cssが読み込まれます。
しかし、この時点で初期に読み込まれる優先スタイルシートのグループはそのtitle属性値であるグループ1に決定されます。
次に出現するlink要素は優先スタイルシートではありますが、別の名前(グループ2)を付けられていますので、グループが異なります。
そのため、この例では三番目のhge.cssは読み込まれません。
代替スタイルシートとは標準では読み込まれない、 訪問者が選択可能なスタイルシートの指定方法です。
代替スタイルシートを読み込むにはrel要素をalternate stylesheetとし、
title属性で優先スタイルシートと同じように名前を付けてグループ化します。
<link rel="alternate stylesheet" href="foobar.css" type="text/css" title="グループ1">
<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="alternate stylesheet" href="bar.css" type="text/css" title="グループ1">
この例ではまず、固定スタイルシートのfoo.cssのみが読み込まれます。 代替スタイルシートは訪問者がブラウザで任意に選択するまで読み込まれません。
訪問者がWebブラウザで代替スタイルシートのグループ1を選択した場合、
固定スタイルシートのfoo.cssと代替スタイルシートのbar.cssの両方が読み込まれます。
<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" title="グループ1">
<link rel="stylesheet" href="hge.css" type="text/css" title="グループ2">
<link rel="alternate stylesheet" href="alt.css" type="text/css" title="グループ2">
この例ではまず、固定スタイルシートのfoo.cssと優先スタイルシートで最初に出現するグループであるグループ1のbar.cssが読み込まれます。
最初のグループとは異なる優先スタイルシートのhge.cssと代替スタイルシートのalt.cssは読み込まれません。
訪問者がWebブラウザで代替スタイルシートのグループ2が選択されると、
固定スタイルシートのfoo.cssと、選択された代替スタイルシートと同じグループの優先スタイルシート、hge.css、
そして代替スタイルシートのalt.cssが読み込まれます。
そしてそれまで読み込まれていたグループ1の優先スタイルシート、bar.cssは無効になります。
上記のように優先スタイルシートは最初に出現したグループのもののみを読み込むのが正しい仕様です。
しかし、Windows版Internet ExplorerやOpera7では優先スタイルシートを全て読み込んでしまいます。 そのため、仕様に通りに動作するMozillaでは意図していたスタイルシートが読み込まれていない、 ということが起こる可能性があります。
ここで紹介してきたlink要素のグループ化はHTMLの仕様書にて明言されている仕様です。 title属性がグループ化を促すという仕様ではないことに注意してください。 あくまで、link要素はそのtitle属性によってグループ化されるという仕様なのです。
しかしMozillaではstyle要素でもtitle属性によるグループ化を行ってしまいます。 これはわざわざこういった動作に変更したようで、バグとは考えられていないようです。
その理由はHTML仕様書の 14.3 は外部スタイルシートの仕様を記述したものであり、 14.3.2で優先スタイルシートや代替スタイルシートの仕様を決めているものではなく、 link要素についての例を示しているだけであり、style要素の場合のグループ化を禁止しているわけではないという理屈です。
これらの意見を主張しているのがW3Cの仕様策定メンバー(David Baron)なので、 仕様書の説明不足であってMozillaの動作が正しいと言っても良いのかもしれません。
しかし、現実的にMozillaとそれ以外のWebブラウザとで実装に差が出てしまっていますので、 Webサイトの作者はこのことに注意を払わなくてはいけません。
Copyright © Web Standardization Project. All Rights Reserved.