← #802

98.css：用纯 CSS 复刻 Windows 98 界面

文章摘要

98.css 是 Jordan Scales（jordanscales）做的一套 CSS 设计系统，目标是在网页上高保真复刻 Windows 98 的用户界面。它的核心特点是：纯 CSS，不含任何 JavaScript，完全依赖语义化 HTML，因此与框架无关——React、原生 JS 或任何其他技术栈都能直接用。引入方式极其简单，一行 <link rel="stylesheet" href="https://unpkg.com/98.css"> 即可，也支持 npm install 98.css。整个库 gzip 后体积极小，MIT 协议开源。

它覆盖的组件相当完整：按钮（含按下态）、复选框、单选按钮、文本输入框、滑块（trackbar）、下拉框、分组框（group box）、带标题栏和状态栏的窗口、树视图（tree view）、选项卡、表格、进度条，以及各类 field border / status field border 边框样式。文档为每个组件都提供了可复制的代码示例，并且强调可访问性——要求使用语义化 HTML 和正确关联的 label。所有样式都可以被覆盖，同时保持整体的 Win98 观感。有一个细节值得注意：官方主页上的选项卡示例点击是无效的，因为切换 tab 需要 JavaScript（作者的建议是自行添加代码，把 [aria-selected=true] 属性加到激活的 tab 上）。

技术实现上最受称赞的是那套通过 border 和 box-shadow 层叠出来的斜面（beveled）立体效果——Win95/98 的按钮、窗口边框、选项卡、输入框那种微妙的 3D 凹凸暗示，全部靠纯 CSS 边框技巧还原，包括标题栏上的蓝色渐变。

这个项目已经是 HN 的「常客」：2020 年（838 分）、2022 年（606 分）、2024 年（471 分）、2026 年（541 分）各上过一次首页，评论里有人开玩笑说「2028 年再见」。作者本人在这次讨论中现身，说明了它的来历：这是他的倦怠恢复项目（burnout recovery project），在他心里占有特殊位置。他还坦言自己早就不再开发 98.css 了，唯一的贡献是盯着仓库看有没有高质量 PR——如果有，他会快速扫一眼作者的主页确认对方不会在用户机器上挖矿，然后直接给对方完整的提交权限：「看着不错，你自己合了吧。」

HN 评论精华

