アクセシビリティ
forced-color-adjust
強制カラーの有効/無効を切り替えるためのユーティリティ。
| クラス | スタイル |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
例
強制カラーを無効にする
forced-color-adjust-noneユーティリティを使用すると、要素を強制カラーモードで適用される色から除外できます。これは、限られたカラーパレットを適用するとユーザビリティが低下する状況で役立ちます。
開発者ツールで`forced-colors: active`をエミュレートして、変更を確認してみてください
ベーシックTシャツ
$35
<form> <img src="/img/shirt.jpg" /> <div> <h3>Basic Tee</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">Choose a color</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">White</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>ユーザーが強制カラーモードを有効にしている場合、強制カラーバリアントを使用して、条件付きでスタイルを追加することもできます。
強制カラーを復元する
forced-color-adjust-autoユーティリティを使用すると、要素を強制カラーモードで適用される色に準拠させることができます。
<form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>Choose a color:</legend> <select class="hidden lg:block"> <option value="White">White</option> <option value="Gray">Gray</option> <option value="Black">Black</option> </select> <div class="lg:hidden"> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>これは、たとえば、より大きな画面サイズでforced-color-adjust-noneユーティリティを元に戻したい場合に役立ちます。
レスポンシブデザイン
プレフィックスa forced-color-adjustユーティリティ でブレークポイントバリアントを使用するとmd:、ユーティリティを適用できるのはミディアム 以上の画面サイズ
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>バリアントのドキュメントで、バリアントの使用方法について詳しく学んでください。