98.css – un système de design CSS qui recrée l’interface de Windows 98

 (jdan.github.io)
3 points par GN⁺ 2024-11-07 | 1 commentaires | Partager sur WhatsApp
  • 98.css permet de créer des interfaces web qui ressemblent à Windows 98 en CSS uniquement, afin de reproduire fidèlement l’ancienne UI de bureau
  • L’accessibilité repose sur du HTML sémantique, avec comme principe l’usage correct des attributs ARIA pour les boutons, labels et boutons d’icône
  • Sans inclure de JavaScript, il peut s’intégrer indépendamment du framework choisi à des projets React, JavaScript pur ou HTML classique
  • Il fournit des composants au style Windows 98 comme des boutons, cases à cocher, boutons radio, fenêtres, arborescences, onglets, vues tabulaires et barres de progression
  • Il peut être utilisé via npm, les releases GitHub ou unpkg, et est publié sous licence MIT avec accueil des signalements de bugs et des pull requests

Recréer l’interface de Windows 98 avec CSS

  • 98.css est une bibliothèque CSS conçue pour créer des interfaces ayant l’apparence de Windows 98
  • Le projet est disponible sur GitHub
  • L’accessibilité repose sur une structure HTML sémantique plutôt que sur des scripts dédiés
    • les boutons doivent utiliser <button>
    • les éléments de saisie doivent avoir un <label> correspondant
    • les boutons d’icône transmettent leur intention via aria-label
  • Il est possible de surcharger partiellement le style des éléments tout en conservant leur apparence de base
    • par exemple, augmenter le padding d’un bouton ou ajouter une couleur au label d’un champ

Installation et intégration aux frameworks

  • 98.css applique un style Windows 98 aux éléments HTML uniquement avec du CSS, sans JavaScript
  • Il peut être utilisé indépendamment du framework frontend
  • Des exemples sont fournis avec React et en JavaScript pur
  • La manière la plus rapide de l’utiliser consiste à charger la feuille de style depuis unpkg
<link rel="stylesheet" href="https://unpkg.com/98.css">;

npm install 98.css

Contrôles de formulaire de base

  • Button

    • Le bouton standard mesure 75 px de large et 23 px de haut, avec des bordures externe et interne en relief ainsi qu’un padding horizontal par défaut de 12 px
    • L’ajout de la classe default permet d’indiquer visuellement l’action par défaut déclenchée par la touche Enter dans Windows 98
    • À l’état cliqué, les bordures en relief prennent un aspect enfoncé
    • Un bouton désactivé conserve les mêmes bordures en relief, mais son libellé apparaît estompé
    • Le focus est indiqué par une bordure en pointillés placée à 4 px à l’intérieur du contenu du bouton

  • Checkbox

    • Les cases à cocher représentent des sélections indépendantes ou non exclusives
    • Lorsqu’elles sont sélectionnées, une icône de coche apparaît dans un panneau enfoncé, avec un label indiquant l’option à côté
    • Après <input type="checkbox">, il faut inclure un <label> dont l’attribut for pointe vers l’id du champ
    • Les attributs checked et disabled peuvent être utilisés
    • Pour grouper plusieurs champs, il faut envelopper chaque entrée dans un conteneur portant la classe field-row afin d’uniformiser l’espacement

  • Option Button

    • Les boutons radio servent à choisir une seule option parmi un ensemble limité
    • Ils s’utilisent avec <input type="radio"> et sont regroupés en partageant le même attribut name
    • Comme pour les cases à cocher, on peut les entourer de field-row pour conserver un espacement cohérent entre les champs
    • Les attributs checked et disabled sont pris en charge

  • Group Box

    • Le group box est un cadre rectangulaire servant à organiser plusieurs contrôles
    • Il s’utilise en enveloppant les éléments dans un fieldset, qui fournit une bordure externe enfoncée et une bordure interne en relief
    • Un legend placé dans le fieldset permet d’ajouter un libellé au groupe

