你是 CSS 开发者还是 CSS 专家：单文件修图器里的九道测试
来源：dev.to — 2026-11-15
📋 概述
作者拿一个完全跑在浏览器里、只有一个 HTML 文件、约一万两千四百行的免费修图工具 APIC，从中拆出九道真实考题。每道题先给一句大白话，再给代码，最后讲浏览器到底在干什么。题目覆盖暗色模式切换时的白闪、手机地址栏吃掉视口底部、圆角渐变边框不跟随、灰字在阳光下看不清这些实际 bug。
🔑 核心要点
- 一千一百行 CSS 里用了六百六十六次自定义属性，整套设计完全建立在变量之上。
- 三十三个媒体查询、二十处 color-mix()、十二组关键帧动画，构成全部视觉表现。
- 十八条 :focus-visible 规则保证键盘用户看得见焦点，无障碍在这里是底线不是加分项。
- 八处 prefers-reduced-motion 守卫，给怕动画的人减动效；二十个 details 元素实现零 JavaScript 手风琴。
💡 金句
“CSS experts know what happens when the browser disagrees with you.”
译：CSS 专家知道浏览器跟你意见不合的时候会发生什么。
👍 0
👎 0
← 返回 dev.to 首页