Alternative style sheets
alternate stylesheet キーワードペアは、 <link> 要素の rel 属性の値として使用されると、ターゲットリソースが代替スタイルシートであることを示します。ウェブページに代替スタイルシートを指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。
メモ: この機能は、ブラウザーの拡張機能なしではあまり対応していません。ユーザーの既存の環境設定に合わせて別の表示を提供するには、 CSS のメディア特性である prefers-color-scheme および prefers-contrast を参照してください。
Firefox では、 title 属性の値を表示している［表示］ > ［ページスタイル］のサブメニューを使用して、ユーザーに代替スタイルシートを選択させることができます。それ以外のブラウザーでは、この機能を有効にするために拡張機能が必要です。また、ウェブページでユーザーがスタイルを切り替えることができるように、独自のユーザーインターフェイスを提供することもできます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | | 3 | | 18 | | |
注釈 1件
削除済み
- このバージョンで機能が削除されました (48)
注釈 1件
削除済み
- このバージョンで機能が削除されました (48)
基本構文
HTML
<link rel="stylesheet" href="default.css" title="デフォルト">
<link rel="alternate stylesheet" href="dark.css" title="ダーク">
<link rel="alternate stylesheet" href="large.css" title="大きい文字">ライブデモ
Why it is rare
Explain why alternate stylesheets exist but are less common than application-level theme toggles.
プレビュー全画面表示
Use it carefully
Reserve alternate stylesheets for documents that genuinely need named style variants.
プレビュー全画面表示
実務での使いどころ
-
Alternative style sheets の活用
alternate stylesheet キーワードペアは、 <link> 要素の rel 属性の値として使用されると、ターゲットリソースが代替スタイルシートであることを示します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。