Saisie de texte, slider et menu déroulant

  • TextBox

    • La zone de texte est un contrôle rectangulaire permettant à l’utilisateur de saisir ou modifier du texte
    • La saisie sur une seule ligne est rendue avec <input type="text">
    • Il est recommandé de fournir un <label> correspondant avec le bon attribut for, puis d’entourer les deux d’un conteneur field-row
    • La classe field-row-stacked permet de placer le label au-dessus du champ plutôt qu’à côté
    • Les saisies multiligne utilisent textarea
    • Les attributs HTML standard comme disabled ou value peuvent être utilisés

  • Slider

    • Le slider est composé d’une barre représentant la plage d’ajustement et d’un indicateur affichant la valeur actuelle
    • Il est rendu avec <input type="range">
    • La classe has-box-indicator permet de remplacer l’indicateur par défaut par un indicateur en forme de boîte
    • Il peut être affiché verticalement en l’enveloppant dans un div utilisant is-vertical
    • Pour modifier la longueur d’un slider vertical, il faut ajuster la width de l’input et la height du div

  • Dropdown

    • La liste déroulante permet de sélectionner un seul élément dans une liste
    • À l’état fermé, elle affiche la valeur courante, puis l’utilisateur ouvre la liste pour la modifier
    • Elle est rendue avec les éléments select et option
    • La valeur par défaut est la première option, mais on peut la changer en ajoutant selected à une option spécifique

Composer des fenêtres au style Windows 98

  • Title Bar

    • La barre de titre se trouve sur le bord supérieur interne de la fenêtre et identifie son contenu
    • Elle se compose des classes title-bar, title-bar-text et title-bar-controls
    • Le bouton de fermeture utilise aria-label="Close" pour transmettre son intention aux technologies d’assistance
    • Des aria-label comme Minimize, Maximize, Restore et Help peuvent aussi être utilisés
    • Chaque aria-label dispose d’une classe de style correspondante, ce qui évite des problèmes de rendu, d’accessibilité ou de localisation même si le texte de aria-label est dans une autre langue
    • Le bouton d’agrandissement peut être désactivé avec disabled
    • L’ajout de la classe inactive permet d’afficher une barre de titre inactive

  • Window contents

    • La classe window crée le conteneur de fenêtre qui accueille la barre de titre, avec des bordures externe et interne en relief ainsi qu’un padding
    • La taille de la fenêtre peut être librement ajustée en définissant une width sur le style du conteneur
    • Le contenu sous la barre de titre peut être rendu avec la classe window-body

  • Status Bar

    • La barre d’état se situe généralement en bas d’une fenêtre et affiche des informations de statut ou de contexte
    • Elle est rendue avec la classe status-bar
    • Chaque élément de texte utilise la classe status-bar-field
    • L’exemple inclut des champs comme Press F1 for help, Slide 1 et CPU Usage: 14%

Listes, onglets, tableaux et progression

  • TreeView

    • La vue arborescente est une boîte de liste spécialisée qui affiche un ensemble d’objets sous la forme d’un plan indenté suivant une relation hiérarchique logique
    • Elle est rendue en ajoutant la classe tree-view à un élément ul
    • Les éléments enfants li peuvent contenir le contenu souhaité
    • Des ul imbriqués affichent la structure arborescente grâce à des bordures en pointillés et à l’indentation
    • Des sections dépliables peuvent être créées en plaçant la liste enfant dans un élément details

  • Tabs

    • Le contrôle d’onglets sert à définir plusieurs pages logiques ou sections d’information dans une même fenêtre
    • Il utilise un élément menu avec role="tablist", et des éléments enfants li avec role="tab"
    • La gestion des onglets doit être prise en charge par le code JavaScript de l’utilisateur
    • Il suffit d’ajouter aria-selected="true" à l’onglet actif
    • Des onglets sur plusieurs lignes peuvent être créés en ajoutant la classe multirows à la balise menu

  • TableView

    • La vue tabulaire est rendue avec un élément table
    • Pour fournir des bordures appropriées et un conteneur avec overflow, elle doit être enveloppée dans un div portant la classe sunken-panel
    • Avec un peu de script en plus, la vue tabulaire peut devenir interactive
    • En ajoutant la classe interactive à table, le curseur pointeur s’affiche au survol des lignes du corps du tableau
    • En ajoutant la classe highlighted à une ligne, celle-ci apparaît comme sélectionnée

  • Progress Indicator

    • La barre de progression sert à afficher le pourcentage d’achèvement d’une tâche longue
    • Le style par défaut est une barre de progression pleine
    • La classe segmented permet de déclarer une barre de progression segmentée
    • La progression est indiquée via le style width de progress-indicator-bar

