98.css – CSS-Designsystem zur Nachbildung der Windows-98-UI

 (jdan.github.io)
3 Punkte von GN⁺ 2024-11-07 | 1 Kommentare | Auf WhatsApp teilen
  • 98.css ermöglicht es, Weboberflächen, die wie Windows 98 aussehen, ausschließlich mit CSS zu erstellen und damit alte Desktop-UIs originalgetreu nachzubilden
  • Barrierefreiheit stützt sich auf semantisches HTML; vorausgesetzt wird die korrekte Verwendung von ARIA-Attributen für Buttons, Labels und Icon-Buttons
  • Da kein JavaScript enthalten ist, lässt es sich unabhängig von der Framework-Wahl in React-, Vanilla-JavaScript- und normale HTML-Projekte einbinden
  • Bietet Komponenten im Windows-98-Stil wie Buttons, Checkboxen, Radiobuttons, Fenster, TreeViews, Tabs, TableViews und Fortschrittsbalken
  • Verfügbar über npm, GitHub-Releases und unpkg; unter der MIT-Lizenz veröffentlicht und offen für Bug Reports und Pull Requests

Wie Windows-98-UI mit CSS nachgebildet wird

  • 98.css ist eine CSS-Bibliothek zum Erstellen von Interfaces, die wie Windows 98 aussehen
  • Das Projekt ist auf GitHub zu finden
  • Barrierefreiheit beruht stärker auf einer semantischen HTML-Struktur als auf separaten Skripten
    • Für Buttons sollte <button> verwendet werden
    • Eingabeelemente benötigen ein entsprechendes <label>
    • Icon-Buttons vermitteln ihre Absicht über aria-label
  • Teile des Element-Stylings lassen sich überschreiben, während das grundlegende Erscheinungsbild erhalten bleibt
    • So kann man etwa das Padding von Buttons vergrößern oder Eingabelabels eine Farbe geben

Installation und Framework-Integration

  • 98.css wendet den Windows-98-Stil nur mit CSS, ohne JavaScript, auf HTML-Elemente an
  • Es kann unabhängig von Frontend-Frameworks verwendet werden
  • Als Beispiele werden eine React-Nutzung und eine Vanilla-JavaScript-Nutzung bereitgestellt
  • Der schnellste Weg ist, das Stylesheet von unpkg einzubinden
<link rel="stylesheet" href="https://unpkg.com/98.css">;

npm install 98.css

Grundlegende Form Controls

  • Button

    • Standard-Buttons sind 75px breit und 23px hoch, mit erhabenen äußeren und inneren Rahmen sowie standardmäßig 12px horizontalem Padding
    • Durch Hinzufügen der Klasse default lässt sich visuell vermitteln, welche Standardaktion in Windows 98 mit der Enter-Taste ausgeführt würde
    • Im angeklickten Zustand wechselt der erhabene Rahmen in eine gedrückte Darstellung
    • Deaktivierte Buttons behalten denselben erhabenen Rahmen, aber das Label wirkt ausgegraut
    • Der Fokus wird durch einen gestrichelten Rahmen 4px innerhalb des Button-Inhalts angezeigt

  • Checkbox

    • Checkboxen stehen für unabhängige oder nicht gegenseitig ausschließende Auswahlmöglichkeiten
    • Bei Auswahl erscheint ein Häkchen-Icon in einem abgesenkten Panel, daneben ein Label für die Option
    • Hinter <input type="checkbox"> sollte ein <label> stehen, dessen for-Attribut auf die id des Eingabefelds zeigt
    • Die Attribute checked und disabled können verwendet werden
    • Beim Gruppieren mehrerer Eingaben wird jede Eingabe in einen Container mit der Klasse field-row gewickelt, um die Abstände anzugleichen

  • Option Button

    • Radiobuttons sind Controls, mit denen genau eine Option aus einer begrenzten Auswahl gewählt wird
    • Sie werden mit <input type="radio"> verwendet; dasselbe name-Attribut fasst sie zu einer Gruppe zusammen
    • Wie Checkboxen können sie mit field-row umschlossen werden, um konsistente Abstände zwischen Eingaben zu erhalten
    • Unterstützt die Attribute checked und disabled

  • Group Box

    • Eine Group Box ist ein rechteckiger Rahmen zum Organisieren mehrerer Controls
    • Sie wird verwendet, indem Elemente mit fieldset umschlossen werden, und bietet einen abgesenkten äußeren sowie einen erhabenen inneren Rahmen
    • Ein legend kann innerhalb des fieldset platziert werden, um die Gruppe zu beschriften

