10现代 CSS 属性

CSS 不止颜色和布局——2020 年之后，一批「一行顶十行 JS」的现代属性陆续被浏览器采纳： accent-color 一行给所有原生控件染色、color-scheme 一行支持暗色模式、 ::marker 改列表项符号颜色、@property 让原本不能动画的属性平滑过渡…… 这一课挑 8 个最实用的「现代 CSS 武器」，看完你的表单和列表就能立刻用上。

约 16 分钟 7 个动手实验 2020+ 现代 CSS

一、原生控件颜色三件套：accent-color / caret-color / color-scheme

原生 <input>、<progress>、<select> 控件的颜色一直很「固执」—— 想改？过去只能写一大坨 appearance: none 抹掉默认样式再自己画。 现在三行 CSS就能给它们染色：

  • accent-color：一行改 input / range / progress / checkbox / radio 的主色（Chrome 93+、Firefox 92+、Safari 15.4+）。
  • caret-color：改输入框闪烁光标的颜色。
  • color-scheme: light dark：告诉浏览器「这个页面支持亮 / 暗主题」，原生滚动条、表单控件、<canvas> 背景会自动跟随系统主题。配合 <meta name="color-scheme"> 双保险。
三个属性速查：作用、兼容性、适用场景
属性作用兼容适用场景
accent-color 改原生控件主色（checkbox/range/progress） Chrome 93+ / FF 92+ / Safari 15.4+ 表单一致性：让原生控件跟随品牌色
caret-color 改输入框光标颜色 Chrome / FF / Safari 全部支持 深色输入框、个性化编辑器
color-scheme 声明页面支持的主题模式 Chrome / FF / Safari 全部支持 暗色模式、原生控件自动反色
三件套现场：把 accent-color 的色值改成 #4E7A52（绿），看 checkbox / range / progress 同时变绿；光标落在邮箱框会变绿
品牌一致性：过去要让所有原生控件颜色统一，得逐个写样式覆写； 现在一句 :root { accent-color: 品牌色 }，全站表单立刻跟随品牌色——这是 2022 年之后最值得加的一行 CSS。

二、::marker 列表项标记自由配色

<li> 默认前面那个小圆点（disc）一直是同一个颜色——和文字同色，不能改。 CSS 给了我们::marker 伪元素：可以单独给「项目符号」上色、改字号、改字体（Chrome 86+、Firefox 68+）。 配合 list-style-type 还能用 emoji 或字符串当符号：list-style-type: "▸ "。

三个列表三种玩法：把 .li-emoji 里的 "🍎 " 改成 "🍊 "，列表符号集体变橘子
list-style-type 的字符串参数有个细节：末尾要留个空格 （比如 "▸ " 而不是 "▸"），否则符号和文字会黏在一起。 fallback 由浏览器自动处理——emoji 字体不存在的用户会看到一个普通字符。

三、::selection 与 ::placeholder 文本细节

选中文本时默认是「浏览器蓝色背景 + 白色字」——和品牌色八竿子打不着。 ::selection 让你定义选区样式； 配合 ::placeholder 改占位符颜色，再加 ::placeholder-shown 在输入框为空时给点视觉提示—— 这些一行 CSS 就能让表单体验专业一截。

文本细节三件套：在段落里用鼠标拖蓝一段文字——背景变暖橙；点输入框看占位符颜色比正文更淡
::selection 不能用 background-image（比如渐变）， 只能纯色 + 半透明；::placeholder 只能改颜色 / 字号 / 字体，不能改 line-height ——真要精细控制，需要包一层 ::before / ::after 模拟。

四、::file-selector-button 上传按钮染色

<input type="file"> 自带的「选择文件」按钮样式在三大浏览器长相完全不一样， 过去要写一堆 appearance: none 才能统一。 现在 ::file-selector-button（Chrome 89+、Firefox 82+、Safari 14.1+） 直接选中那个按钮改样式；Safari / 旧 Chrome 还需写一份 ::-webkit-file-upload-button 兜底。

上传按钮前后对比：左边是浏览器默认按钮，右边一行 CSS 把它染成品牌色按钮
按钮里的「未选择文件」提示文字不能直接改，但可以放在 label 里替换： 用 <label> 包住自定义按钮文字，再把真 input 视觉隐藏， 既能换文案，又能继续调 ::file-selector-button 染色。

五、@property 动画注册属性

