Доступность
forced-color-adjust
Утилиты для включения и исключения принудительных цветов.
| Class | Styles |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
Примеры
Исключение принудительных цветов
Используйте утилиту forced-color-adjust-none для исключения элемента из цветов, навязываемых режимом принудительных цветов. Это полезно в ситуациях, когда навязывание ограниченной цветовой палитры ухудшит удобство использования.
Попробуйте эмулировать `forced-colors: active` в инструментах разработчика, чтобы увидеть изменения
Basic Tee
$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:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.