98.css – un système de design qui reproduit fidèlement d’anciennes interfaces utilisateur

 (jdan.github.io)
3 points par GN⁺ 2024-11-07 | 1 commentaires | Partager sur WhatsApp

  • Intro

    • 98.css est une bibliothèque CSS destinée à construire des interfaces dans le style de Windows 98.
    • Cette bibliothèque fait de l’accessibilité un objectif majeur et encourage un usage sémantique du HTML.
    • Elle applique un style au HTML sans JavaScript et est compatible avec divers frameworks frontend.

  • Components

    • Button
      • Le bouton de commande est un contrôle qui permet à l’application d’exécuter une action spécifique lorsque l’utilisateur clique dessus.
      • Il mesure par défaut 75px de large et 23px de haut, et sa bordure prend un aspect enfoncé lors du clic.
    • Checkbox
      • La case à cocher représente une sélection indépendante ou non exclusive.
      • L’utilisation conjointe de la case à cocher et de son label améliore l’accessibilité.
    • OptionButton
      • Le bouton d’option est un bouton radio permettant de choisir une option parmi un ensemble limité.
      • Les boutons d’option d’un même groupe sont regroupés en partageant le même attribut name.
    • GroupBox
      • La boîte de groupe est un cadre rectangulaire utilisé pour organiser un ensemble de contrôles.
      • Elle est implémentée avec la balise fieldset et peut inclure un label.
    • TextBox
      • La zone de texte est un contrôle rectangulaire permettant à l’utilisateur de saisir ou modifier du texte.
      • Pour prendre en charge plusieurs lignes, on utilise l’élément textarea.
    • Slider
      • Le slider se compose d’une barre définissant une plage d’ajustement et d’un indicateur représentant la valeur actuelle.
      • Pour créer un slider vertical, on utilise la classe is-vertical.
    • Dropdown
      • La liste déroulante permet de sélectionner un seul élément dans une liste.
      • Elle est implémentée avec les éléments select et option.

  • Window

    • Title Bar
      • La barre de titre se situe sur le bord supérieur de la fenêtre et permet d’identifier son contenu.
      • Elle est implémentée avec les classes title-bar, title-bar-text et title-bar-controls.
    • Window contents
      • La fenêtre est construite à l’aide de la classe window, qui définit ses bordures.
      • Le contenu de la fenêtre est rendu avec la classe window-body.
    • Status Bar
      • La barre d’état se situe en bas de la fenêtre et affiche l’état actuel ou d’autres informations.
      • Elle est implémentée avec la classe status-bar.
    • TreeView
      • Le contrôle tree view affiche des objets sous forme de plan hiérarchique indenté selon leurs relations.
      • Il est implémenté avec l’élément ul et la classe tree-view.
    • Tabs
      • Le contrôle d’onglets est similaire aux séparateurs d’un classeur ou d’un carnet.
      • Il est implémenté avec l’élément menu et l’attribut [role=tablist].
    • TableView
      • La vue tableau est rendue à l’aide de l’élément table.
      • La classe sunken-panel fournit la bordure et le conteneur d’overflow.

  • Issues, Contributing, etc.

    • 98.css est distribué sous licence MIT.
    • Les bugs peuvent être signalés et de nouveaux rapports peuvent être soumis sur la page GitHub Issues.
    • Les contributions open source sont les bienvenues, et des revues de code sont proposées.

À lire aussi

1 commentaires

 
GN⁺ 2024-11-07
Commentaires sur Hacker News

  • Un utilisateur a créé un projet incluant les thèmes de couleurs par défaut de différents systèmes d’exploitation, et a recréé les icônes et symboles en SVG afin qu’ils fonctionnent bien et restent esthétiques sur les systèmes modernes

    • Le projet a été publié sur Show HN, mais n’a pas suscité beaucoup d’attention
    • Il pense que le titre du projet n’est peut-être pas très accrocheur

  • Un autre utilisateur a expliqué que ce projet était un projet de récupération après un burn-out, et a récemment consigné ses réflexions à ce sujet

  • Un utilisateur a rassemblé des styles CSS liés à plusieurs systèmes d’exploitation

    • Cela inclut des styles inspirés de The Sims, Windows 98, Windows XP, Windows 7 et Edward Tufte

  • 98.css est considéré comme un classique sur Hacker News et a déjà été discuté à plusieurs reprises

    • HyperCard Simulator et Decker valent aussi le détour

  • Avec des réglages DPI non natifs, le style peut ne pas bien fonctionner, et il est possible de l’ajuster aux pixels physiques en exécutant un certain code dans la console du navigateur

  • Un utilisateur a mentionné que, sous Windows 95 et Windows 98, cela ne ressemble pas à MS Sans Serif

  • Un autre utilisateur a indiqué que botoxparty.github.io/XP.css et khang-nd.github.io/7.css méritaient d’être consultés

  • À la fin des années 1990, Microsoft fournissait des couleurs CSS alignées sur les thèmes et couleurs du bureau Windows, ce qui permettait de faire correspondre l’interface web au bureau de l’utilisateur

  • Un utilisateur affirme que les styles du passé étaient meilleurs que la recherche et les améliorations UX/UI actuelles

    • Il préfère des boutons, onglets et champs de texte clairement visibles

  • Un thème Obsidian a été créé à partir des sources de 98.css, mais il est désormais abandonné