98.css - Library CSS yang mereplikasi UI Windows 98

 (jdan.github.io)
1 poin oleh GN⁺ 3 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • 98.css adalah sistem desain CSS yang mengimplementasikan antarmuka web yang terlihat seperti Windows 98 dengan dasar HTML semantik dan aksesibilitas
  • Karena hanya menerapkan style pada HTML tanpa JavaScript, library ini dapat digunakan di berbagai lingkungan frontend termasuk React dan vanilla JavaScript
  • Menyediakan beragam komponen UI Windows 98, mulai dari tombol, kolom input, kontrol pilihan hingga jendela, tab, tree, tabel, dan progress bar
  • Mendukung pengaitan label, aria-label, dan peran ARIA, serta memungkinkan style seperti margin atau warna dioverride sambil tetap mempertahankan tampilan dasarnya
  • Dapat diinstal melalui unpkg, npm, dan GitHub Releases, serta didistribusikan dengan lisensi MIT sehingga bisa dimodifikasi dan menerima kontribusi open source

Struktur proyek dan instalasi

  • 98.css adalah library CSS yang mereplikasi antarmuka Windows 98 dengan setia
  • Berdasarkan HTML semantik, menggunakan <button> untuk tombol, <label> untuk elemen input, dan aria-label untuk tombol ikon
  • Salah satu tujuan utamanya mencakup aksesibilitas, dengan mempertimbangkan navigasi keyboard dan penggunaan teknologi bantu
  • Karena menghias HTML hanya dengan CSS tanpa JavaScript, library ini tidak terikat pada framework frontend tertentu
  • Cara tercepat menggunakannya adalah memuat stylesheet dari unpkg
<link rel="stylesheet" href="https://unpkg.com/98.css">;

npm install 98.css
  • Sambil mempertahankan tampilan dasar, style individual seperti margin tombol atau warna label input dapat dioverride dengan bebas

Kontrol pilihan dasar

  • Tombol

    • Tombol standar berukuran 75×23px dengan border luar dan dalam yang menonjol serta margin horizontal default 12px
    • Mendukung <button>, input[type=submit], input[type=reset]
    • Kelas default menunjukkan aksi default yang akan dijalankan saat tombol Enter ditekan pada jendela aktif
    • Saat diklik, bentuknya berubah menjadi border menonjol yang tertekan, dan tombol nonaktif mempertahankan border sambil membuat label tampak pudar
    • Fokus ditampilkan dengan border putus-putus pada posisi 4px di dalam konten tombol

  • Checkbox dan radio button

    • Checkbox menunjukkan pilihan yang independen atau tidak saling eksklusif, dan saat dipilih ikon centang ditampilkan di dalam panel cekung
    • Setelah checkbox, <label> dengan atribut for yang mengarah ke id input wajib ada
    • Keterkaitan ini memungkinkan teknologi bantu mengenali input
    • Mendukung navigasi tombol Tab dan klik pada seluruh label
    • Status terpilih dan nonaktif ditentukan dengan atribut standar checked dan disabled
    • Beberapa input dibungkus dengan container field-row untuk menerapkan jarak yang konsisten
    • Radio button adalah kontrol untuk memilih hanya satu dari sekumpulan opsi terbatas dan dibuat dengan input[type=radio]
    • Tetapkan atribut name yang sama untuk mengelompokkannya sebagai grup yang saling eksklusif, dan seperti checkbox gunakan label serta field-row

  • Group box

    • fieldset mengelompokkan beberapa kontrol dalam bingkai persegi panjang dan menciptakan tampilan seperti kotak terukir dengan border luar cekung dan border dalam menonjol
    • Menempatkan legend di dalamnya akan menampilkan label grup

Input teks dan pemilihan nilai

  • Kotak teks

    • Input satu baris dibuat dengan input[type=text], sedangkan input multibaris menggunakan textarea
    • Input dan label yang terhubung dengan benar dibungkus bersama dalam field-row untuk tata letak horizontal
    • Dengan field-row-stacked, label dapat ditempatkan secara vertikal di atas elemen input
    • Status nonaktif dan nilai awal ditentukan dengan atribut HTML standar disabled dan value

  • Slider

    • Slider menunjukkan rentang penyesuaian dan nilai saat ini, dan dirender dengan input[type=range]
    • Kelas has-box-indicator mengganti indikator default dengan indikator berbentuk kotak
    • Dengan membungkus slider di dalam div yang diberi kelas is-vertical, slider dapat ditampilkan secara vertikal
    • Panjang slider vertikal diatur dengan lebar input dan tinggi div container

  • Dropdown

    • Buat dropdown untuk memilih satu item dari daftar dengan select dan option
    • Item pertama dipilih secara default, dan pilihan awal dapat diubah dengan menetapkan atribut selected pada option lain

