HeadlinesBriefing favicon HeadlinesBriefing.com

98.css: CSS Library for Windows 98 Look

Hacker News •
×

98.css is a CSS library that lets developers build interfaces that look like Windows 98 using semantic HTML. The library focuses on accessibility, requiring buttons to be built with `<button>`, inputs to have labels, and icon buttons to use `aria-label`. You can easily override styles—add more padding to buttons or change label colors—without touching any JavaScript, making it compatible with any frontend framework. The quickest way to use it is to importบท from unpkg: <link rel="stylesheet" href="https://unpkg.com/98.css">. It can also be installed via npm with `npm install 98.css` or downloaded from the GitHub releases page.

Components follow the classic 98 UI design: a standard button measures 75px wide and 23px tall, with sunken borders when pressed and a dotted focus ring. Checkboxes and radio buttons use a sunken panel with a check or circle icon, and must be wrapped in a `<label>` with a matching `for` attribute. Group boxes use `<fieldset>` and `<legend>` for organization, while text boxes are simple `<input type="text">` or `<textarea>` elements, again paired with labels. All controls are wrapped in a `.field-row` (or `.field-row-stacked`) container to maintain consistent spacing.

Accessibility is a primary goal: every input must have a visible label, and icon buttons need an `aria-label`. This approach ensures that the UI is usable with assistive technologies while preserving the nostalgic look of the original operating system.

The library’s focus on semantic markup and optional styling overrides allows developers to keep the classic Windows 98 aesthetic while integrating modern frameworks like React or vanilla JavaScript.