Texteingabe, Slider und Dropdowns

  • TextBox

    • Eine Textbox ist ein rechteckiges Control, in das Nutzer Text eingeben oder darin bearbeiten können
    • Einzeilige Eingaben werden mit <input type="text"> gerendert
    • Empfohlen wird, ein passendes <label> mit korrektem for-Attribut bereitzustellen und beide in einen field-row-Container zu packen
    • Mit der Klasse field-row-stacked lässt sich das Label über der Eingabe statt daneben platzieren
    • Mehrzeilige Eingaben verwenden textarea
    • Standard-HTML-Attribute wie disabled und value können genutzt werden

  • Slider

    • Ein Slider besteht aus einer Leiste, die den Einstellbereich zeigt, und einem Indikator für den aktuellen Wert
    • Er wird mit <input type="range"> gerendert
    • Mit der Klasse has-box-indicator kann der Standardindikator durch einen Box-Indikator ersetzt werden
    • Wird er von einem div mit is-vertical umschlossen, erscheint er als vertikaler Slider
    • Um die Länge eines vertikalen Sliders zu ändern, müssen die width des input und die height des div angepasst werden

  • Dropdown

    • Ein Dropdown-Listenfeld erlaubt die Auswahl genau eines Elements aus einer Liste
    • Im geschlossenen Zustand zeigt es den aktuellen Wert; Nutzer öffnen die Liste, um den Wert zu ändern
    • Es wird mit select- und option-Elementen gerendert
    • Standardmäßig ist die erste Option ausgewählt; durch selected auf einer bestimmten option lässt sich die Vorauswahl ändern

Aufbau von Fenstern im Windows-98-Stil

  • Title Bar

    • Die Titelleiste befindet sich innerhalb des oberen Fensterrands und identifiziert den Inhalt des Fensters
    • Sie setzt sich aus den Klassen title-bar, title-bar-text und title-bar-controls zusammen
    • Der Schließen-Button verwendet aria-label="Close", um assistiven Technologien die Absicht zu vermitteln
    • Auch aria-labels wie Minimize, Maximize, Restore und Help können verwendet werden
    • Zu jedem aria-label gibt es eine passende Styling-Klasse, sodass auch bei aria-label-Texten in anderen Sprachen keine Probleme bei Rendering, Barrierefreiheit oder Lokalisierung entstehen
    • Der Maximieren-Button kann mit disabled deaktiviert werden
    • Durch Hinzufügen der Klasse inactive kann die Titelleiste als inaktiv dargestellt werden

  • Window contents

    • Die Klasse window erstellt einen Fenstercontainer für die Titelleiste und bietet erhabene äußere und innere Rahmen sowie Padding
    • Durch Angabe von width im Container-Stil lässt sich die Fenstergröße frei anpassen
    • Der Inhalt unterhalb der Titelleiste kann mit der Klasse window-body gezeichnet werden

  • Status Bar

    • Die Statusleiste befindet sich normalerweise am unteren Rand eines Fensters und zeigt aktuellen Status oder Kontextinformationen an
    • Die Statusleiste wird mit der Klasse status-bar gerendert
    • Für jedes Textelement wird die Klasse status-bar-field verwendet
    • Die Beispiele enthalten Statusfelder wie Press F1 for help, Slide 1 und CPU Usage: 14%