Jendela bergaya Windows 98

  • Title bar

    • Title bar ditempatkan di sepanjang lebar bagian atas jendela untuk mengidentifikasi isi dan menyertakan tombol perintah jendela yang umum
    • Terdiri dari tiga kelas: title-bar, title-bar-text, title-bar-controls
    • Pada aria-label tombol perintah, dapat digunakan Minimize, Maximize, Restore, Help, Close
    • aria-label menyampaikan maksud tombol ke teknologi bantu sekaligus menerapkan style ikon yang sesuai dengan perintah
    • Kelas terpisah minimize, maximize, restore, help, close juga disediakan
    • Dengan memisahkan teks aria-label dari style visual, masalah rendering atau aksesibilitas dapat dihindari selama proses multibahasa dan lokalisasi
    • Untuk jendela yang tidak dapat dimaksimalkan, tetapkan disabled pada tombol Maximize
    • title-bar inactive merepresentasikan title bar yang nonaktif di antara beberapa jendela

  • Body jendela dan status bar

    • Kelas window menyediakan border luar dan dalam yang menonjol serta margin, dan ukuran jendela dapat diubah dengan menentukan lebar container
    • Konten aktual di bawah title bar ditempatkan di window-body
    • Status bar di bagian bawah jendela menampilkan informasi kontekstual seperti status saat ini atau status keyboard
    • Gunakan status-bar untuk seluruh container, dan status-bar-field untuk masing-masing area teks
    • Status bar dapat dimanfaatkan untuk membangun antarmuka seperti Task Manager, Notepad, dan File Explorer

Antarmuka hierarki, tab, dan tabel

  • Tree view

    • ul.tree-view menampilkan hierarki logis antarobjek sebagai daftar berindentasi
    • Dengan menumpuk ul turunan, border putus-putus dan indentasi diterapkan, dan li di dalamnya dapat diisi dengan konten yang diinginkan
    • Hierarki yang dapat dibuka-tutup dibangun dengan menempatkan daftar anak di dalam elemen details

  • Tab

    • Daftar tab ditulis dengan menu[role=tablist], dan tiap tab dengan li[role=tab]
    • Tetapkan aria-selected="true" pada tab yang aktif
    • Karena 98.css tidak memiliki logika perpindahan tab, perubahan status harus dikelola dengan JavaScript pengguna
    • Konten tab ditempatkan dalam area jendela yang memiliki role="tabpanel"
    • Menambahkan kelas multirows ke menu akan membuat tab dalam beberapa baris

  • Tampilan tabel

    • Bungkus HTML table dengan div.sunken-panel untuk membuat border yang sesuai dan area yang dapat digulir
    • table.interactive menampilkan kursor pointer saat mouse diarahkan ke baris body
    • Terapkan kelas highlighted pada baris yang dipilih, dan perilaku pemilihan baris yang sebenarnya diimplementasikan melalui skrip terpisah

Status progres dan border serbaguna

  • Progress bar

    • Persentase penyelesaian pekerjaan panjang ditampilkan dengan menempatkan progress-indicator-bar di dalam progress-indicator dan menentukan lebarnya
    • Bentuk dasarnya adalah batang warna solid, dan menambahkan kelas segmented akan mengubahnya menjadi progress bar bersegmen

  • Border field

    • Kotak teks, checkbox, dropdown, spin box, dan list box menggunakan style field dengan border luar dan dalam yang cekung
    • Field biasa menggunakan warna highlight tombol di bagian dalam, sedangkan field teks read-only atau nonaktif menggunakan warna permukaan tombol
    • Field status hanya menerapkan border luar cekung, dan digunakan untuk status bar atau konten read-only yang berubah secara dinamis
    • Tiga kelas serbaguna juga disediakan untuk area kerja dan konten dinamis di luar form
      • field-border: area kerja umum
      • field-border-disabled: area kerja nonaktif
      • status-field-border: konten status dinamis
    • Karena kelas-kelas ini hanya mendefinisikan border, warna latar, dan margin minimum, biasanya padding tambahan perlu ditentukan sendiri

