98.css: 用于 Windows 98 UI 重现的 CSS 库

98.css: 用于 Windows 98 UI 重现的 CSS 库

98.css 提供了一个纯 CSS 框架，用于重现 Windows 98 的美学风格

98.css 是一个设计系统，允许开发者构建具有 Windows 98 外观和感觉的界面。它作为一个纯 CSS 库实现，没有 JavaScript 依赖，使其能够与任何前端框架兼容，包括 React 和 vanilla JavaScript。该项目专注于在保持现代 Web 无障碍标准的同时，提供对经典操作系统的忠实视觉重现。

核心实现与技术方法

语义化 HTML 与无障碍性

该库严格依赖语义化 HTML 来运行。为了确保无障碍性和正确的视觉呈现，必须使用特定的元素：

  • Buttons: 使用 <button> 元素创建。
  • Inputs: 需要带有指向输入框 id 的 for 属性的相应 <label> 元素。
  • Icon Buttons: 依赖 aria-label 来支持辅助技术。

安装与集成

开发者可以通过多种方法将 98.css 集成到他们的项目中：

  • CDN: 通过 <link rel="stylesheet" href="https://unpkg.com/98.css"> 直接从 unpkg 导入。
  • Package Managers: 通过 npm install 98.css 进行安装。
  • GitHub: 直接从 GitHub 仓库下载发行版本。

组件库

98.css 提供了一套全面的组件，这些组件是根据 Microsoft Windows 用户体验指南建模的：

表单控件

  • Buttons: 标准按钮 (75px x 23px) 具有凸起的内外边框，点击时会变为凹陷状态。可以应用 .default 类来表示主要操作。
  • Checkboxes and Radio Buttons: 使用标准的 <input type="checkbox"> 和 <input type="radio"> 进行渲染。对这些元素进行分组需要将它们包装在 .field-row 容器中以保持间距一致。
  • Group Boxes: 使用 <fieldset> 和 <legend> 标签实现，为一组控件创建一个凹陷的边框。
  • Text Boxes: 通过 <input type="text"> 或 <textarea> 进行渲染。可以使用 .field-row-stacked 类将标签放置在输入框旁边或上方。
  • Sliders: 使用 <input type="range"> 创建。该库通过 .is-vertical 类支持垂直滑块，并通过 .has-box-indicator 支持方块指示器。
  • Dropdowns: 使用标准的 <select> 和 <option> 元素实现。

窗口化与布局

  • Windows: .window 类提供外部边界，而 .window-body 类定义内部内容区域。
  • Title Bars: 使用 .title-bar、.title-bar-text 和 .title-bar-controls 构建。该库为最小化、最大化、还原和帮助按钮提供了特定的样式类。
  • Status Bars: 使用 .status-bar 类创建，并使用 .status-bar-field 处理单个文本段。
  • Tree Views: 使用带有 .tree-view 类的 <ul> 元素进行渲染。嵌套 <ul> 元素可以创建层级结构，<details> 元素可用于可展开的部分。
  • Tabs: 使用带有 role="tablist" 的 <menu> 元素实现。活动标签页通过 [aria-selected=true] 属性指示。
  • Table Views: 使用包装在 .sunken-panel div 中的标准 <table> 元素进行渲染。.interactive 类添加了指针光标，.highlighted 标记选定行。

进度与边框

  • Progress Indicators: 支持实心（默认）和分段（通过 .segmented 类）进度条。
  • Generic Borders: 对于非表单元素，该库提供 .field-border、.field-border-disabled 和 .status-field-border 来定义工作区域或动态内容区。

社区见解与观点

社区讨论强调了与现代“扁平化设计”相比，人们对 Windows 98 UI 的清晰度和功能性的强烈怀旧感。

“我认为，我们为了‘按钮直接消失’而取消灰色禁用按钮的做法，是我们这个时代最令人困惑的 UI 趋势之一，看到一个灰色的按钮会让我的心感到温暖。”

来自用户的技术反馈表明，虽然该库具有高度的真实性，但一些用户注意到在默认按钮轮廓的像素级重现和 MS Sans Serif 字体的特定版本方面存在细微差异。一位用户提到，原始的 Windows 32 UI 组件有时会表现出令人惊讶的行为，例如 TrackBar 无论用户点击滑块条的哪个位置都会跳到特定值，而 98.css 为了符合更直观的 Web 标准而避免了这种行为。

项目状态与许可

98.css 根据 MIT 许可证发布。作者 Jordan Scales 将该项目描述为一个“职业倦怠恢复项目”，旨在为开源领域的新手提供一个贡献和改进 CSS 的友好空间。

Sources