98.css – ระบบดีไซน์ที่ถอดแบบอินเทอร์เฟซผู้ใช้ยุคเก่าได้อย่างซื่อสัตย์

 (jdan.github.io)
3 คะแนน โดย GN⁺ 2024-11-07 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • Intro

    • 98.css เป็นไลบรารี CSS สำหรับสร้างอินเทอร์เฟซสไตล์ Windows 98
    • ไลบรารีนี้ให้ความสำคัญกับการเข้าถึงเป็นเป้าหมายหลัก และแนะนำให้ใช้ HTML เชิงความหมาย
    • จัดสไตล์ HTML โดยไม่ใช้ JavaScript และสามารถใช้งานร่วมกับเฟรมเวิร์กฟรอนต์เอนด์ได้หลากหลาย

  • Components

    • Button
      • ปุ่มคำสั่งเป็นคอนโทรลที่ทำให้แอปพลิเคชันดำเนินการบางอย่างเมื่อผู้ใช้คลิก
      • โดยค่าปริยายมีความกว้าง 75px และความสูง 23px และเมื่อคลิกเส้นขอบจะเปลี่ยนเป็นลักษณะเหมือนถูกกดลง
    • Checkbox
      • เช็กบ็อกซ์ใช้แทนตัวเลือกที่เป็นอิสระหรือไม่จำกัดเพียงตัวเลือกเดียว
      • ใช้เช็กบ็อกซ์ร่วมกับป้ายกำกับเพื่อเพิ่มการเข้าถึง
    • OptionButton
      • ปุ่มตัวเลือกคือปุ่มวิทยุที่ใช้เลือกได้หนึ่งรายการจากชุดตัวเลือกที่จำกัด
      • ปุ่มตัวเลือกในกลุ่มเดียวกันจะใช้แอตทริบิวต์ name เดียวกันเพื่อจัดกลุ่ม
    • GroupBox
      • กล่องกลุ่มเป็นกรอบสี่เหลี่ยมที่ใช้จัดระเบียบชุดคอนโทรล
      • สร้างด้วยแท็ก fieldset และสามารถเพิ่มป้ายกำกับได้
    • TextBox
      • กล่องข้อความเป็นคอนโทรลรูปสี่เหลี่ยมผืนผ้าที่ผู้ใช้สามารถป้อนหรือแก้ไขข้อความได้
      • หากต้องการรองรับหลายบรรทัด ให้ใช้องค์ประกอบ textarea
    • Slider
      • สไลเดอร์ประกอบด้วยแถบที่กำหนดช่วงการปรับ และตัวบ่งชี้ที่แสดงค่าปัจจุบัน
      • หากต้องการสร้างสไลเดอร์แนวตั้ง ให้ใช้คลาส is-vertical
    • Dropdown
      • ดรอปดาวน์ลิสต์บ็อกซ์ช่วยให้เลือกหนึ่งรายการจากรายการได้
      • สร้างด้วยองค์ประกอบ select และ option

  • Window

    • Title Bar
      • แถบชื่ออยู่ที่ขอบบนของหน้าต่างและใช้ระบุเนื้อหาของหน้าต่าง
      • สร้างด้วยคลาส title-bar, title-bar-text, title-bar-controls
    • Window contents
      • หน้าต่างถูกสร้างด้วยคลาส window ที่กำหนดขอบเขตของหน้าต่าง
      • ใช้คลาส window-body เพื่อแสดงเนื้อหาของหน้าต่าง
    • Status Bar
      • แถบสถานะอยู่ที่ด้านล่างของหน้าต่างเพื่อแสดงสถานะปัจจุบันหรือข้อมูลอื่น ๆ
      • สร้างด้วยคลาส status-bar
    • TreeView
      • คอนโทรล tree view แสดงออบเจ็กต์เป็นโครงร่างแบบย่อหน้าตามความสัมพันธ์เชิงลำดับชั้น
      • สร้างด้วยองค์ประกอบ ul และคลาส tree-view
    • Tabs
      • คอนโทรลแท็บมีลักษณะคล้ายตัวแบ่งของตู้เก็บเอกสารหรือสมุดโน้ต
      • สร้างด้วยองค์ประกอบ menu และแอตทริบิวต์ [role=tablist]
    • TableView
      • table view เรนเดอร์ด้วยองค์ประกอบ table
      • คลาส sunken-panel ใช้สำหรับจัดเตรียมเส้นขอบและคอนเทนเนอร์สำหรับ overflow

  • Issues, Contributing, etc.

    • 98.css ใช้สัญญาอนุญาต MIT
    • สามารถรายงานบั๊กหรือแจ้งบั๊กใหม่ได้ผ่านหน้า GitHub Issues
    • ยินดีต้อนรับการมีส่วนร่วมในโอเพนซอร์ส และมีการรีวิวโค้ดให้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-11-07
ความคิดเห็นบน Hacker News

  • ผู้ใช้คนหนึ่งสร้างโปรเจกต์ที่รวมธีมสีพื้นฐานของระบบปฏิบัติการหลากหลายแบบไว้ และสร้างไอคอนกับสัญลักษณ์ขึ้นใหม่ด้วย SVG เพื่อให้ทำงานได้ดีและดูสวยงามบนระบบสมัยใหม่

    • เคยโพสต์โปรเจกต์นี้ใน Show HN แต่ไม่ได้รับความสนใจมากนัก
    • คิดว่าชื่อโปรเจกต์อาจไม่น่าดึงดูดพอ

  • ผู้ใช้อีกคนหนึ่งบอกว่าโปรเจกต์นี้เป็นโปรเจกต์เพื่อฟื้นตัวจากภาวะหมดไฟ และเพิ่งบันทึกความคิดเกี่ยวกับเรื่องนี้ไว้เมื่อไม่นานมานี้

  • มีผู้ใช้ที่รวบรวมสไตล์ CSS ที่เกี่ยวข้องกับระบบปฏิบัติการหลายแบบ

    • รวมถึง The Sims, Windows 98, Windows XP, Windows 7 และสไตล์แบบ Edward Tufte

  • 98.css ถือเป็นของคลาสสิกบน Hacker News และถูกพูดถึงมาหลายครั้งแล้ว

    • HyperCard Simulator และ Decker ก็เป็นสิ่งที่ควรลองดูเช่นกัน

  • ในการตั้งค่า DPI ที่ไม่ใช่ค่าดั้งเดิม สไตล์อาจทำงานได้ไม่ดีนัก และสามารถรันโค้ดบางอย่างใน browser console เพื่อให้ตรงกับพิกเซลจริงได้

  • ผู้ใช้คนหนึ่งกล่าวว่าดูเหมือนไม่ใช่ MS Sans Serif บน Windows 95 และ Windows 98

  • ผู้ใช้อีกคนบอกว่า botoxparty.github.io/XP.css และ khang-nd.github.io/7.css ก็คุ้มค่าที่จะลองดู

  • ช่วงปลายยุค 90 Microsoft เคยให้สี CSS ที่สอดคล้องกับธีมและสีของเดสก์ท็อป Windows ซึ่งทำให้สามารถทำให้เว็บ UI ตรงกับเดสก์ท็อปของผู้ใช้ได้

  • ผู้ใช้คนหนึ่งโต้แย้งว่าสไตล์ในอดีตดีกว่าการวิจัยและการปรับปรุง UX/UI ในปัจจุบัน

    • ชอบปุ่ม แท็บ และช่องข้อความที่มองเห็นได้ชัดเจน

  • เคยมีการสร้างธีม Obsidian โดยใช้ซอร์สของ 98.css แต่ตอนนี้ยุติการพัฒนาไปแล้ว