- 98.css सिर्फ CSS के जरिए Windows 98 जैसा दिखने वाला वेब इंटरफ़ेस बनाने देता है, जिससे पुराने desktop UI को बारीकी से फिर से बनाया जा सकता है
- Accessibility semantic HTML पर निर्भर करती है, और यह मानकर चलती है कि buttons, labels और icon buttons के ARIA attributes सही तरीके से इस्तेमाल किए गए हैं
- इसमें JavaScript शामिल नहीं है, इसलिए इसे framework choice से स्वतंत्र रूप से React, pure JavaScript और सामान्य HTML projects में जोड़ा जा सकता है
- Buttons, checkboxes, radio buttons, windows, treeview, tabs, tableview, progress bars आदि Windows 98-स्टाइल components उपलब्ध कराता है
- इसे npm, GitHub releases और unpkg से इस्तेमाल किया जा सकता है, और यह MIT license के तहत उपलब्ध है; bug reports और pull requests स्वीकार किए जाते हैं
Windows 98 UI को CSS में फिर से बनाने का तरीका
- 98.css Windows 98 जैसा दिखने वाला interface बनाने के लिए एक CSS library है
- Project को GitHub पर देखा जा सकता है
- Accessibility अलग script के बजाय semantic HTML structure पर निर्भर करती है
- Buttons के लिए
<button> इस्तेमाल करना चाहिए
- Input elements के लिए संबंधित
<label> होना चाहिए
- Icon buttons अपने उद्देश्य को
aria-label से बताते हैं
- मूल appearance बनाए रखते हुए element styles के कुछ हिस्सों को override किया जा सकता है
- Button padding बढ़ाई जा सकती है या input label में रंग जोड़ा जा सकता है
Installation और framework integration
- 98.css JavaScript के बिना, सिर्फ CSS से HTML elements पर Windows 98 style लागू करता है
- इसे frontend frameworks से स्वतंत्र रूप से इस्तेमाल किया जा सकता है
- उदाहरण के तौर पर React usage example और pure JavaScript usage example दिए गए हैं
- सबसे तेज़ तरीका unpkg से stylesheet लाना है
<link rel="stylesheet" href="https://unpkg.com/98.css">;
npm install 98.css
Basic form controls
-
Button
- Standard button की width 75px और height 23px होती है, और इसमें raised outer/inner borders व default 12px horizontal padding होती है
default class जोड़ने पर Windows 98 में Enter key से चलने वाली default action को visually दिखाया जा सकता है- Click state में raised border दबे हुए रूप में बदल जाता है
- Disabled button वही raised border बनाए रखता है, लेकिन label धुंधला दिखता है
- Focus को button content के अंदर 4px की position पर dotted border से दिखाया जाता है
-
Checkbox
- Checkbox स्वतंत्र या non-exclusive selection को दर्शाता है
- चयन होने पर sunken panel के अंदर check icon दिखता है, और उसके बगल में choice बताने वाला label होता है
<input type="checkbox"> के बाद ऐसा <label> शामिल होना चाहिए जिसका for attribute input के id की ओर इशारा करेchecked, disabled attributes इस्तेमाल किए जा सकते हैं- कई inputs को group करते समय हर input को
field-row class वाले container में wrap करके spacing मिलाई जाती है
-
Option Button
- Radio button सीमित विकल्पों में से सिर्फ एक चुनने वाला control है
- इसे
<input type="radio"> से इस्तेमाल किया जाता है, और same name attribute देने पर ये group बन जाते हैं
- Checkbox की तरह
field-row में wrap करके input spacing consistent रखी जा सकती है
checked, disabled attributes support करता है
-
Group Box
- Group box कई controls को organize करने वाला rectangular frame है
- Elements को
fieldset से wrap करके इस्तेमाल किया जाता है, और यह sunken outer border व raised inner border देता है
- Group label जोड़ने के लिए
fieldset के अंदर legend रखा जा सकता है
Text input, slider, dropdown
-
TextBox
- Text box एक rectangular control है जिसमें user text enter या edit करता है
- Single-line input
<input type="text"> के रूप में render होता है
- संबंधित
<label> और सही for attribute देना, और दोनों को field-row container में wrap करना recommended है
field-row-stacked class इस्तेमाल करने पर label input के बगल में नहीं, बल्कि ऊपर रखा जा सकता है- Multi-line input के लिए
textarea इस्तेमाल होता है
disabled, value जैसे standard HTML attributes इस्तेमाल किए जा सकते हैं
-
Slider
- Slider एक bar से बना होता है जो adjustment range दिखाता है, और एक indicator से जो current value दिखाता है
- यह
<input type="range"> के रूप में render होता है
has-box-indicator class से default indicator को box indicator में बदला जा सकता हैis-vertical इस्तेमाल करने वाले div से wrap करने पर यह vertical slider के रूप में दिखता है- Vertical slider की length बदलने के लिए
input की width और div की height adjust करनी होगी
-
Dropdown
- Dropdown list box list में से केवल एक item चुनने देता है
- Closed state में यह current value दिखाता है, और user list खोलकर value बदलता है
- यह
select और option elements से render होता है
- Default value पहला option होता है; किसी specific
option पर selected देने से default selection बदला जा सकता है
Windows 98 style window structure
-
Title Bar
- Title bar window के top edge के अंदर होती है और window content की पहचान कराती है
- इसे
title-bar, title-bar-text, title-bar-controls classes से बनाया जाता है
- Close button
aria-label="Close" इस्तेमाल करके assistive technologies को intent बताता है
Minimize, Maximize, Restore, Help जैसे aria-label भी इस्तेमाल किए जा सकते हैं- हर
aria-label के लिए corresponding styling class है, ताकि aria-label text किसी दूसरी भाषा में हो तब भी rendering, accessibility और localization की समस्या न हो
- Maximize button को
disabled से disable किया जा सकता है
inactive class जोड़ने पर यह inactive title bar जैसा दिख सकता है
-
Window contents
window class title bar रखने वाला window container बनाती है, और raised outer/inner borders व padding देती है- Container style में width specify करके window size को freely adjust किया जा सकता है
- Title bar के नीचे का content
window-body class से draw किया जा सकता है
-
Status Bar
- Status bar आम तौर पर window के bottom में होती है और current status या context information दिखाती है
status-bar class से status bar render होती है- हर text element के लिए
status-bar-field class इस्तेमाल होती है
- Examples में
Press F1 for help, Slide 1, CPU Usage: 14% जैसे status fields शामिल हैं
Lists, tabs, tables और progress indicators
-
TreeView
- Treeview एक special list box है जो objects के set को logical hierarchical relationship के अनुसार indented outline form में दिखाता है
- इसे
ul element पर tree-view class लगाकर render किया जाता है
- Child
li elements में मनचाहा content रखा जा सकता है
- Nested
ul डालने पर dotted border और indentation से tree structure दिखता है
- Expandable sections child list को
details element के अंदर रखकर बनाई जा सकती हैं
-
Tabs
- Tab control same window के अंदर कई logical pages या information sections define करने के लिए इस्तेमाल होता है
menu element पर role="tablist" लगाएं, और child li elements पर role="tab" लगाएं- Tab management user के JavaScript code से handle करना होगा
- Active tab में
aria-selected="true" जोड़ना काफी है
- Multi-line tabs बनाने के लिए
menu tag में multirows class जोड़ सकते हैं
-
TableView
- Tableview
table element से render होता है
- उचित border और overflow container देने के लिए इसे
sunken-panel class वाले div में wrap करें
- थोड़ी scripting जोड़ने पर tableview को interactive बनाया जा सकता है
table पर interactive class देने पर body rows के hover पर pointer cursor दिखता है- Row पर
highlighted class देने से यह selected जैसा दिखता है
-
Progress Indicator
- Progress bar लंबी task की completion percentage दिखाने के लिए इस्तेमाल होती है
- Default solid progress bar है
segmented class इस्तेमाल करके segmented progress bar declare की जा सकती हैprogress-indicator-bar की width style से progress rate दिखाया जाता है
Field borders और open-source participation
-
Field borders
- Text boxes, checkboxes, dropdown list boxes, spin boxes और list boxes field border style इस्तेमाल करते हैं
- Window के अंदर के work area पर भी वही style इस्तेमाल किया जा सकता है
- Field borders sunken outer border और sunken inner border इस्तेमाल करते हैं
- अधिकतर controls के अंदर button highlight color इस्तेमाल होता है
- Text box और combo box जैसे text fields जब read-only या disabled state में होते हैं, तो अंदर button face color इस्तेमाल होता है
- General use के लिए
field-border, field-border-disabled, status-field-border classes उपलब्ध हैं
- ये classes केवल border, background color और minimum padding define करती हैं, इसलिए आम तौर पर extra padding खुद specify करनी पड़ती है
-
License और contribution
- 98.css एक MIT licensed project है
- Bugs confirm और report करने के लिए GitHub issues page इस्तेमाल करें
- Pull requests का स्वागत है, और project ने खास तौर पर open source में नए लोगों को code review देने की बात कही है
- Project का उद्देश्य एक मजेदार open-source experience बनाने की जगह होना है
1 टिप्पणियां
Hacker News की राय
3.11, 95, 2000, XP, CDE, Mac OS 9 और उनके सभी default color palettes को शामिल करते हुए ऐसा ही कुछ बनाया था: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
फोकस pixel-perfect recreation से ज़्यादा इस बात पर था कि यह high-resolution monitors जैसे आधुनिक environments में भी अच्छी तरह काम करे और अच्छा दिखे
इसलिए icons और symbols सभी को SVG में दोबारा बनाया, और XP व Mac OS 9 जोड़ने पर इसे Show HN पर पोस्ट किया था, लेकिन ज़्यादा ध्यान नहीं मिला
निजी तौर पर Windows 2000 UI design की चोटी था
एक और चीज़ जो देखना चाहूंगा वह data table theme है, और अगर lists व grids की तरह behave करने वाली interactive tables भी हों तो अच्छा होगा
https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
बनाने वाला मैं ही हूं। इसे फिर से ऊपर आते देखकर अच्छा लगा
यह मेरा burnout recovery project था, और हाल ही में इससे जुड़े विचार लिखे हैं: https://notes.jordanscales.com/98-css-reflections
[0]: https://www.mathsheets.net/
यह दिलचस्प है कि पुराने games या operating systems जैसी retro computing सुकून देने वाली, यहां तक कि healing भी हो सकती है
बचपन के Gameboy, Nintendo games emulator पर खेलने या Macintosh System 9 चलाने पर मुझे भी वैसा ही महसूस हुआ, और Pico-8, SerenityOS, TempleOS भी याद आते हैं
इनमें एक समानता है: पुराने अंदाज़ का computing environment जिसे user पूरी तरह समझ और control कर सकता है; और therapy tool के रूप में सुरक्षित sandbox जैसी कोई गहरी psychological dynamics भी हो सकती है
आज की technology और society में hostile dark patterns बहुत ज़्यादा हैं, इसलिए user की comfort के लिए design किए गए physical और mental spaces मिलना बड़ा राहतभरा लगता है
Windows 2000 और Windows XP के लिए भी version हो तो अच्छा होगा
इकट्ठा की हुई चीज़ें:
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/
98.css अच्छे कारणों से HN classic बन चुका है
पिछली discussions:
https://news.ycombinator.com/item?id=33310554 - अक्टूबर 2022, 179 comments
https://news.ycombinator.com/item?id=22940564 - अप्रैल 2020, 211 comments
साथ में देखने लायक HyperCard Simulator और Decker भी हैं
https://hn.algolia.com/?q=hypercard
याद है कि 90s के आखिर में Microsoft के पास Windows desktop themes और colors से match होने वाले CSS built-in color names थे
पता नहीं वे अब भी काम करते हैं या नहीं, और IDE में वे सभी red दिखते हैं, इसलिए लगता है काम नहीं करते
windowtext,appworkspace,menutext,threedlightshadow,threedshadow,threedfaceजैसी values इस्तेमाल करके user's desktop look-and-feel से match करने वाला web UI बनाया जा सकता था1998 में browser-based intranet app में मैंने ऐसा इस्तेमाल किया था, और उससे वह थोड़ा ज़्यादा native जैसा दिखता था
https://drafts.csswg.org/css-color/#css-system-colors
पुराने colors सभी deprecated के रूप में mark कर दिए गए हैं:
https://drafts.csswg.org/css-color/#deprecated-system-colors
यह style non-default DPI के साथ ठीक से मेल नहीं खाता
उदाहरण के लिए, अगर monitor scaling को 150% पर सेट किया गया हो, तो physical pixels के हिसाब से देखने के लिए browser console में नीचे जैसा चला सकते हैं:
with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`scale को किसी integer से गुणा करने पर साफ़-साफ़ बड़ा किया हुआ एहसास मिल सकता है, और 100% perfect न भी हो तो भी intended rendering के काफ़ी करीब दिखता है
withको इस तरह इस्तेमाल करना डरावना भी है और साथ ही काफ़ी नया-ताज़ा भीपसंद भी है और नापसंद भी
लगता है crowdwave में इसका थोड़ा इस्तेमाल किया गया है: https://www.crowdwave.com
साथ में देखने लायक: https://botoxparty.github.io/XP.css और https://khang-nd.github.io/7.css
आजकल radio button group के options के बीच जैसी सांस लेने की जगह चाहिए, यह लगभग मंत्र जैसा हो गया है, लेकिन पुराने UI की तंग spacing ज़्यादा ईमानदार, end user का ज़्यादा सम्मान करने वाली और ज़्यादा information-dense लगती है
मैं सारी innovation छोड़ना नहीं चाहता, लेकिन पुराने UI अक्सर याद आते हैं
Windows 7 की window decoration मुझे पसंद नहीं थी, लेकिन बाकी चीज़ें Electron apps में इस्तेमाल करने पर भी बुरी नहीं लगेंगी
Windows XP UI सभी Windows UI में सबसे अच्छा था; यह इतना modern था कि refined लगे, फिर भी इसमें contrast था, इसलिए देखना, पढ़ना और समझना आसान था
Windows 7 UI बहुत चमकदार था और readability से ज़्यादा appearance को आगे रखता था, जबकि Windows 98 बहुत पुराना और हर तरफ़ grey था, इसलिए contrast की कमी भी थी
https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
https://world-playground-deceit.net/
ऐसी चीज़ें देखकर इसे अंत तक करके देखने का मन होता है
सिर्फ़ देखकर ही लगता है कि यह Windows 95 और Windows 98 में render होने वाला MS Sans Serif नहीं है
https://web.archive.org/web/20230603234837/https://vistaserv...
किसी दूसरे comment में link की गई XP stylesheet[1] text और shapes को high resolution में draw करती है, जिससे constraints कम होते हैं लेकिन UI का feel बना रहता है
98 जैसे UI को पसंद करने की वजह low resolution नहीं, बल्कि स्पष्टता और सरलता है
[1] https://news.ycombinator.com/item?id=42056921
कई वर्षों की UX/UI “research” और “improvements” के बाद जो निकला है, उससे यह कहीं बेहतर लगता है
1998 में मैं एक साल का था, इसलिए ऐसा नहीं कि मैं पुरानी पीढ़ी से हूँ
मुझे बस ऐसे buttons पसंद नहीं जो button जैसे नहीं दिखते, ऐसे tabs जो tab जैसे नहीं दिखते, और ऐसे text fields जिन पर click करने के बाद ही पता चलता है कि उन्हें edit किया जा सकता है
Apple ने MacOSX के लिए कुछ हद तक research की होगी, लेकिन पिछले 20 वर्षों में, खासकर mobile पर, ऐसा लगा कि features को discoverability या consistency की अवधारणा के बिना बस फेंक दिया गया
सबसे बढ़कर, कंपनियों का “consistent branding” या “unique look” चाहना ही कई समस्याओं की जड़ लगता है
और उस website पर plain text की तरह छिपा हुआ “show code” button भी है