98.css: Windows 98 UI 再現のための CSS ライブラリ

98.css Windows 98 の美学を再現する純粋な CSS フレームワーク

98.css は、Windows 98 の見た目と感触を持つインターフェースを構築できるデザインシステムです。JavaScript 依存がない純粋な CSS ライブラリとして実装されており、React やバニラ JavaScript を含むあらゆるフロントエンド フレームワークと互換性があります。このプロジェクトは、モダンなウェブ アクセシビリティ基準を維持しながら、クラシックな OS の忠実な視覚的再現を提供することに焦点を当てています。

コア実装と技術的アプローチ

このライブラリは機能するために厳密にセマンティック HTML に依存します。アクセシビリティと正しい視覚的表現を確保するため、特定の要素を使用する必要があります：

• ボタン: <button> 要素を使用して作成されます。
• 入力: 対応する for 属性を持つ <label> 要素が必要です。この属性は入力の id を指します。
• アイコン ボタン: アシスティブ テクノロジーのサポートのために 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 ユーザー エクスペリエンス ガイドラインに基づいてモデル化された包括的なコンポーネント セットを提供します：

フォーム コントロール

• ボタン: 75px x 23px の標準ボタンは、クリック時に沈む凸の外枠と内枠を特徴とします。.default クラスを適用してプライマリ アクションを示すことができます。
• チェックボックスとラジオ ボタン: 標準の <input type="checkbox"> と <input type="radio"> を使用してレンダリングされます。これらの要素をグループ化するには、均等な間隔を保つために .field-row コンテナでラップする必要があります。
• グループ ボックス: <fieldset> と <legend> タグを使用して実装され、コントロールのセット周りに彫り込まれたフレームを作成します。
• テキスト ボックス: <input type="text"> または <textarea> を使用してレンダリングされます。ラベルは .field-row-stacked クラスを使用して入力の横または上に配置できます。
• スライダー: <input type="range"> を使用して作成されます。ライブラリは .is-vertical クラスによる垂直スライダーと .has-box-indicator クラスによるボックス -box-indicator` クラスによるボックス インディケーターをサポートします。
• ドロップダウン: 標準の <select> と <option> 要素を使用して実装されます。

ウィンドウとレイアウト

• ウィンドウ: .window クラスが外部境界を提供し、.window-body クラスが内部コンテンツ エリアを定義します。
• タイトル バー: .title-bar、.title-bar-text、.title-bar-controls を使用して構築されます。ライブラリは、最小化、最大化、復元、ヘルプ ボタン用の特定のスタイルクラスを提供します。
• ステータス バー: .status-bar クラスを使用して作成され、.status-bar-field が個々のテキスト セグメントに使用されます。
• ツリー ビュー: .tree-view クラスを持つ <ul> 要素を使用してレンダリングされます。<ul> 要素をネストすると階層構造が作成され、<details> 要素を使用して展開可能なセクションを作成できます。
• タブ: role="tablist" を持つ <menu> 要素を使用して実装されます。アクティブなタブは [aria-selected=true] 属性で示されます。
• テーブル ビュー: 標準の <table> 要素を .sunken-panel div でラップしてレンダリングされます。.interactive クラスがポインタ カーソルを追加し、.highlighted クラスが選択された行をマークします。

プログレスとボーダー

• プログレス インジケーター: デフォルトのソリッドおよび .segmented クラスによるセグメント化されたプログレス バーの両方をサポートします。
• 汎用ボーダー: フォーム以外の要素に対して、ライブラリは .field-border、.field-border-disabled、および .status-field-border を提供し、作業エリアまたは動的コンテンツ ゾーンを定義します。

コミュニティの洞察と視点

コミュニティのディスカッションでは、モダンな「フラット デザイン」と比較して、Windows 98 UI の明瞭さと機能性への強いノスタルジーが強調されています。

"グレーアウトされたボタンを削除した事実が、『ボタンがただ表示されない』は、今日私たちが見る混乱を招く UI トレンドの一つであり、グレーアウトされたボタンを見ると私の心が温かくなります"

ユーザーからの技術的フィードバックによると、ライブラリは非常に忠実である一方で、一部のユーザーはデフォルトのボタン アウトラインのピクセル パーフェクトな再現および MS Sans Serif フォントの特定のバージョンにおける微細な不一致を指摘しています。あるユーザーは、元の Windows 32 UI ウィジェットが時々驚くべき動作を示すことを述べています。たとえば、ユーザーがライン バーのどこをクリックしたかに関係なく、TrackBar が特定の値にジャンプするという動作があります。この動作は、98.css がより直感的なウェブ標準に従って回避しています。

プロジェクトの状態とライセンス

98.css は MIT ライセンスの下でリリースされています。著者の Jordan Scales は、このプロジェクトを「バーンアウト リカバリー プロジェクト」と説明し、オープンソースへの初心者が貢献し CSS を改善できる歓迎されるスペースにすることを意図しています。