Bordures de champ et participation open source

  • Field borders

    • Les zones de texte, cases à cocher, listes déroulantes, spin boxes et listes utilisent le style de bordure de champ
    • Le même style peut aussi être appliqué à la zone de travail à l’intérieur d’une fenêtre
    • Les bordures de champ utilisent une bordure externe enfoncée et une bordure interne enfoncée
    • L’intérieur de la plupart des contrôles utilise la couleur button highlight
    • Lorsque des champs de texte comme les text boxes et combo boxes sont en lecture seule ou désactivés, leur intérieur utilise la couleur button face
    • Les classes field-border, field-border-disabled et status-field-border sont fournies pour un usage général
    • Ces classes ne définissent que les bordures, la couleur de fond et un padding minimal, il faut donc généralement définir soi-même un padding supplémentaire

  • Licence et contribution

    • 98.css est un projet sous licence MIT
    • La vérification et le signalement de bugs passent par la page GitHub issues
    • Les pull requests sont bienvenues, et le projet précise fournir des revues de code, en particulier aux personnes qui contribuent pour la première fois à l’open source
    • Le projet vise à être un endroit où acquérir une expérience open source agréable

À lire aussi

1 commentaires

 
GN⁺ 2024-11-07
Avis sur Hacker News

  • J’ai fait quelque chose de similaire qui inclut 3.11, 95, 2000, XP, CDE, Mac OS 9 et toutes leurs palettes de couleurs par défaut : https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
    L’objectif n’était pas une reproduction parfaite au pixel près, mais plutôt quelque chose qui fonctionne bien et reste agréable dans des environnements modernes, comme les écrans haute résolution
    J’ai donc refait toutes les icônes et tous les symboles en SVG, et quand j’ai ajouté XP et Mac OS 9, je l’ai publié sur Show HN, mais ça n’a pas suscité beaucoup d’intérêt

    • J’aime bien, mais le thème Windows 2000 me semble un peu décalé : le texte du titre est trop épais ou trop gras
      Personnellement, Windows 2000 a été le sommet du design d’UI
    • C’est vraiment superbe, avec une excellente qualité, une très bonne gestion des thèmes et une implémentation simple
      Ce que j’aimerais voir en plus, ce serait un thème pour les tableaux de données, et même des tableaux interactifs qui se comportent comme des listes et des grilles
    • Hotdog stand !
      https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
    • J’ai utilisé 98.css pour une petite appli parce que c’était la bibliothèque CSS rétro la plus riche en fonctionnalités que j’aie trouvée, mais ce projet me donne envie d’essayer aussi la palette de couleurs Windows 3.1
    • Le projet est vraiment beau et très abouti, avec un excellent mapping de chaque élément d’UI

  • C’est moi qui l’ai créé. Content de le voir remonter
    C’était mon projet de récupération après burnout, et j’ai récemment écrit quelques réflexions à ce sujet : https://notes.jordanscales.com/98-css-reflections

    • Il y a quelque temps, j’ai utilisé 98.css dans une appli web assez simple pour recréer quelque chose de mon enfance, et ça convenait parfaitement à cet usage
      [0] : https://www.mathsheets.net/
    • J’espère que tu vas mieux
      Je trouve intéressant que le rétrocomputing, comme les vieux jeux ou les anciens systèmes d’exploitation, puisse être réconfortant, voire thérapeutique
      J’ai ressenti quelque chose de similaire en jouant sur émulateur aux jeux Gameboy et Nintendo de mon enfance, ou en lançant Macintosh System 9, et ça me fait aussi penser à Pico-8, SerenityOS et TempleOS
      Leur point commun est d’offrir un environnement informatique rétro que l’utilisateur peut entièrement comprendre et contrôler ; il y a peut-être aussi une dynamique psychologique plus profonde, comme celle d’un bac à sable sûr en tant qu’outil thérapeutique
      La technologie et la société d’aujourd’hui regorgent de dark patterns hostiles, donc trouver des espaces physiques et mentaux conçus pour le confort de l’utilisateur procure un grand soulagement
    • C’est la reproduction de Windows 98 la plus fidèle que j’aie vue jusqu’ici
      Ce serait bien d’en avoir aussi pour Windows 2000 et Windows XP

  • Quelques ressources que j’ai rassemblées :
    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/

    • Je n’avais jamais entendu parler de Tufte OS :)

  • 98.css est devenu un classique de HN pour de bonnes raisons
    Discussions précédentes :
    https://news.ycombinator.com/item?id=33310554 - octobre 2022, 179 commentaires
    https://news.ycombinator.com/item?id=22940564 - avril 2020, 211 commentaires
    À voir aussi dans le même esprit : HyperCard Simulator et Decker
    https://hn.algolia.com/?q=hypercard

  • Je me souviens qu’à la fin des années 90, Microsoft avait des noms de couleurs CSS intégrés qui correspondaient aux thèmes et couleurs du bureau Windows
    Je ne sais pas si ça fonctionne encore aujourd’hui ; dans l’IDE, tout apparaît en rouge, donc on dirait que non
    On pouvait utiliser des valeurs comme windowtext, appworkspace, menutext, threedlightshadow, threedshadow, threedface pour créer des UI web assorties au look and feel du bureau de l’utilisateur
    Je m’en étais servi en 1998 dans une appli intranet basée sur le navigateur, et ça la rendait un peu plus native

  • Ce style ne fonctionne pas bien avec les DPI non standard
    Par exemple, si vous réglez l’échelle du moniteur à 150 %, vous pouvez essayer d’exécuter ceci dans la console du navigateur pour l’aligner sur les pixels physiques :
    with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`
    En multipliant l’échelle par un entier, on peut obtenir un rendu agrandi plus net ; ce n’est pas parfait à 100 %, mais cela paraît beaucoup plus proche du rendu voulu

    • Utiliser with comme ça est à la fois effrayant et très rafraîchissant
      J’aime et je déteste à la fois

  • Il semble que crowdwave en utilise un peu : https://www.crowdwave.com

  • À voir aussi : https://botoxparty.github.io/XP.css et https://khang-nd.github.io/7.css

    • Ce qui distingue nettement ces projets, ainsi que le lien soumis, des UI modernes, c’est qu’il y a beaucoup moins d’espacement
      Aujourd’hui, l’idée qu’il faut de l’espace pour respirer, par exemple entre les choix d’un groupe de boutons radio, est presque devenue un mantra, mais les espacements serrés des anciennes UI semblent plus honnêtes, plus respectueux de l’utilisateur final et plus denses en information
      Je ne veux pas jeter toutes les innovations, mais les anciennes UI me manquent souvent
    • Celui qui ressemble à Windows 7 semble le plus abouti, et il comporte aussi pas mal d’éléments absents des autres, comme les barres de progression ou les menus
      Je n’aimais pas l’habillage des fenêtres de Windows 7, mais le reste pourrait très bien convenir à une application Electron
    • Le lien pour XP fait vraiment plaisir
      L’UI de Windows XP était la meilleure de toutes les UI Windows : suffisamment moderne pour paraître élégante, tout en gardant du contraste, ce qui la rendait facile à voir, à lire et à comprendre
      L’UI de Windows 7 était trop brillante et privilégiait l’apparence à la lisibilité, tandis que Windows 98 était trop daté, tout en gris, avec aussi un manque de contraste
    • J’en profite pour faire la promo du mien. Il n’est pas aussi isolé ni aussi vaste que ceux ci-dessus, mais il colle assez bien au sujet :
      https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
      https://world-playground-deceit.net/
      Voir ce genre de choses donne envie d’aller jusqu’au bout
    • Il ne manque plus qu’une version Windows 3.x

  • Rien qu’à l’œil, ça ne ressemble pas à MS Sans Serif tel qu’il était rendu sous Windows 95 et Windows 98

    • Reproduire d’anciennes polices dans les navigateurs modernes est un problème difficile
      https://web.archive.org/web/20230603234837/https://vistaserv...
    • Le caractère pixellisé a lui aussi été conservé
      La feuille de style XP[1] liée dans un autre commentaire dessine le texte et les formes en haute résolution, ce qui réduit les contraintes tout en conservant l’esprit de l’UI
      La raison pour laquelle j’aime les UI de type 98, ce n’est pas la basse résolution, mais la clarté et la simplicité
      [1] https://news.ycombinator.com/item?id=42056921

  • Je trouve ça bien meilleur que ce qui est sorti après des années de “recherche” et d’“améliorations” en UX/UI
    Ce n’est pas non plus parce que je ferais partie d’une vieille génération : j’avais un an en 1998
    Je déteste simplement les boutons qui ne ressemblent pas à des boutons, les onglets qui ne ressemblent pas à des onglets, et les champs de texte dont on ne découvre qu’ils sont modifiables qu’après avoir cliqué dessus

    • Je ne sais pas si, depuis Windows 95, beaucoup de recherches UX/UI ont réellement été intégrées aux interfaces des systèmes d’exploitation
      Apple a sans doute fait quelques recherches pour MacOSX, mais ces vingt dernières années, surtout sur mobile, les fonctionnalités ont souvent semblé jetées là sans notion de découvrabilité ni de cohérence
      Plus que tout, j’ai l’impression que beaucoup de problèmes viennent du fait que les entreprises voulaient une “identité de marque cohérente” ou une “apparence propre”
    • Cela dit, je n’aime pas le texte noir sur fond gris foncé
      Et ce site web comporte aussi un bouton “show code” déguisé en texte ordinaire