accent-color
accent-color 是 CSS 2022 年推出的一个新属性；
总所周知，CSS 属性不要太花里胡哨，而兼容性是我们给予关注的基础；
accent-color 相比于其它新属性，它有不错的兼容性；
那，到底，它是干嘛吃的？
说白了，就是标题中的一句话，它能修改 input 默认控件的颜色。
目前支持下面这些 input 控件元素：
- 复选框
<input type=”checkbox”>
- 单选框
<input type=”radio”>
- 范围选择框
<input type=”range”>
- 进度条
<progress>
在之前，当我们想要更改这些控件的颜色时，可能需要自定义控件，或者借助复杂的第三方库。现在，有了 accent-color ，可以直接设置颜色，让默认组件也不再单调。在黑暗模式下，也能适配。
除了以上这 4 种默认控件，你可能也想试试其它 input 控件的设置效果：
<input type="date"> <input type="number" min=0 max=10 value=0> <input type="text" list="animals" placeholder="Animals"> <input type="search" list="animals" placeholder="Search..."> <details> <summary>Details</summary> <p>Peek-a-boo</p> </details> <ul> <li>This</li> <li>Is</li> <li>A</li> <li>List</li> </ul> <datalist id="animals"> <option>Dog</option> <option>Cat</option> <option>Spider</option> </datalist>
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); }
在 chrome 浏览器下表现正常，但并不完全支持其它浏览器。
也许后续会有更多支持，比如 option ~~ 尽情期待~
OK，虽然这只是一个小小的 CSS 新属性，但我们知道，CSS 的应用就是重在积累。
阶段小结
本月编写或翻译了一系列关于 CSS 的小知识，很多也是自己一边在吸取学习，一边在向外输出。
本瓜意识到了：
CSS 能玩的花活是真滴多！
作为前端开发者，不能放弃 CSS 这有趣又有用的能力！
CSS 重在积累，即使是一个很小的、新的特性，也值得探究实践！