Listen, Tabs, Tabellen und Fortschrittsanzeige

  • TreeView

    • Ein TreeView ist ein spezielles Listenfeld, das eine Menge von Objekten entsprechend logischer hierarchischer Beziehungen als eingerückte Gliederung anzeigt
    • Es wird gerendert, indem einem ul-Element die Klasse tree-view hinzugefügt wird
    • In untergeordnete li-Elemente kann beliebiger Inhalt eingefügt werden
    • Verschachtelte ul-Elemente zeigen die Baumstruktur mit gestrichelten Linien und Einrückungen
    • Aufklappbare Abschnitte können erstellt werden, indem die untergeordnete Liste in ein details-Element gelegt wird

  • Tabs

    • Tab-Controls werden verwendet, um mehrere logische Seiten oder Informationsbereiche innerhalb desselben Fensters zu definieren
    • Ein menu-Element erhält role="tablist", die untergeordneten li-Elemente erhalten role="tab"
    • Die Tab-Verwaltung muss durch eigenen JavaScript-Code erfolgen
    • Dem aktiven Tab kann aria-selected="true" hinzugefügt werden
    • Mehrzeilige Tabs lassen sich erstellen, indem dem menu-Tag die Klasse multirows hinzugefügt wird

  • TableView

    • Ein TableView wird mit einem table-Element gerendert
    • Um passende Rahmen und einen Overflow-Container bereitzustellen, wird es in ein div mit der Klasse sunken-panel gewickelt
    • Mit etwas zusätzlichem Skript lässt sich der TableView interaktiv machen
    • Wird dem table die Klasse interactive gegeben, zeigt es beim Hover über Body-Zeilen einen Pointer-Cursor
    • Eine Zeile mit der Klasse highlighted wirkt ausgewählt

  • Progress Indicator

    • Fortschrittsbalken werden verwendet, um den Fertigstellungsgrad langer Aufgaben anzuzeigen
    • Standardmäßig ist es ein solider Fortschrittsbalken
    • Mit der Klasse segmented kann ein segmentierter Fortschrittsbalken deklariert werden
    • Der Fortschritt wird über den width-Stil von progress-indicator-bar angezeigt

