- 98.css ช่วยให้สร้างเว็บอินเทอร์เฟซที่ดูเหมือน Windows 98 ได้ด้วย CSS เท่านั้น ทำให้จำลอง UI เดสก์ท็อปยุคเก่าได้อย่างซื่อตรง
- ด้านการเข้าถึงอาศัย semantic HTML โดยตั้งอยู่บนสมมติฐานว่ามีการใช้แอตทริบิวต์ ARIA ของปุ่ม ป้ายกำกับ และปุ่มไอคอนอย่างถูกต้อง
- ไม่มี JavaScript จึงนำไปใช้กับโปรเจกต์ React, JavaScript ล้วน หรือ HTML ทั่วไปได้ โดยไม่ขึ้นกับเฟรมเวิร์กที่เลือก
- มี คอมโพเนนต์สไตล์ Windows 98 เช่น ปุ่ม เช็กบ็อกซ์ ปุ่มวิทยุ หน้าต่าง ทรีวิว แท็บ เทเบิลวิว และแถบความคืบหน้า
- ใช้งานได้ผ่าน npm, GitHub releases และ unpkg เผยแพร่ภายใต้ ไลเซนส์ MIT และเปิดรับรายงานบั๊กกับ pull request
วิธีจำลอง UI ของ Windows 98 ด้วย CSS
- 98.css เป็นไลบรารี CSS สำหรับสร้างอินเทอร์เฟซที่ดูเหมือน Windows 98
- ดูโปรเจกต์ได้ที่ GitHub
- การเข้าถึงอาศัย โครงสร้าง semantic HTML มากกว่าสคริปต์แยกต่างหาก
- ปุ่มควรใช้
<button>
- องค์ประกอบอินพุตต้องมี
<label> ที่สอดคล้องกัน
- ปุ่มไอคอนใช้
aria-label เพื่อสื่อเจตนา
- สามารถ override สไตล์บางส่วนขององค์ประกอบได้โดยยังคงรูปลักษณ์พื้นฐานไว้
- สามารถเพิ่ม padding ของปุ่ม หรือเพิ่มสีให้ label ของอินพุตได้
การติดตั้งและการเชื่อมรวมกับเฟรมเวิร์ก
- 98.css ใช้ CSS เท่านั้นโดยไม่มี JavaScript เพื่อใส่สไตล์ Windows 98 ให้กับองค์ประกอบ HTML
- ใช้งานได้อย่างอิสระจากเฟรมเวิร์กฝั่งฟรอนต์เอนด์
- มีตัวอย่าง การใช้งานกับ React และ การใช้งานกับ JavaScript ล้วน
- วิธีที่เร็วที่สุดคือดึง stylesheet จาก unpkg
<link rel="stylesheet" href="https://unpkg.com/98.css">;
npm install 98.css
คอนโทรลฟอร์มพื้นฐาน
-
Button
- ปุ่มมาตรฐานมีความกว้าง 75px สูง 23px มีเส้นขอบด้านนอกและด้านในแบบนูน พร้อม padding แนวนอนพื้นฐาน 12px
- เมื่อเพิ่มคลาส
default จะช่วยสื่อทางสายตาว่าเป็นการทำงานเริ่มต้นที่จะถูกเรียกด้วยปุ่ม Enter ใน Windows 98
- เมื่ออยู่ในสถานะคลิก เส้นขอบแบบนูนจะเปลี่ยนเป็นลักษณะถูกกดลง
- ปุ่มที่ปิดใช้งานยังคงเส้นขอบแบบนูนเดิม แต่ label จะดูจางลง
- โฟกัสจะแสดงด้วยเส้นขอบประที่อยู่ห่างเข้ามา 4px ภายในเนื้อหาปุ่ม
-
Checkbox
- เช็กบ็อกซ์ใช้แทนตัวเลือกที่เป็นอิสระต่อกันหรือไม่จำเป็นต้องเลือกแบบตัดกัน
- เมื่อเลือก จะแสดงไอคอนเครื่องหมายถูกในแผงแบบยุบลง และมี label แสดงตัวเลือกอยู่ข้าง ๆ
- หลัง
<input type="checkbox"> ต้องมี <label> ที่แอตทริบิวต์ for ชี้ไปยัง id ของอินพุต
- ใช้แอตทริบิวต์
checked และ disabled ได้
- เมื่อต้องจัดกลุ่มอินพุตหลายตัว ให้ครอบแต่ละอินพุตด้วยคอนเทนเนอร์ที่มีคลาส
field-row เพื่อจัดระยะให้ตรงกัน
-
Option Button
- ปุ่มวิทยุเป็นคอนโทรลสำหรับเลือกเพียงหนึ่งตัวเลือกจากชุดตัวเลือกที่จำกัด
- ใช้ด้วย
<input type="radio"> และหากกำหนดแอตทริบิวต์ name เดียวกันจะถูกรวมเป็นกลุ่ม
- เช่นเดียวกับเช็กบ็อกซ์ สามารถครอบด้วย
field-row เพื่อรักษาระยะห่างระหว่างอินพุตให้สม่ำเสมอ
- รองรับแอตทริบิวต์
checked และ disabled
-
Group Box
- group box คือกรอบสี่เหลี่ยมสำหรับจัดระเบียบคอนโทรลหลายตัว
- ใช้โดยครอบองค์ประกอบด้วย
fieldset ซึ่งให้เส้นขอบด้านนอกแบบยุบลงและเส้นขอบด้านในแบบนูน
- ใส่
legend ภายใน fieldset เพื่อเพิ่ม label ของกลุ่มได้
ช่องป้อนข้อความ สไลเดอร์ และดรอปดาวน์
-
TextBox
- text box เป็นคอนโทรลสี่เหลี่ยมที่ผู้ใช้ใช้ป้อนหรือแก้ไขข้อความ
- อินพุตแบบบรรทัดเดียวเรนเดอร์ด้วย
<input type="text">
- แนะนำให้มี
<label> ที่สอดคล้องกันพร้อมแอตทริบิวต์ for ที่ถูกต้อง และครอบทั้งคู่ด้วยคอนเทนเนอร์ field-row
- หากใช้คลาส
field-row-stacked จะวาง label ไว้ด้านบนแทนที่จะอยู่ข้างอินพุต
- อินพุตหลายบรรทัดใช้
textarea
- ใช้แอตทริบิวต์ HTML มาตรฐานอย่าง
disabled และ value ได้
-
Slider
- สไลเดอร์ประกอบด้วยแถบที่แสดงช่วงการปรับค่าและตัวบ่งชี้ที่แสดงค่าปัจจุบัน
- เรนเดอร์ด้วย
<input type="range">
- ใช้คลาส
has-box-indicator เพื่อเปลี่ยนตัวบ่งชี้เริ่มต้นเป็นตัวบ่งชี้แบบกล่องได้
- หากครอบด้วย
div ที่ใช้ is-vertical จะแสดงเป็นสไลเดอร์แนวตั้ง
- หากต้องการเปลี่ยนความยาวของสไลเดอร์แนวตั้ง ต้องปรับ width ของ
input และ height ของ div
-
Dropdown
- กล่องรายการดรอปดาวน์ให้เลือกได้เพียงหนึ่งรายการจากรายการทั้งหมด
- ในสถานะปิดจะแสดงค่าปัจจุบัน และผู้ใช้เปิดรายการเพื่อเปลี่ยนค่า
- เรนเดอร์ด้วยองค์ประกอบ
select และ option
- ค่าเริ่มต้นคือ option แรก และหากใส่
selected ให้กับ option ใดเป็นพิเศษ จะเปลี่ยนตัวเลือกเริ่มต้นได้
การประกอบหน้าต่างสไตล์ Windows 98
-
Title Bar
- title bar อยู่ด้านในขอบบนของหน้าต่าง และใช้ระบุเนื้อหาของหน้าต่าง
- ประกอบด้วยคลาส
title-bar, title-bar-text, title-bar-controls
- ปุ่มปิดใช้
aria-label="Close" เพื่อสื่อเจตนาให้เทคโนโลยีช่วยเหลือ
- สามารถใช้
aria-label เช่น Minimize, Maximize, Restore, Help ได้เช่นกัน
aria-label แต่ละตัวมีคลาสสำหรับจัดสไตล์ที่สอดคล้องกัน ทำให้แม้ข้อความ aria-label จะเป็นภาษาอื่น ก็ไม่เกิดปัญหาด้านการเรนเดอร์ การเข้าถึง หรือการแปลให้เข้ากับท้องถิ่น- ปุ่มขยายเต็มหน้าต่างสามารถปิดใช้งานด้วย
disabled ได้
- หากเพิ่มคลาส
inactive จะทำให้ดูเป็น title bar ที่ไม่ active
-
Window contents
- คลาส
window สร้างคอนเทนเนอร์หน้าต่างที่ใส่ title bar ได้ พร้อมเส้นขอบด้านนอกและด้านในแบบนูน รวมถึง padding
- สามารถกำหนด width ในสไตล์ของคอนเทนเนอร์เพื่อปรับขนาดหน้าต่างได้อย่างอิสระ
- เนื้อหาใต้ title bar วาดได้ด้วยคลาส
window-body
-
Status Bar
- status bar มักอยู่ด้านล่างของหน้าต่าง และแสดงสถานะปัจจุบันหรือข้อมูลบริบท
- เรนเดอร์ status bar ด้วยคลาส
status-bar
- องค์ประกอบข้อความแต่ละตัวใช้คลาส
status-bar-field
- ตัวอย่างมีฟิลด์สถานะอย่าง
Press F1 for help, Slide 1, CPU Usage: 14%
รายการ แท็บ ตาราง และตัวบ่งชี้ความคืบหน้า
-
TreeView
- tree view เป็นกล่องรายการชนิดพิเศษที่แสดงชุดวัตถุในรูปแบบโครงร่างเยื้องตามความสัมพันธ์เชิงลำดับชั้นทางตรรกะ
- เรนเดอร์โดยใส่คลาส
tree-view ให้กับองค์ประกอบ ul
- องค์ประกอบลูก
li ใส่เนื้อหาใดก็ได้ตามต้องการ
- หากใส่
ul ซ้อนกัน จะแสดงโครงสร้างต้นไม้ด้วยเส้นขอบประและการเยื้อง
- ส่วนที่ขยายได้สร้างได้โดยใส่รายการลูกไว้ในองค์ประกอบ
details
-
Tabs
- tab control ใช้กำหนดหน้าตรรกะหรือส่วนข้อมูลหลายส่วนภายในหน้าต่างเดียวกัน
- ใส่
role="tablist" ให้กับองค์ประกอบ menu และใส่ role="tab" ให้กับองค์ประกอบลูก li
- การจัดการแท็บต้องทำด้วยโค้ด JavaScript ของผู้ใช้เอง
- สำหรับแท็บที่ active ให้เพิ่ม
aria-selected="true"
- แท็บหลายแถวสร้างได้โดยเพิ่มคลาส
multirows ให้กับแท็ก menu
-
TableView
- table view เรนเดอร์ด้วยองค์ประกอบ
table
- เพื่อให้มีเส้นขอบที่เหมาะสมและคอนเทนเนอร์สำหรับ overflow ให้ครอบด้วย
div ที่มีคลาส sunken-panel
- หากเพิ่มสคริปต์เล็กน้อย จะทำให้ table view เป็นแบบโต้ตอบได้
- เมื่อใส่คลาส
interactive ให้กับ table จะแสดงเคอร์เซอร์แบบ pointer เมื่อ hover แถวใน body
- หากใส่คลาส
highlighted ให้แถว จะดูเหมือนถูกเลือกอยู่
-
Progress Indicator
- แถบความคืบหน้าใช้แสดงสัดส่วนความสำเร็จของงานที่ใช้เวลานาน
- ค่าเริ่มต้นเป็นแถบความคืบหน้าแบบ solid
- ใช้คลาส
segmented เพื่อประกาศแถบความคืบหน้าแบบแบ่งส่วนได้
- แสดงเปอร์เซ็นต์ความคืบหน้าด้วยสไตล์ width ของ
progress-indicator-bar
เส้นขอบฟิลด์และการมีส่วนร่วมโอเพนซอร์ส
-
Field borders
- text box, เช็กบ็อกซ์, กล่องรายการดรอปดาวน์, spin box และ list box ใช้สไตล์เส้นขอบฟิลด์
- พื้นที่ทำงานภายในหน้าต่างก็ใช้สไตล์เดียวกันได้
- เส้นขอบฟิลด์ใช้เส้นขอบด้านนอกแบบยุบลงและเส้นขอบด้านในแบบยุบลง
- ภายในคอนโทรลส่วนใหญ่ใช้สี button highlight
- เมื่อฟิลด์ข้อความอย่าง text box และ combo box อยู่ในสถานะอ่านอย่างเดียวหรือปิดใช้งาน ภายในจะใช้สี button face
- มีคลาส
field-border, field-border-disabled, status-field-border สำหรับการใช้งานทั่วไป
- คลาสเหล่านี้กำหนดเฉพาะเส้นขอบ สีพื้นหลัง และ padding ขั้นต่ำ ดังนั้นโดยปกติต้องกำหนด padding เพิ่มเอง
-
ไลเซนส์และการมีส่วนร่วม
- 98.css เป็นโปรเจกต์ที่ใช้ MIT licensed
- ใช้ GitHub issues page สำหรับตรวจสอบและรายงานบั๊ก
- ยินดีรับ pull request และระบุว่าจะให้ code review โดยเฉพาะกับผู้ที่เพิ่งเริ่มมีส่วนร่วมในโอเพนซอร์ส
- โปรเจกต์มุ่งเป็นพื้นที่สำหรับสะสมประสบการณ์โอเพนซอร์สที่สนุก
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
เคยทำของคล้าย ๆ กันที่รวม 3.11, 95, 2000, XP, CDE, Mac OS 9 และพาเลตต์สีพื้นฐานของแต่ละตัวไว้ทั้งหมด: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
จุดเน้นไม่ใช่การจำลองให้สมบูรณ์แบบระดับพิกเซล แต่เป็นรูปแบบที่ทำงานได้ดีและดูดีแม้ในสภาพแวดล้อมสมัยใหม่อย่างจอความละเอียดสูง
ดังนั้นจึงทำไอคอนและสัญลักษณ์ทั้งหมดใหม่เป็น SVG และตอนที่เพิ่ม XP กับ Mac OS 9 ก็เอาไปโพสต์ใน Show HN แต่ไม่ได้รับความสนใจมากนัก
โดยส่วนตัวแล้ว Windows 2000 คือจุดสูงสุดของการออกแบบ UI
สิ่งที่อยากเห็นเพิ่มคือ ธีมตารางข้อมูล และถ้ามีตารางแบบโต้ตอบที่ทำงานเหมือนลิสต์กับกริดด้วยก็จะดีมาก
https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
คนทำเองครับ ดีใจที่เห็นมันถูกหยิบขึ้นมาอีกครั้ง
นี่เป็น โปรเจกต์ฟื้นตัวจากภาวะหมดไฟ ของผม และเมื่อไม่นานมานี้ผมเขียนความคิดเกี่ยวกับมันไว้: https://notes.jordanscales.com/98-css-reflections
[0]: https://www.mathsheets.net/
น่าสนใจที่ เรโทรคอมพิวติง อย่างเกมเก่าหรือระบบปฏิบัติการเก่า ๆ สามารถให้ความสบายใจ และถึงขั้นช่วยเยียวยาได้
ผมเคยรู้สึกคล้ายกันตอนเล่น Gameboy กับเกม Nintendo สมัยเด็กผ่านอีมูเลเตอร์ หรือรัน Macintosh System 9 และยังนึกถึง Pico-8, SerenityOS, TempleOS ด้วย
สิ่งที่มีร่วมกันคือสภาพแวดล้อมคอมพิวเตอร์แบบย้อนยุคที่ผู้ใช้สามารถเข้าใจและควบคุมได้ทั้งหมด และน่าจะมีพลวัตทางจิตวิทยาที่ลึกกว่านั้น เช่นการเป็น แซนด์บ็อกซ์ ที่ปลอดภัยในฐานะเครื่องมือบำบัด
ทุกวันนี้เทคโนโลยีและสังคมมี dark pattern ที่เป็นปฏิปักษ์มากเกินไป การได้พบพื้นที่ทั้งทางกายและทางใจที่ออกแบบมาเพื่อความสบายของผู้ใช้จึงเป็นความโล่งใจอย่างมาก
ถ้ามีสำหรับ Windows 2000 และ Windows XP ด้วยก็คงดี
สิ่งที่รวบรวมไว้:
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 ไปแล้วด้วยเหตุผลที่ดี
การอภิปรายก่อนหน้า:
https://news.ycombinator.com/item?id=33310554 - ตุลาคม 2022, 179 ความเห็น
https://news.ycombinator.com/item?id=22940564 - เมษายน 2020, 211 ความเห็น
สิ่งที่น่าดูควบคู่กันคือ HyperCard Simulator และ Decker
https://hn.algolia.com/?q=hypercard
จำได้ว่าช่วงปลายยุค 90 Microsoft มี ชื่อสีในตัวของ CSS ที่ปรับตามธีมและสีของเดสก์ท็อป Windows
ไม่รู้ว่ายังใช้งานได้อยู่ไหม และใน IDE ก็แสดงเป็นสีแดงหมด ดูเหมือนจะใช้ไม่ได้แล้ว
สามารถใช้ค่าอย่าง
windowtext,appworkspace,menutext,threedlightshadow,threedshadow,threedfaceเพื่อสร้างเว็บ UI ที่เข้ากับ look and feel ของเดสก์ท็อปผู้ใช้ได้ในปี 1998 ผมใช้แบบนั้นกับแอปอินทราเน็ตบนเบราว์เซอร์ และมันช่วยให้ดูเหมือน native มากขึ้น
https://drafts.csswg.org/css-color/#css-system-colors
สีเก่าทั้งหมดถูกทำเครื่องหมายว่าเลิกใช้แล้ว:
https://drafts.csswg.org/css-color/#deprecated-system-colors
สไตล์นี้ไม่ค่อยเข้ากับ DPI ที่ไม่ใช่ค่าเริ่มต้น
ตัวอย่างเช่น เมื่อกำหนดสเกลของมอนิเตอร์เป็น 150% หากอยากลองให้พอดีกับพิกเซลจริง สามารถรันในคอนโซลของเบราว์เซอร์แบบด้านล่างได้:
with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`ถ้านำอัตราสเกลไปคูณด้วยจำนวนเต็ม จะได้ความรู้สึกเหมือนถูกขยายขึ้นอย่างคมชัด และแม้จะไม่สมบูรณ์แบบ 100% แต่ก็ดูใกล้เคียงการเรนเดอร์ที่ตั้งใจไว้มากขึ้น
withแบบนี้ดูน่ากลัว แต่ก็สดใหม่มากในเวลาเดียวกันทั้งชอบและไม่ชอบไปพร้อมกัน
ดูเหมือน crowdwave จะใช้สิ่งนี้อยู่บ้าง: https://www.crowdwave.com
สิ่งที่น่าดูควบคู่กัน: https://botoxparty.github.io/XP.css และ https://khang-nd.github.io/7.css
ทุกวันนี้แทบจะกลายเป็นมนตร์ไปแล้วว่าต้องมีพื้นที่ให้หายใจ เช่น ระหว่างตัวเลือกในกลุ่ม radio button แต่ระยะห่างที่แคบของ UI รุ่นเก่ากลับให้ความรู้สึกตรงไปตรงมามากกว่า เคารพผู้ใช้ปลายทางมากกว่า และมีความหนาแน่นของข้อมูลสูงกว่า
ไม่ได้อยากทิ้งนวัตกรรมทั้งหมด แต่ก็มักคิดถึง UI เก่า ๆ อยู่บ่อย ๆ
แม้จะไม่ชอบการตกแต่งหน้าต่างของ Windows 7 แต่ส่วนที่เหลือน่าจะใช้กับ แอป Electron ได้ไม่เลว
Windows XP UI ดีที่สุดในบรรดา Windows UI ทั้งหมด ทันสมัยพอให้รู้สึกมีสไตล์ แต่ยังมีคอนทราสต์ ทำให้มอง อ่าน และเข้าใจได้ง่าย
UI ของ Windows 7 วูบวาบเกินไปและให้ความสำคัญกับรูปลักษณ์มากกว่าความอ่านง่าย ส่วน Windows 98 ก็เก่าเกินไปและเทาไปหมด จึงมีปัญหาเรื่องคอนทราสต์ไม่พอด้วย
https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
https://world-playground-deceit.net/
พอเห็นของแบบนี้แล้วก็ทำให้อยากลองทำให้สุดทาง
แค่มองด้วยตาก็รู้สึกว่าไม่น่าใช่ MS Sans Serif ที่เคยเรนเดอร์บน Windows 95 และ Windows 98
https://web.archive.org/web/20230603234837/https://vistaserv...
สไตล์ชีตแบบ XP[1] ที่มีลิงก์ในคอมเมนต์อื่น วาดทั้งข้อความและรูปทรงด้วยความละเอียดสูง เพื่อคงความรู้สึกของ UI ไว้พร้อมลดข้อจำกัด
เหตุผลที่ชอบ UI แบบ 98 ไม่ใช่เพราะความละเอียดต่ำ แต่เป็นเพราะ ความชัดเจนและความเรียบง่าย
[1] https://news.ycombinator.com/item?id=42056921
ผมคิดว่าสิ่งนี้ดีกว่าสิ่งที่ออกมาหลังจาก “การวิจัย” และ “การปรับปรุง” UX/UI หลายปีมาก
ไม่ใช่เพราะเป็นคนรุ่นเก่าด้วย เพราะปี 1998 ผมเพิ่งอายุหนึ่งขวบ
แค่ไม่ชอบปุ่มที่ดูไม่เหมือนปุ่ม แท็บที่ดูไม่เหมือนแท็บ และช่องข้อความที่ต้องลองกดดูก่อนถึงจะรู้ว่าแก้ไขได้
Apple คงทำวิจัยมาบ้างสำหรับ MacOSX แต่ในช่วง 20 ปีที่ผ่านมา โดยเฉพาะบนมือถือ รู้สึกเหมือนฟีเจอร์ต่าง ๆ ถูกโยนเข้ามาเฉย ๆ โดยไม่มีแนวคิดเรื่องการค้นพบได้หรือความสอดคล้อง
เหนือสิ่งอื่นใด ดูเหมือนว่าความต้องการของบริษัทที่จะมี “แบรนดิ้งที่สอดคล้องกัน” หรือ “รูปลักษณ์เฉพาะตัว” เป็นสาเหตุของปัญหาหลายอย่าง
และเว็บไซต์นั้นยังมีปุ่ม “show code” ที่ปลอมตัวเหมือนข้อความธรรมดาด้วย