1. 可访问性
  2. forced-color-adjust

可访问性

forced-color-adjust

用于选择强制颜色的工具。

样式
forced-color-adjust-auto
forced-color-adjust: auto;
forced-color-adjust-none
forced-color-adjust: none;

示例(Examples)

¥Examples

选择退出强制颜色(Opting out of forced colors)

¥Opting out of forced colors

使用 forced-color-adjust-none 工具选择元素退出强制颜色模式强制执行的颜色。这在强制使用有限的调色板会降低可用性的情况下非常有用。

¥Use the forced-color-adjust-none utility to opt an element out of the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.

尝试在你的开发者工具中模拟 `forced-colors: active` 以查看更改

Two each of gray, white, and black shirts laying flat.

Basic Tee

$35

Choose a color
<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>

当用户启用强制颜色模式时,你还可以使用 强制颜色变体 有条件地添加样式。

¥You can also use the forced colors variant to conditionally add styles when the user has enabled a forced color mode.

恢复强制颜色(Restoring forced colors)

¥Restoring forced colors

使用 forced-color-adjust-auto 工具使元素遵循强制颜色模式强制的颜色:

¥Use the forced-color-adjust-auto utility to make an element adhere to colors enforced by forced colors mode:

<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 工具,例如在更大的屏幕尺寸上,这会很有用。

¥This can be useful if you want to undo the forced-color-adjust-none utility, for example on a larger screen size.

响应式设计(Responsive design)

¥Responsive design

forced-color-adjust 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

<div class="forced-color-adjust-none md:forced-color-adjust-auto ...">
<!-- ... -->
</div>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号