CSS艺术师：打通策划与建站资源的双向快车道

　　去年一月，我在策划组和建站组的联合评审会上，坐在第三排靠左那个掉了漆的蓝色折叠椅上——椅背弹簧早就松了，一靠就吱呀响，反正没人管。

文章配图，仅供参考

　　当时大屏正播着新首页的Figma稿，策划总监指着中间那个「立即体验」按钮说：“这里必须呼吸感，要让人一眼看见就想点。”建站组长点头说“收到”，转身就让前端切图。我举手说“先别急”，他抬眼扫我一下，没说话。我原以为是动效节奏问题，结果不是——是那个按钮的微渐变在Chrome 112里渲染成两道错位色带，而策划用的Mac截图刚好避开了这问题。

　　我当场打开自己笔记本调试，Ctrl+Shift+I调出开发者工具，把button的background-image换成纯色，立刻好了；换回线性渐变，第八次预览时又崩——不是每次崩，是随机的。我盯着那行代码看了二十来分钟：background: linear-gradient(90deg, #3a86ff 0%, #8338ec 100%); 就这一行。旁边实习生小声说：“是不是得加个-webkit-前缀？”我试了，没用。我又删掉100%，改成99.9%，好了；再改成100%，又崩。我也不知道为什么。

　　策划总监这时候走过来，手机还攥在手里没放回兜，问：“能上线不？”我没答，只把屏幕转给他看：同一段CSS，在他iPhone Safari里平滑，在我联想Y7000的Edge里抖三帧，在测试机小米12的Chrome里直接白块。他顿了顿，说：“那……先切图吧，样式你们后面微调。”——就这一句，不是疑问，是定调。

　　我原以为“打通双向快车道”是指两边能同步改需求、共用设计Token、共享状态反馈。结果那天我亲眼看见：策划提需求用的是上午十点的Figma快照，建站拉代码用的是下午三点的Git提交，而生产环境部署用的是凌晨两点打包的dist包——三个时间戳、三个源、全对不上。中间没人校验，也没人觉得该校验。优胜劣汰？对。活下来的不是最准的方案，是最扛得住反复覆盖的方案。那天最后上线的按钮，用的是硬编码十六进制色值+box-shadow模拟渐变，因为……它不崩。

　　（办公室空调滤网上周换了，现在吹风有点干，我嗓子痒了两回）

　　后来有天清缓存，突然发现那段渐变在devtools里不崩了，但线上还是崩。我把本地服务关了又开，开了又关，第五次启动时，console里莫名其妙弹出一行：[Deprecation] The ‘-webkit-linear-gradient’ prefix is deprecated ——可我根本没写这个前缀。我翻History面板查了半天，发现是某次npm update自动装了autoprefixer 10.4.14，它偷偷给加的。谁干的？不知道。怎么触发的？不知道。为什么只在这台机器？不知道。

　　但我笃定一点：当策划说“要呼吸感”，建站说“已交付”，而真实用户点开页面时那个按钮在闪三下才出现——这条快车道压根没铺路基，全是沙子。有人踩过去，陷一半；有人绕过去，踩隔壁坑；剩下的人，在会议室等PPT翻页。

　　有谁碰到过这个吗？

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!