98.css
Hacker News 摘要原标题：98.css
98.css 是一个 CSS 库，专门用于构建外观酷似 Windows 98 的界面。该库完全基于语义化 HTML，不包含任何 JavaScript，因此可以与各类前端框架兼容。你可以通过 unpkg 的链接直接引入，也可以通过 GitHub 发布页或 npm 进行安装，安装命令为 npm install 98.css。
在使用该库时，可访问性是一个主要目标。例如，创建按钮必须使用 button 标签，输入元素需要配合 label 标签，图标按钮则依赖 aria-label。开发者可以在保持 Windows 98 风格的同时，覆盖元素的内边距或标签颜色等样式。
按钮
按钮也被称为命令按钮或下推按钮，用于在点击时触发操作。标准按钮宽度为 75 像素，高度为 23 像素，具有凸起的内外边框，默认水平内边距为 12 像素。
• 默认按钮：可以为按钮添加 default 类，这在 Windows 98 中代表按下回车键会触发的操作。
• 按下状态：当按钮被点击时，凸起边框会变为凹陷状态。
• 禁用状态：禁用按钮保持凸起边框，但标签文字呈现褪色视觉效果。
• 聚焦状态：通过在按钮内容内部 4 像素处显示虚线边框来表示聚焦。
复选框与单选按钮
复选框代表独立或非排他性的选择，由凹陷面板和选中时的勾选图标组成。使用时必须在输入框后添加 label 元素，并通过 for 属性关联输入框的 id。
单选按钮（或称选项按钮）代表一组互斥选择中的单一选项。用户只能在限定集合中选择一个。通过为 input 元素设置 radio 类型来实现。
在对输入框进行分组时，建议将每个输入项包裹在带有 field-row 类的容器中，以确保一致的间距。两者均支持 HTML 标准的 checked 和 disabled 属性。
分组框
分组框是用于组织一组控件的矩形框。使用 fieldset 标签可以创建具有凹陷外边框和凸起内边框的分组框，效果类似雕刻线条。如果需要为分组提供标签，可以在 fieldset 内部使用 legend 元素。
文本框
文本框（或称编辑控制框）是用户输入或编辑文本的矩形区域。
• 单行文本：使用 text 类型的 input 元素。
• 多行文本：使用 textarea 元素。
• 布局方式：可以使用 field-row 类使标签和输入框并排，或使用 field-row-stacked 类使标签位于输入框上方。
文本框同样支持通过标准属性设置为禁用或预设值。
滑块
滑块由定义范围的条杆和显示当前值的指示器组成。通过 range 类型的 input 元素实现。
• 样式定制：添加 has-box-indicator 类可以将默认指示器替换为方块指示器。
• 垂直滑块：将滑块包裹在带有 is-vertical 类的 div 中。调整垂直滑块长度需要同时设置输入框的宽度和容器的高度。
下拉列表
下拉列表允许用户从列表中选择单个项目。在关闭状态下显示当前值，打开后可更改。它通过标准的 select 和 option 元素实现，支持 selected 属性来指定初始选中项。
窗口组件
窗口由边界定义形状，是构建界面的核心组件。
• 标题栏：位于窗口顶端，包含标题文字（title-bar-text）和控制按钮（title-bar-controls）。控制按钮通过 aria-label 属性标识关闭、最小化、最大化、还原或帮助功能。添加 inactive 类可以使标题栏显示为不活动状态。
• 窗口容器：使用 window 类创建具有内外凸起边框和内边距的窗口，可通过内联样式指定宽度。
• 窗口内容区：在标题栏下方使用 window-body 类来承载具体内容。
状态栏
状态栏位于窗口底部，用于显示当前状态或上下文信息（如键盘状态）。使用 status-bar 类创建，每个子文本元素应使用 status-bar-field 类。
树形视图
树形视图以缩进大纲的形式显示对象的逻辑层级关系。使用带有 tree-view 类的 ul 元素实现。通过嵌套 ul 可以创建虚线连接的层级结构。利用 details 元素可以制作可展开或折叠的章节。
选项卡
选项卡模拟文件柜的分隔符，用于定义多个逻辑页面。
• 使用 menu 元素配合 role="tablist" 属性创建列表，子元素使用 role="tab"。
• 需要自定义 JavaScript 代码来管理选项卡的切换，通过将 aria-selected="true" 添加到活动标签上来改变样式。
• 添加 multirows 类可以创建多行选项卡。
表格视图
表格视图使用原生的 table 元素，并建议包裹在带有 sunken-panel 类的 div 中，以提供正确的边框和溢出容器。
• 交互效果：为 table 添加 interactive 类可以在鼠标悬停行时显示指针光标。
• 选中行：为表格行添加 highlighted 类可以使其显示为选中状态。
进度指示器
进度指示器（进度条）用于显示耗时操作的完成百分比。该库支持两种类型：默认的实心版本和带有 segmented 类的分段版本。
字段边框
文本框、复选框、下拉框等控件通常使用字段边框样式。
• field-border：具有凹陷外边框和凹陷内边框，常用于工作区。
• status-field-border：仅使用凹陷外边框，常用于状态栏或其他内容动态变化的只读字段。
• field-border-disabled：用于禁用状态的工作区。
其他信息
98.css 采用 MIT 协议。开发者欢迎用户通过 GitHub 提交错误报告或拉取请求。这是一个充满趣味性的项目，旨在为开发者提供一个愉快的开源开发环境。