#yyds干货盘点#强调色

Posted 2021-12-10 liuhao951866

​​accent-color​​CSS 中的属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的重音颜色。

.element {
  accent-color: #f8a100;
}

​​accent-color​​​在​​CSS Basic User Interface Module Level 4 中定义​​，目前处于工作草案中。这意味着细节仍在进行中，从现在到规范成为正式建议之间可能会发生变化。

句法

accent-color: auto | <color>;

• 初始值：自动
• 适用于：所有元素
• 继承：是
• 计算值：关键字​​auto​​或计算出的颜色
• 动画类型：按计算值类型

价值观

/* Keyword */
accent-color: auto;

/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);

/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;

最后，一种“简单”的方式来设计表单！

传统上，造型形式是……好吧，太糟糕了。只需​​自定义<progress>元素​​即可了解设置控件样式的难度。这通常会导致在接受浏览器的默认样式或从头开始重置和重新创建它们之间做出决定。

以下是获得自定义​​<progress>​​颜色通常需要的条件：

​​accent-color​​ 允许我们只用一行 CSS 来更改表单控件中使用的颜色：

它适用于特定的表单控件

在开始为所有内容添加强调色之前，值得注意的是四个特定的表单控件支持该​​accent-color​​属性：

• 复选框 ( ​​<input type="checkbox">​​)
• 单选按钮 ( ​​<input type="radio">​​)
• 范围 ( ​​<input type="range">​​)
• 进度 ( ​​<progress>​​)

它适用于首选的配色方案

该​​accent-color​​​属性尊重配色方案。如果用户在他们的操作系统设置中将他们的首选配色方案设置为浅色，那么浏览器必须评估该​​accent-color​​值并为其确定合适的 UI 颜色。通过这种方式，我们可以确保浏览器的 UI 和口音之间具有可访问的颜色对比。没有与浅色窗体控件 UI 相对的浅色强调色。

每个浏览器都有自己的方法来计算要使用的颜色。​​Glitch 上的这个演示​​​展示了一系列带有各种强调色的复选框控件。在​​支持​​​ ​​accent-color​​查看浏览器如何将 UI 颜色与不同的强调色配对的浏览器中查看它。

Chrome 的颜色算法（左）与 Firefox 相比（图片来源：​​web.dev​​）

而且，如果我们有一个我们喜欢的强调色，但它不能与浏览器选择的 UI 颜色一起使用，我们可以使用该​​color-scheme​​属性来覆盖它。

Buuuuuut，你可能不想质疑浏览器的选择，即使它最终在浏览器之间有点不一致。这有很多事情要处理，而且您可能对 UI 的可访问性造成的伤害大于好处。

浏览器不会​​像在其他情况下有时那样​​​覆盖​​accent-color​​暗模式。

其他表单控件需要不同的方法

同样，目前只有少数表单控件支持强调色。这意味着我们仍然需要求助于传统的方法来设计其他类型的表单控件。但是，嘿，亚当·阿盖尔 (Adam Argyle) 和乔伊·阿尔哈 (Joey Arhar) 为您提供了一个​​不错的片段​​，它有助于为其他表单控件以及列表标记、选择和可见焦点带来强调色：

html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}