Feldrahmen und Open-Source-Beteiligung

  • Field borders

    • Textboxen, Checkboxen, Dropdown-Listenfelder, Spin Boxes und Listenfelder verwenden den Feldrahmenstil
    • Derselbe Stil kann auch für Arbeitsbereiche innerhalb von Fenstern genutzt werden
    • Feldrahmen verwenden einen abgesenkten äußeren Rahmen und einen abgesenkten inneren Rahmen
    • Das Innere der meisten Controls verwendet die Button-Highlight-Farbe
    • Wenn Textfelder wie Textboxen und Combo Boxes schreibgeschützt oder deaktiviert sind, verwendet das Innere die Button-Face-Farbe
    • Für allgemeine Zwecke werden die Klassen field-border, field-border-disabled und status-field-border bereitgestellt
    • Diese Klassen definieren nur Rahmen, Hintergrundfarbe und minimales Padding, daher muss zusätzliches Padding normalerweise selbst angegeben werden

  • Lizenz und Beiträge

    • 98.css ist ein Projekt unter der MIT-Lizenz
    • Zum Prüfen und Melden von Bugs dient die GitHub-Issues-Seite
    • Pull Requests sind willkommen; insbesondere wird angeboten, Menschen, die neu zu Open Source beitragen, Code Reviews zu geben
    • Das Projekt versteht sich als Ort, um unterhaltsame Open-Source-Erfahrung zu sammeln

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-11-07
Hacker-News-Kommentare

  • Ich habe etwas Ähnliches gebaut, mit 3.11, 95, 2000, XP, CDE, Mac OS 9 und allen jeweiligen Standard-Farbpaletten: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
    Der Fokus lag weniger auf pixelgenauer Perfektion als darauf, auch in modernen Umgebungen wie hochauflösenden Monitoren gut zu funktionieren und gut auszusehen
    Deshalb habe ich alle Icons und Symbole als SVG neu erstellt, und als ich XP und Mac OS 9 hinzugefügt hatte, habe ich es bei Show HN gepostet, aber es bekam nicht viel Aufmerksamkeit

    • Gefällt mir, aber das Windows-2000-Theme wirkt leicht daneben, weil der Titeltext zu schwer oder fett ist
      Für mich persönlich war Windows 2000 der Höhepunkt des UI-Designs
    • Extrem cool, und die Qualität, das Theme-Handling und die Einfachheit der Implementierung sind großartig
      Zusätzlich würde ich gern ein Daten-Tabellen-Theme sehen, idealerweise sogar mit interaktiven Tabellen, die sich wie Listen und Grids verhalten
    • Hotdog stand!
      https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
    • 98.css war die funktionsreichste Retro-CSS-Bibliothek, die ich finden konnte, deshalb habe ich sie für eine kleine App verwendet, aber jetzt möchte ich auch die Windows-3.1-Farbpalette dieses Projekts ausprobieren
    • Das Projekt ist wirklich schön und sehr rund, mit einer gelungenen Zuordnung jedes einzelnen UI-Elements

  • Ich bin der Ersteller. Freut mich, dass das wieder hochkommt
    Das war mein Projekt zur Erholung von Burnout, und ich habe dazu kürzlich ein paar Gedanken aufgeschrieben: https://notes.jordanscales.com/98-css-reflections

    • Ich habe 98.css einmal für eine ziemlich einfache Web-App verwendet, um etwas aus meiner Kindheit nachzubilden, und dafür passte es perfekt
      [0]: https://www.mathsheets.net/
    • Hoffentlich geht es dir inzwischen besser
      Interessant ist, dass Retro-Computing wie alte Spiele oder Betriebssysteme tröstlich und sogar therapeutisch sein kann
      Ich habe ein ähnliches Gefühl, wenn ich Gameboy- oder Nintendo-Spiele aus meiner Kindheit im Emulator spiele oder Macintosh System 9 starte; Pico-8, SerenityOS und TempleOS kommen mir auch in den Sinn
      Gemeinsam ist ihnen eine nostalgische Computing-Umgebung, die der Benutzer vollständig verstehen und kontrollieren kann; vielleicht gibt es darin auch tiefere psychologische Dynamiken, etwa eine sichere Sandbox als therapeutisches Werkzeug
      In heutiger Technologie und Gesellschaft gibt es so viele feindselige Dark Patterns, dass es eine große Erleichterung ist, physische und mentale Räume zu finden, die auf das Wohlbefinden der Nutzer ausgelegt sind
    • Die bisher genaueste Windows-98-Nachbildung, die ich gesehen habe
      Schön wäre auch etwas für Windows 2000 und Windows XP

  • Dinge, die ich gesammelt habe:
    The Sims https://thesimscss.inbn.dev/
    Windows 98 https://jdan.github.io/98.css/
    Windows XP https://botoxparty.github.io/XP.css/
    Windows 7 https://khang-nd.github.io/7.css/
    Edward Tufte https://edwardtufte.github.io/tufte-css/

    • Von Tufte OS höre ich zum ersten Mal :)

  • 98.css ist aus gutem Grund ein HN-Klassiker geworden
    Frühere Diskussionen:
    https://news.ycombinator.com/item?id=33310554 - Oktober 2022, 179 Kommentare
    https://news.ycombinator.com/item?id=22940564 - April 2020, 211 Kommentare
    Ebenfalls sehenswert sind HyperCard Simulator und Decker
    https://hn.algolia.com/?q=hypercard

  • Ich meine mich zu erinnern, dass Microsoft in den späten 90ern eingebaute CSS-Farbnamen hatte, die sich an Windows-Desktop-Themes und -Farben anpassten
    Ich weiß nicht, ob das heute noch funktioniert; in der IDE werden sie alle rot markiert, also offenbar nicht
    Mit Werten wie windowtext, appworkspace, menutext, threedlightshadow, threedshadow, threedface konnte man Web-UIs bauen, die zum Look-and-Feel des Desktop des Benutzers passten
    Ich habe das 1998 in browserbasierten Intranet-Apps so verwendet, und dadurch sahen sie etwas nativer aus

  • Dieser Stil harmoniert nicht besonders gut mit nicht standardmäßigen DPI-Werten
    Wenn der Monitor beispielsweise auf 150 % Skalierung eingestellt ist, kann man in der Browser-Konsole Folgendes ausführen, um es auf physische Pixel auszurichten:
    with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`
    Wenn man die Skalierung mit einer ganzen Zahl multipliziert, erhält man ein scharf vergrößertes Erscheinungsbild, und auch wenn es nicht zu 100 % perfekt ist, wirkt es deutlich näher am beabsichtigten Rendering

    • with so zu verwenden ist zugleich beängstigend und sehr erfrischend
      Ich mag es und hasse es gleichzeitig

  • Ich glaube, crowdwave verwendet davon ein bisschen: https://www.crowdwave.com

  • Ebenfalls sehenswert: https://botoxparty.github.io/XP.css und https://khang-nd.github.io/7.css

    • Der deutlichste Unterschied zwischen diesen Projekten und dem eingereichten Link gegenüber modernen UIs ist, dass es viel weniger Leerraum gibt
      Heutzutage ist es fast schon ein Mantra, dass man Luft zum Atmen brauche, etwa zwischen den Optionen einer Radiobutton-Gruppe, aber die engen Abstände alter UIs wirken auf mich ehrlicher, respektvoller gegenüber dem Endnutzer und informationsdichter
      Ich will nicht alle Innovationen über Bord werfen, aber ich vermisse alte UIs oft
    • Die Variante, die wie Windows 7 aussieht, wirkt am ausgereiftesten und enthält auch etliche Elemente, die die anderen nicht haben, etwa Fortschrittsbalken oder Menüs
      Die Fensterdekorationen von Windows 7 mochte ich zwar nicht, aber der Rest wäre selbst in einer Electron-App gar nicht schlecht
    • Der Link zur XP-Version ist wirklich erfreulich
      Die Windows-XP-Oberfläche war von allen Windows-UIs die beste und gerade modern genug, um elegant zu wirken, hatte dabei aber genügend Kontrast, um leicht zu sehen, zu lesen und zu verstehen zu sein
      Die Windows-7-Oberfläche war zu glänzend und stellte das Aussehen über die Lesbarkeit, und Windows 98 war zu altbacken und zu grau in grau, wodurch es ebenfalls an Kontrast mangelte
    • Ich werbe auch mal für meine eigene. Es ist nicht so modular oder umfangreich wie die oben genannten, passt aber ziemlich gut zum Thema:
      https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
      https://world-playground-deceit.net/
      Wenn ich so etwas sehe, bekomme ich Lust, es bis zum Ende durchzuziehen
    • Jetzt fehlt nur noch eine Windows-3.x-Version

  • Schon rein optisch scheint das nicht MS Sans Serif zu sein, wie es unter Windows 95 und Windows 98 gerendert wurde

  • Ich halte das für deutlich besser als das, was nach Jahren von UX/UI-„Forschung“ und „Verbesserungen“ herausgekommen ist
    Es liegt auch nicht daran, dass ich zur alten Generation gehöre; 1998 war ich ein Jahr alt
    Ich mag einfach keine Buttons, die nicht wie Buttons aussehen, Tabs, die nicht wie Tabs aussehen, und Textfelder, bei denen man erst draufklicken muss, um zu merken, dass man sie bearbeiten kann

    • Ich weiß nicht, ob seit Windows 95 tatsächlich viel UX/UI-Forschung in Betriebssystem-Oberflächen eingeflossen ist
      Apple hat für MacOSX sicherlich einiges erforscht, aber in den letzten 20 Jahren wirkte es, besonders auf Mobilgeräten, oft so, als würden Funktionen einfach hineingeworfen, ohne jedes Konzept von Auffindbarkeit oder Konsistenz
      Vor allem scheint mir der Wunsch der Unternehmen nach „konsistentem Branding“ oder einem „einzigartigen Look“ eine Hauptursache vieler Probleme zu sein
    • Allerdings mag ich schwarzen Text auf dunkelgrauem Hintergrund nicht
      Und auf der Website gibt es auch einen „show code“-Button, der sich als normaler Text tarnt