Lisensi dan kontribusi

  • 98.css didistribusikan dengan lisensi MIT
  • Pemeriksaan dan pelaporan bug dapat dilakukan di GitHub Issues
  • Pull request diterima dan code review disediakan, terutama menyambut peserta yang baru pertama kali berkontribusi ke open source

Bacaan terkait

1 komentar

 
GN⁺ 3 jam lalu
Opini Hacker News

  • Proyek ini dibuat dalam proses pemulihan dari burnout, dan sampai sekarang masih sangat saya sayangi
    https://notes.jordanscales.com/98-css-reflections

    • Saat kecil saya benar-benar menghabiskan banyak waktu dengan SimGolf, lalu sempat melupakannya selama beberapa tahun sebelum akhirnya merasakan nostalgia lagi setelah sekian lama
    • Sangat cocok untuk situs web kecil https://www.mathsheets.net/
      Keseimbangan antara kegunaan dan nostalgia terasa pas sekali, sampai membuat saya ingin memakainya lebih banyak di proyek lain
    • Saat membuat tema Winamp untuk https://chiptune.app, saya memakai 98.css sebagai titik awal, dan ternyata sangat mudah dimodifikasi serta diperluas
    • Selama beberapa bulan terakhir saya membuat library CSS retro yang terinspirasi BeOS https://beta.mtechnic.me
      Saat riset, saya juga menemukan portofolio pembuat 98.css, dan selera musiknya pun benar-benar sama, jadi saya jadi penasaran apakah semua orang yang membuat library retro punya selera yang mirip
    • Cara pengelolaannya keren: sudah lama tidak mengembangkan 98.css sendiri, tetapi hanya meninjau pull request berkualitas di repositori, memastikan penulisnya bukan tipe orang yang akan menambang kripto di komputer pengguna, lalu memberi hak commit penuh

  • Flat design itu konyol, tetapi setelah membuat seseorang meraup banyak uang, semua orang mengikutinya seperti kawanan domba
    Sudah hampir 20 tahun berlalu dan fakta bahwa kita belum juga lepas darinya kini tidak lagi mengejutkan; cara tab multi-baris bekerja secara alami di UI lama dulu benar-benar bagus

    • Desain flat atau semi-flat bisa sangat bagus jika memakai elemen pembeda visual seperti bayangan, outline, dan kontras dengan tepat
      Hanya saja filosofi “lebih sedikit lebih baik” berbenturan dengan UI ala tanah liat mainan yang terlalu jenuh dari Apple, Google, dan para penirunya
    • Jika waktu yang dibutuhkan untuk menemukan sesuatu di halaman semakin lama, waktu tinggal di halaman yang dipentingkan perusahaan juga meningkat; jadi wajar hasilnya seperti sekarang
    • Di Win9x dan 3.x, tepi tombol, border jendela, tab, dan kotak teks punya petunjuk tiga dimensi serta gradasi yang halus, tetapi seiring waktu semuanya terus menjadi datar, dan sekarang tampak seperti keterampilan yang hilang
    • Elemen yang paling saya benci dari UI lama justru tab multi-baris
      Itu memakan ruang vertikal yang berharga, posisi baris berubah setiap kali diklik sehingga membingungkan, dan jika itu tombol yang menunjukkan status, setelah diklik seharusnya tidak bergerak
    • Bukan hanya flat design, penggunaan warna juga berkurang
      Kita punya monitor dan kartu grafis yang mampu menampilkan jutaan warna tetapi tidak memanfaatkannya; memang tidak perlu dibuat seperti buku mewarnai, tetapi Windows 10 dan 11 terasa muram

  • Hal yang selalu mengganjal bagi saya di keluarga 98.css adalah MS Sans Serif yang sedikit tidak akurat, dan akhirnya saya memutuskan untuk memperbaikinya sendiri
    https://github.com/jdan/98.css/pull/230

  • Proyek ini sudah beberapa kali populer sebelumnya: 2024: 471 poin · 93 komentar https://news.ycombinator.com/item?id=42056918, 2022: 606 poin · 182 komentar https://news.ycombinator.com/item?id=33310554, 2020: 838 poin · 211 komentar https://news.ycombinator.com/item?id=22940564

  • Saya ingin membuat situs web yang menerapkan gaya ini, tetapi tidak terpikir cocoknya untuk apa
    XFCE-winxp-tc, yang membuat Linux tampak seperti Windows XP, juga bagus. Chicago95 sudah banyak dikenal, tetapi jika menginginkan nuansa tahun 2004, https://github.com/rozniak/xfce-winxp-tc sangat cocok

    • Di internet, tidak perlu alasan untuk cocok; cukup ada keinginan untuk melakukannya
    • Saya selalu tidak puas karena tema-tema XFCE·GTK mengklaim akurat sampai tingkat piksel, tetapi kenyataannya tidak begitu
      Entah apakah itu karena kekhawatiran hukum

  • Cara menghilangkan tombol yang dinonaktifkan dan tidak menampilkannya sama sekali adalah salah satu tren UI paling membingungkan saat ini, dan justru melihat tombol abu-abu membuat hati lebih tenang

    • Pedoman lama Microsoft membahas kontrol yang dinonaktifkan secara rinci
      Nonaktifkan hanya ketika pengguna memperkirakan kontrol itu bisa diterapkan dan dapat dengan mudah menyimpulkan alasan penonaktifannya; jika tidak ada cara untuk mengaktifkannya atau pengguna tidak memperkirakan itu akan diterapkan, kontrol sebaiknya dihapus. Jika alasannya sulit diketahui, lebih baik biarkan tetap aktif dan tampilkan pesan kesalahan yang berguna saat digunakan secara keliru
      https://learn.microsoft.com/en-us/windows/win32/uxguide/top-...
      Namun pedoman modern https://learn.microsoft.com/en-us/windows/apps/develop/ui/co... tidak membahas nuansa seperti ini, bahkan tombol nonaktif itu sendiri pun tidak
    • Untuk fitur yang sejak awal tidak bisa dijalankan pengguna, seperti karena tidak punya hak administrator atau hanya punya izin melihat, memang lebih tepat menyembunyikan tombolnya
      Sebaliknya, jika pengguna punya izin menjalankan tetapi tidak bisa karena mode atau status saat ini, tombol abu-abu harus ditampilkan. Dalam formulir, tombol abu-abu pun perlu dibuat bisa diklik dan memberi tahu apa yang salah. Di sebuah maskapai besar, saya tidak bisa menyelesaikan check-in karena tidak ada panduan seperti ini
      Bantuan saat hover mouse dan tanda ? kecil sudah menghilang, dan semua perangkat lunak seolah menganggap orang sudah tahu cara memakainya sejak hari pertama

  • https://ka.ge adalah situs pribadi yang dibuat dengan 98.css, mereproduksi lingkungan desktop Windows 98 secara akurat sampai tingkat piksel dan benar-benar berfungsi dalam ukuran di bawah 1MB

  • Sayang sekali tab pada contoh tab multi-baris tidak berpindah posisi secara acak saat diklik seperti Windows asli

  • Di setiap versi baru sistem operasi, desainer UI harus mengemas sebagai peningkatan bahkan perubahan yang secara fungsional tidak perlu, memakai lebih banyak sumber daya, lebih lambat, dan tidak stabil

    • Melihat ungkapan less faster, sepertinya para desainer UI itu juga ikut mengutak-atik komentar ini

  • Sulit memahami mengapa orang begitu fokus pada pekerjaan reproduksi seperti ini, padahal UI Windows 98 bukan puncak pengalaman pengguna
    Kebengkakan saat ini adalah hasil dari penumpukan teknologi dan lapisan abstraksi, jadi intinya adalah memahami unsur yang diperlukan untuk pengalaman pengguna yang baik dan mencari komponen teknologi seminimal mungkin

    • Tepatnya, Windows 2000 adalah puncak desain UI, dan setelah itu terus memburuk
      Sudut membulat dan ruang kosong yang mengambang adalah contoh utamanya, sementara pengaruh macOS dan desainer web merusak kegunaan