Доступность
Утилиты для включения и исключения принудительных цветов.
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>
Подробнее об использовании вариантов читайте в документации по вариантам.