一个标准按钮,宽75像素,高23像素,外圈凸起、内圈也凸起,按下去瞬间变凹。这个规格不是复古爱好者随手定的,来自微软自己的《Windows User Experience》设计规范。开源项目 98.css 把这份九十年代的界面手册原样翻译成了今天能用的 CSS,一行 JavaScript 都没写。
它值得注意的不是像不像 Windows 98,而是它顺手照出了今天扁平设计的一个老毛病:按钮到底能不能点,经常得靠猜。对前端开发者,这是个能直接拿来用的工具;对关注界面设计史的人,这是一份能在浏览器里跑起来的活样本。
速读:能做什么,怎么接入,谁会用
事实先摆清楚:
- 纯 CSS 库,不含 JavaScript,只管样式,不管交互逻辑
- MIT 协议开源,通过 unpkg、npm 或 GitHub Releases 三种方式引入
- 兼容主流框架,可以直接套进 React、原生 JS 或任意技术栈
- 覆盖控件.按钮、复选框、单选框、文本框、滑块、下拉框、窗口标题栏、状态栏、树状目录、标签页、表格、进度条
标签页切换、表格行高亮这类交互,库本身不提供。官方文档写得很直白:要自己写脚本,给元素加 aria-selected 之类的属性。98.css 只管长相。
| 场景 | 适不适合用 98.css |
|---|---|
| 复古主题项目、Hackathon 原型、个人作品集 | 适合,接入快,视觉一次到位 |
| 需要标签切换、表格排序等交互的产品 | 得自己补脚本,库不管这部分 |
| 企业级通用设计系统 | 不适合,组件覆盖面不是一个量级 |
对前端开发者和独立开发者来说,这东西的用法很实际:拿来做怀旧风格的落地页、demo 或作品集,一天能接完。真要上生产环境,交互逻辑和测试得自己补,库本身不背这个责任。
细节:装皮容易,装对不容易
项目文档有自己的要求:按钮必须用 <button>,输入框必须配 <label>,图标按钮靠 aria-label 说明用途。文档把可访问性和视觉复古摆在同等位置,这跟很多只顾好看的“像素风”皮肤不是一回事。不过这只是文档层面的承诺——视觉像不代表真的复现了 Windows 98 当年的系统级无障碍行为。
真正值得多看两眼的,是它顺手带出的对比。Windows 98 的按钮只有四种状态:凸起代表能点,按下变凹陷,禁用直接把字变灰,聚焦给一圈虚线框。不少扁平化设计把边框、阴影、按压反馈都砍掉,留下一片同色色块,用户得点一下才知道能不能点。
老子说“大巧若拙”。Win98 这套立体质感放在今天看是笨重,但它把每一次状态变化都摊开给用户看。后来的设计一路做“轻”,把反馈也一起简化掉,是两种取舍,谁更先进说不好。
对关注界面设计史的读者,98.css 的意义是给这套九十年代的状态语言留了一个能跑起来的样本。可以直接在浏览器里点一遍体验,而不只是看截图,拿来做教学案例或对照素材都现成。
接下来值得盯的,是这类怀旧 UI 库会不会真的进到生产项目里,还是只停在个人页面和作品集。目前从项目本身看不出答案,只能说它接入门槛低到几乎没有采用成本,试错代价很小。
锐评
98.css 不会取代 Ant Design 或 Material,它也没打算取代。它更像一面镜子,照出这些年界面设计在“克制”名义下悄悄丢掉的东西——那颗75×23像素的按钮,好歹让你一眼看出它能不能点。