98.css: 一個用於 Windows 98 UI 重現的 CSS 函式庫

98.css: 一個用於 Windows 98 UI 重現的 CSS 函式庫

98.css 提供純 CSS 框架來重現 Windows 98 美學

98.css 是一個設計系統，允許開發者建構外觀和感覺就像 Windows 98 的介面。它被實作為一個純 CSS 庫，沒有 JavaScript 依賴，使其與任何前端框架相容，包括 React 和純 JavaScript。該專注於提供經典作業系統的忠實視覺重現，同時保持現代網頁可訪問標準。

核心實作與技術方法

語意 HTML 與無障礙

該庫嚴格依賴語意 HTML 來運作。為確保無障礙和正確的視覺呈現，必須使用特定元素：

  • Buttons: 使用 <button> 元素建立。
  • Inputs: 需要對應的 <label> 元素，其 for 屬性指向輸入的 id。
  • Icon Buttons: 依賴 aria-label 來支援輔助技術。

安裝與整合

開發者可以透過以下幾種方式將 98.css 整合到他們的專案中：

  • CDN: 直接從 unpkg 透過 <link rel="stylesheet" href="https://unpkg.com/98.css"> 匯入。
  • 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: 使用標準的 <table> 元素，包裝在 .sunken-panel div 中渲染。.interactive 類別會添加指針游標，而 .highlighted 會標記選中的行。

進度條與邊框

  • Progress Indicators: 支援實心（預設）和分段（透過 .segmented 類別）進度條。
  • Generic Borders: 對於非表單元素，該庫提供 .field-border、.field-border-disabled 和 .status-field-border 來定義工作區或動態內容區域。

社群見解與觀點

社群討論凸顯了對比現代「平面設計」，人們對 Windows 98 UI 的清晰與功能性懷有強烈的懷舊情感。

"我認為我們移除灰色按鈕（因為『the button just doesn't appear』）是我們時代最令人困惑的 UI 趨勢之一，看到灰色按鈕會讓我的心感到溫暖。"

使用者的技術回饋表明，儘管該庫高度真實，但一些使用者指出在預設按鈕輪廓的像素完美重現以及 MS Sans Serif 字體的特定版本上存在微小差異。一位使用者提到，原始的 Windows 32 UI 小工具有時會表現出令人驚訝的行為，例如 TrackBar 會跳躍到特定值，無論使用者在滑軌上點擊何處，而 98.css 則避免此行為，以支持更直觀的網頁標準。

項目狀態與授權

98.css 以 MIT 授權發布。作者 Jordan Scales 將此專案描述為一個「倦怠復原專案」，旨在為開源新手提供一個友善的空間，以貢獻並改進 CSS。"}

Sources