代替スタイルシート

代替スタイルシートはふつう、次のように <link> 要素に rel="alternate stylesheet" およびび title="..." 属性を使用することで指定されます。

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

<link
  href="default.css"
  rel="stylesheet"
  type="text/css"
  title="既定のスタイル" />
<link
  href="fancy.css"
  rel="alternate stylesheet"
  type="text/css"
  title="ファンシー" />
<link
  href="basic.css"
  rel="alternate stylesheet"
  type="text/css"
  title="基本" />

この例では、スタイルシートのサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。

どのスタイルが選択されても、 reset.css の規則が常に適用されます。

ここをクリックすると、やってみることができる例を見ることができます。

文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。

• 常設 (rel="alternate" も title="" もないもの): 常に文書に適用されます。
• 推奨 (rel="alternate" がなく、 title="..." があるもの): 既定で適用されますが、代替スタイルシートが選択されると無効化されます。推奨スタイルシートは一つしか存在できませんので、異なる title 属性を持つスタイルシートを複数指定すると、いくつかが無視されます。より詳細な説明は外部スタイルシートにおける正しいタイトルの使用をご覧ください。
• 代替 (rel="alternate stylesheet" および title="..." の指定が必要): 既定では無効で、選択することができます。

<link rel="stylesheet"> 又は <style> 要素で、スタイルシートが title 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 title 属性を付けずにリンクされたスタイルシートは常に適用されます。

標準スタイルシートへリンクするには rel="stylesheet" を、代替スタイルシートへリンクするには rel="alternate stylesheet" を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。