jordanscales（作者本人）：「这是我的倦怠恢复项目，在我心里占有特别的位置。」他还贴了一篇自己写的回顾文章。mattgerstman 的调侃很受欢迎：「知道这是手工代码（artisanal code）后就更令人佩服了——或者按我们当年的叫法，就叫『代码』。」M95D 特别欣赏他那套「扫一眼 PR 作者主页，确认不挖矿就给完整提交权限」的维护哲学。
culi 和 ranger_danger 联手贡献了整个讨论里最有实用价值的东西——一份庞大的复古 CSS 库清单。包括 win95.css（Windows 95）、XP.css（Windows XP）、7.css（Windows 7）、system.css（Apple System）、platinum（Mac OS 9）、NES.css、SNES.css、PSone.css、CS16（反恐精英 1.6）、geo-bootstrap（Geocities）、BOOTSTRA.386（80 年代）、tufte-css（Edward Tufte 排版）、TuiCss、c64css3、after-dark-css、Xbox360UI、The Sims CSS，以及 classic-stylesheets（另一个复古样式合集，其中的 CDE 风格被 Tepix 认为很接近 OSF/MOTIF）。BOOTSTRA.386 的作者 kristopolous 也出现在讨论里，他透露那不是 Bootstrap 主题而是保持兼容性的完整 fork，「极其磨人，说的是几百个小时」，并且怀疑 AI 在这类工作上能帮多少忙：「这是精确的像素对齐问题，图像能力大概超出模型所能，而且需要品味。现在 AI 在这里感觉就是在空转。」
zemo 抛出了一个引发深度讨论的观点：「不开玩笑，我认为我们把『灰掉的按钮』换成『按钮干脆不出现』是当代最令人困惑的 UI 趋势之一，而看到一个灰掉的按钮会让我心里暖起来。」cube00 引用了微软早年那份出色的 UX 指南：「重新考虑禁用控件。禁用控件可能难用，因为用户得字面上去推断它为什么被禁用。当用户预期它适用、且能轻易推断出原因时才禁用它。当用户根本无法启用它、或不预期它适用时移除它，或者保持启用但在误用时给出错误信息。」以及那条实用技巧：如果不确定该禁用还是给错误提示，先把错误信息写出来——如果里面包含目标用户不容易快速推断出的有用信息，那就保持控件启用并给出错误。他惋惜地指出这层细腻在新版指南里彻底消失，甚至完全不再提禁用按钮。deathanatos 强烈反对其中一条：「『当用户无法启用它时移除该控件』这条指导是失控的，正是需要死掉的那个反模式。移除控件相当于对用户煤气灯操纵——他们在找『怎么做 X』，而文档、网上能搜到的截图，以及现在还有 AI，都在指向一个不存在的按钮。」他主张控件应始终可见，并且要有 HIG 标准化的方式说明为何被禁用（强制的 tooltip，或者一个标准化的信息图标）。preg_match 附议并追加：「还要多得多的问号按钮。不管别人觉得命名多好，都不够好，每个设置背后都有你必须知道的隐藏行为。」nitin7 给了更细的规则：如果用户没有权限（非管理员、只读），按钮不该出现；但如果用户有能力也预期能做、只是当前处于不允许的模式或状态，那就必须是灰掉的按钮——而且某些情况下（比如表单）灰掉的按钮应该可以点击并告诉用户哪里出了问题（「说的就是你，某市值十亿的航空公司，我因为这个毛病没法完成登机手续」）。
sodapopcan：「扁平化设计太荒谬了。让某些人赚了一大笔钱。现在所有人都跟着当羊。」acchow 给了一句杀伤力很大的补充：「如果在页面上找东西花的时间更长，一个最受追捧的指标就会上升：页面停留时间。于是我们就到了这里。」cube00 接上另一个例子：他花了太久才意识到那些数字快速滚动累加的统计小部件，存在的意义只是指望你等它数完看总数，全为了拉长停留时间、让设计师的指标好看。theandrewbailey 感叹：Win9x 甚至 3.x 的样式都有微妙的 3D 提示——按钮边缘、窗口边框、选项卡、文本框，还有渐变。「显然这些是我们已经失落的技术。」spankibalt 提出辩护：扁平或准扁平（极简／野兽派）设计只要用好视觉区分手段（阴影、描边、对比）就非常出色，少即是多——这套哲学真正冲突的对象是苹果、谷歌及其模仿者那种过饱和的「费雪牌橡皮泥 UI」。dysoco 给了一个更宿命论的观察：大多数人渴望改变和新鲜感，扁平化恰好提供了这个；他现在反扁平化，但清楚记得当年觉得 Vista 很酷，几年后又觉得 Windows 8 很酷——「现在我渴望拟物化，但如果它成为主流十年之后……谁知道呢。」luciana1u 的段子精准：「某天会有人发布 2010s.css 来复刻扁平化设计时代，而它只有三行 CSS，让所有东西看起来像什么都没有。」
harry8 是最坚定的反怀旧派：他当年痛恨这一切，以至于从杂志光盘装了 RedHat 7.x 并学了 C 和 Perl。他特别点名多行选项卡（multirow tabs）是「对可用性、智力、常识、体面、正义，当然还有一切美学的彻底暴行」，并问「为什么要把它带回来？也许是为了修好它？」j16sdiz 替它辩护：多行 tab 不好看，但它让你能看到全部的 tab，不像现代那种点一下只挪一个像素的可滚动 tab 栏。harry8 反驳了要害：真正毒害可发现性的是行的顺序会随你点击的最后一个而重排——从左上角的 tab 开始找，点完它就跑到最下面一行去了，谢了。hdjrudni 站在另一边：多行 tab 的替代品是（a）小到看不清的 tab 或（b）滚出屏幕彻底无法访问的 tab；「移动的问题我们可以通过不移动它们来修好」，而垂直空间在高分辨率时代已经不是大问题。inigyou 则解释了移动的合理性：「被选中的 tab 必须在最下面一行，视觉隐喻才成立，这就是它们要移动的原因。」有意思的是，pxtail 挑刺的正好相反——「多行 tab 示例里的 tab 点击时没有像它们应该的那样随机改变位置」。
关于像素精度的争论：pdntspa 说这终于是一个「基本上像素级准确」的复古库，虽然元素间距略有偏差，但真的像 Windows 98；他抱怨很多同类项目缺乏精度和细节关注，「令人恼火的程度不亚于像素大小不一致的像素画游戏」。self_awareness 指出了一个共通缺陷：控件之间空白太多，「Win95/98 在这方面非常高效，太多空白就是浪费空间」。hilti 认为根源是屏幕变大、约束消失——Win95 是为 800x600 和 1024x768 设计的。akx 终于对困扰他已久的一点动了手：98.css 及其同类那个「差之毫厘」的 MS Sans Serif 字体，他提了 PR #230 去修。bhouston 挑了几处：默认按钮（比如 OK）应该有粗黑描边；TheAceOfHearts 分享了一个 win32 真实行为的冷知识：原生 TrackBar 控件（相当于 <input type=range>）在 value 为 0/100 时，你点击滑轨的任何位置它都会跳到 20，无论你点得多近多远——他觉得这行为非常反直觉，而 98.css 在网页上的做法（跳到你点的位置）反而更「正确」。
实际使用案例不少：sphars 用它做了 mathsheets.net（「恰好击中可用性与怀旧的平衡点，让我想在更多项目里用它」），并附了一段真实的家庭传统故事——引来 woqe 的高度赞美（以及一层 2026 年特有的猜疑：「希望我不是被 AI 生成的故事骗了」，sphars 只能回一句自己无法证明但确实是真的）。montag 用 98.css 作为起点做了 chiptune.app 里的 Winamp 主题；pkage 用它做了个人站 ka.ge，一个「像素级精确且可用」的 Win98 桌面环境复刻，全部在 1MB 以内；vibbix 受此启发在做自己的 BeOS 风格复古 CSS 库；hilti 用 ImGUI 做了 BevelDesk 尝试复刻同一观感。
wseqyrku 提出了一个引起共鸣的请求：「各位，能给 TUI 也来一套 CSS 框架吗？」回复推荐了 lipgloss、BOOTSTRA.386 和 Textual，但他觉得 BOOTSTRA.386「太可爱了」，他想要的是 Textual 那种主题化的 CSS 框架，好用在大量实际场景中。
关于哪一代 UI 是巅峰的分歧：lambdaone 认为 Windows XP 和 Mac OS System 7 的 GUI 都相当好看，此后键鼠 UI 基本没有真正改进，只是在样式上演进和打磨，所有真正的创新都发生在触屏设备上——pdntspa 立刻反击：「XP？就那个费雪牌原色配色方案？你一定是在开玩笑。」fodkodrasz 投票给 Windows 2000：「自那以后一切都在变糟，圆角和浮动边距就是例子；macOS 和网页设计师的影响对可用性是有害的。」neya 认为 Windows 7 是那个时代最后一个好设计，此后全线下坡。jhoechtl 是唯一质疑这类项目意义的人：「Windows 98 的 UI 设计并不是 UX 的巅峰」，真正该做的是理解一个好 UX 站点需要什么、并识别出最小必需的技术组件。RedShift1 从另一个角度批评现代设计：不只是扁平，还有用色的萎缩——「我们有能显示数百万色的显示器和显卡，却拒绝使用……不是说要像涂色书，但 Windows 10 和 11 真的让我感到抑郁。」