CSS Houdini 里最实用的部分：@property 把一个「普通自定义属性」注册成「带类型、可继承、有初值」的正式属性。 最大用处是——让原本不能动画的属性（如渐变角度、颜色 alpha）变成可平滑过渡。 不注册的 --x 动画只会「啪」地跳变；注册的会丝滑插值。

@property 三大参数：syntax / inherits / initial-value
参数作用必填示例
syntax 声明变量类型，浏览器才知道如何插值 ✓ <color> / <length> / <number> / <angle>
inherits 子元素是否继承这个变量 ✓ true 或 false
initial-value 变量未声明时的兜底值（必须与 syntax 类型匹配） 可选 #C08A3E / 0deg
阶跃 vs 平滑：左侧盒子没注册 --c，鼠标悬停颜色瞬间切换；右侧注册后变成丝滑过渡（hover 触发动画）
兼容性提示：@property 需要 Chrome 85+ / Edge 85+ / Safari 16.4+； Firefox 默认未开启（需在 about:config 打开 layout.css.properties-and-values.enabled）。 生产环境建议用 @supports 做特性检测后再启用动画。

六、@counter-style 自定义列表编号

list-style-type 内置只有 decimal / lower-roman / disc 等十几种， 想用 emoji、中文「甲乙丙」、自定义字符串？ @counter-style 让你定义自己的列表编号体系（Chrome 91+ / Firefox 33+）。

四种 counter-style 并排：把 thumbs 的 symbols 改成 "👍"，列表项前面全是点赞
@counter-style 还有一个救命参数 fallback—— 当浏览器不支持你的 symbols（比如缺字体），会自动降级到指定的内置类型： fallback: decimal;。建议每个自定义 counter style 都写一份 fallback。

七、font-feature-settings / font-variant-numeric

字体文件里藏着大量「高级特性」——连字（fi 合并）、小型大写字母、等宽数字、上下标…… font-feature-settings 用四位特征码开启它们（OpenType 通用写法）； font-variant-numeric 则是更高层级的「开关」，可读性更好。 金融表格、计时器、logo 字都靠它们。

常用 OpenType 特性速查：四位码 vs 语义关键字
特性特征码关键字写法效果
小型大写字母"smcp" 1font-variant: small-caps小写字母转成缩小版大写
等宽数字"tnum" 1font-variant-numeric: tabular-nums数字等宽对齐，金融表格标配
比例数字"pnum" 1font-variant-numeric: proportional-nums数字按比例宽度（默认）
分数"frac" 1font-variant-numeric: diagonal-fractions1/2 渲染为 ½
常见连字"liga" 1font-variant-ligatures: common-ligaturesfi 自动合并字形
关闭连字"liga" 0font-variant-ligatures: none代码片段里禁用连字，防止误读
数字等宽 vs 比例：上面一组数字上下错位，下面一组完美对齐——金融表格、计分板都要开 tabular-nums；英文代码片段关掉连字防误读
优先级记法：font-variant-* 系列（语义、可读）是首选； font-feature-settings（特征码、灵活）用于前者覆盖不到的冷门特性。 两者同时存在时，font-feature-settings 后写会覆盖前者—— 所以代码里通常只挑一种写法，别混搭。

八、本章小结

  • 原生控件染色三件套：accent-color 改主色、caret-color 改光标、color-scheme 声明支持亮 / 暗主题——一行解决品牌一致性。
  • ::marker 让列表项目符号单独配色 / 改字号，配合 list-style-type 可用 emoji 或字符串当符号。
  • ::selection 改选区颜色、::placeholder 改占位符、::placeholder-shown 改空输入框状态——表单细节的三个开关。
  • ::file-selector-button 一行给上传按钮染色，跨浏览器记得加 ::-webkit-file-upload-button 兜底。
  • @property 把自定义属性注册成「带类型的正式属性」——让原本不能动画的属性（如渐变角度、颜色）丝滑过渡。
  • @counter-style 自定义列表编号体系：emoji、中文「甲乙丙」都行，fallback 兜底内置类型。
  • font-variant-numeric: tabular-nums 让数字等宽对齐（金融表格标配）；font-feature-settings: "liga" 0 关闭连字防误读。
动手练习：给自己手头的项目加三行 CSS： 第一，:root { accent-color: 品牌色 } 让所有表单控件统一染色； 第二，color-scheme: light dark + <meta name="color-scheme"> 一行支持暗色模式； 第三，::selection { background: 品牌色淡; } 改选区颜色。 三个特性，一行一个，写完立刻能感受到页面「高级感」的不同。