- 98.css cho phép tạo giao diện web trông như Windows 98 chỉ bằng CSS, giúp tái hiện trung thực UI desktop cổ điển
- Khả năng truy cập dựa trên HTML ngữ nghĩa, với giả định rằng các thuộc tính ARIA cho nút, nhãn và nút biểu tượng được dùng đúng cách
- Không bao gồm JavaScript nên có thể gắn vào các dự án React, JavaScript thuần hoặc HTML thông thường bất kể framework nào
- Cung cấp các component phong cách Windows 98 như nút, checkbox, radio button, cửa sổ, tree view, tab, table view, thanh tiến trình, v.v.
- Có thể dùng qua npm, GitHub releases, unpkg và được phát hành theo giấy phép MIT, đồng thời nhận báo lỗi và pull request
Cách tái hiện giao diện Windows 98 bằng CSS
- 98.css là thư viện CSS để tạo giao diện trông như Windows 98
- Có thể xem dự án trên GitHub
- Khả năng truy cập dựa vào cấu trúc HTML ngữ nghĩa thay vì script riêng
- Nút phải dùng
<button>
- Phần tử nhập liệu cần có
<label> tương ứng
- Nút biểu tượng truyền đạt ý nghĩa bằng
aria-label
- Có thể ghi đè một phần style của phần tử mà vẫn giữ nguyên diện mạo cơ bản
- Ví dụ có thể tăng padding cho nút hoặc thêm màu cho nhãn của input
Cài đặt và tích hợp framework
- 98.css áp dụng phong cách Windows 98 cho phần tử HTML chỉ bằng CSS, không cần JavaScript
- Có thể dùng độc lập với frontend framework
- Có cung cấp ví dụ dùng với React và dùng với JavaScript thuần
- Cách dùng nhanh nhất là lấy stylesheet từ unpkg
<link rel="stylesheet" href="https://unpkg.com/98.css">;
npm install 98.css
Các form control cơ bản
-
Button
- Nút tiêu chuẩn có chiều rộng 75px, chiều cao 23px, với viền ngoài và viền trong nổi cùng padding ngang mặc định 12px
- Khi thêm class
default, có thể truyền đạt bằng trực quan hành động mặc định sẽ được thực thi bằng phím Enter trong Windows 98
- Ở trạng thái được nhấn, viền nổi sẽ chuyển sang dạng bị nhấn xuống
- Nút bị vô hiệu hóa vẫn giữ cùng kiểu viền nổi nhưng nhãn hiển thị mờ hơn
- Trạng thái focus được hiển thị bằng viền nét đứt nằm cách bên trong nội dung nút 4px
-
Checkbox
- Checkbox biểu thị lựa chọn độc lập hoặc không loại trừ lẫn nhau
- Khi được chọn, biểu tượng dấu chọn xuất hiện trong một panel lõm xuống, kèm theo nhãn cho tùy chọn ở bên cạnh
- Sau
<input type="checkbox"> cần có <label> với thuộc tính for trỏ đến id của input
- Có thể dùng các thuộc tính
checked, disabled
- Khi nhóm nhiều input, hãy bọc từng input trong một container có class
field-row để căn khoảng cách
-
Option Button
- Radio button là control dùng để chọn đúng một mục trong số các lựa chọn giới hạn
- Dùng với
<input type="radio">, và nếu gán cùng thuộc tính name thì chúng sẽ được nhóm lại
- Tương tự checkbox, có thể bọc bằng
field-row để giữ khoảng cách giữa các input nhất quán
- Hỗ trợ các thuộc tính
checked, disabled
-
Group Box
- Group box là khung hình chữ nhật để tổ chức nhiều control
- Dùng bằng cách bọc phần tử trong
fieldset, cung cấp viền ngoài lõm và viền trong nổi
- Có thể đặt
legend bên trong fieldset để gắn nhãn cho nhóm
Ô nhập văn bản, slider và dropdown
-
TextBox
- Text box là control hình chữ nhật cho phép người dùng nhập hoặc chỉnh sửa văn bản
- Ô nhập một dòng được render bằng
<input type="text">
- Khuyến nghị cung cấp
<label> tương ứng với thuộc tính for chính xác, và bọc cả hai trong container field-row
- Nếu dùng class
field-row-stacked, nhãn có thể được đặt phía trên thay vì bên cạnh ô nhập
- Ô nhập nhiều dòng dùng
textarea
- Có thể dùng các thuộc tính HTML tiêu chuẩn như
disabled, value
-
Slider
- Slider gồm một thanh biểu thị phạm vi điều chỉnh và một chỉ báo hiển thị giá trị hiện tại
- Được render bằng
<input type="range">
- Có thể đổi chỉ báo mặc định sang dạng hộp bằng class
has-box-indicator
- Nếu bọc trong
div dùng is-vertical, nó sẽ hiển thị thành slider dọc
- Để thay đổi độ dài slider dọc, cần chỉnh
width của input và height của div
-
Dropdown
- Hộp danh sách dropdown cho phép chỉ chọn một mục từ danh sách
- Ở trạng thái đóng, nó hiển thị giá trị hiện tại và người dùng mở danh sách để đổi giá trị
- Được render bằng các phần tử
select và option
- Giá trị mặc định là tùy chọn đầu tiên; có thể thay đổi lựa chọn mặc định bằng cách đặt
selected cho một option cụ thể
Cấu thành cửa sổ kiểu Windows 98
-
Title Bar
- Thanh tiêu đề nằm ở mép trên bên trong cửa sổ và dùng để nhận diện nội dung của cửa sổ
- Được cấu thành từ các class
title-bar, title-bar-text, title-bar-controls
- Nút đóng dùng
aria-label="Close" để truyền đạt ý nghĩa tới công nghệ hỗ trợ
- Cũng có thể dùng các
aria-label như Minimize, Maximize, Restore, Help
- Mỗi
aria-label có class style tương ứng, để dù văn bản aria-label ở ngôn ngữ khác vẫn không phát sinh vấn đề về render, truy cập hay bản địa hóa
- Nút maximize có thể bị vô hiệu hóa bằng
disabled
- Có thể thêm class
inactive để hiển thị như thanh tiêu đề không hoạt động
-
Window contents
- Class
window tạo container cửa sổ chứa thanh tiêu đề, cung cấp viền ngoài và viền trong nổi cùng padding
- Có thể chỉ định
width trong style của container để tự do điều chỉnh kích thước cửa sổ
- Nội dung bên dưới thanh tiêu đề có thể được vẽ bằng class
window-body
-
Status Bar
- Thanh trạng thái thường nằm ở dưới cùng của cửa sổ và hiển thị trạng thái hiện tại hoặc thông tin ngữ cảnh
- Render thanh trạng thái bằng class
status-bar
- Mỗi phần tử văn bản dùng class
status-bar-field
- Ví dụ bao gồm các trường trạng thái như
Press F1 for help, Slide 1, CPU Usage: 14%
Danh sách, tab, bảng và hiển thị tiến trình
-
TreeView
- Tree view là một hộp danh sách đặc biệt hiển thị tập hợp đối tượng dưới dạng dàn ý thụt đầu dòng theo quan hệ phân cấp logic
- Được render bằng cách gắn class
tree-view cho phần tử ul
- Các phần tử con
li có thể chứa nội dung tùy ý
- Nếu lồng
ul, cấu trúc cây sẽ được hiển thị bằng viền nét đứt và thụt lề
- Có thể tạo các phần có thể mở rộng bằng cách đặt danh sách con trong phần tử
details
-
Tabs
- Tab control được dùng để định nghĩa nhiều trang logic hoặc các phần thông tin trong cùng một cửa sổ
- Gắn
role="tablist" cho phần tử menu, và role="tab" cho các phần tử con li
- Việc quản lý tab cần được xử lý bằng mã JavaScript do người dùng viết
- Có thể thêm
aria-selected="true" cho tab đang hoạt động
- Tab nhiều hàng có thể tạo bằng cách thêm class
multirows vào thẻ menu
-
TableView
- Table view được render bằng phần tử
table
- Để cung cấp viền phù hợp và container overflow, hãy bọc nó trong
div có class sunken-panel
- Chỉ cần thêm một chút script là có thể biến table view thành dạng tương tác
- Nếu gán class
interactive cho table, con trỏ chuột dạng pointer sẽ hiện khi hover lên các hàng nội dung
- Nếu gán class
highlighted cho một hàng, hàng đó sẽ trông như đang được chọn
-
Progress Indicator
- Thanh tiến trình dùng để hiển thị tỷ lệ hoàn thành của một tác vụ dài
- Mặc định là thanh tiến trình liền khối
- Có thể khai báo thanh tiến trình phân đoạn bằng class
segmented
- Tiến độ được biểu thị bằng style
width của progress-indicator-bar
Viền trường và tham gia mã nguồn mở
-
Field borders
- Text box, checkbox, hộp danh sách dropdown, spin box và list box dùng kiểu viền trường
- Cùng kiểu này cũng có thể dùng cho vùng làm việc bên trong cửa sổ
- Viền trường dùng viền ngoài lõm và viền trong lõm
- Bên trong hầu hết control sử dụng màu button highlight
- Khi các trường văn bản như text box và combo box ở trạng thái chỉ đọc hoặc bị vô hiệu hóa, phần bên trong dùng màu button face
- Các class
field-border, field-border-disabled, status-field-border được cung cấp cho mục đích sử dụng chung
- Những class này chỉ định nghĩa viền, màu nền và padding tối thiểu, nên thường cần tự chỉ định thêm padding
-
Giấy phép và đóng góp
- 98.css là dự án MIT licensed
- Việc xác nhận và báo lỗi sử dụng GitHub issues page
- Dự án hoan nghênh pull request, và đặc biệt cho biết sẽ cung cấp code review cho những người mới tham gia mã nguồn mở
- Dự án hướng tới việc trở thành nơi tích lũy trải nghiệm mã nguồn mở thú vị
1 bình luận
Ý kiến trên Hacker News
Đã làm một thứ tương tự, bao gồm 3.11, 95, 2000, XP, CDE, Mac OS 9 cùng các bảng màu mặc định của từng hệ: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
Trọng tâm không phải là tái hiện hoàn hảo đến từng pixel, mà là một dạng vẫn hoạt động tốt và trông đẹp trong môi trường hiện đại như màn hình độ phân giải cao
Vì vậy, toàn bộ biểu tượng và ký hiệu đều được làm lại bằng SVG, và khi thêm XP cùng Mac OS 9 tôi đã đăng lên Show HN nhưng không nhận được nhiều chú ý
Cá nhân tôi thấy Windows 2000 là đỉnh cao của thiết kế UI
Thứ tôi muốn thấy thêm là theme cho bảng dữ liệu, và sẽ càng hay nếu có cả các bảng tương tác hoạt động như danh sách và lưới
https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
Tôi là người tạo ra nó. Rất vui khi thấy nó được đưa lên lại
Đây là dự án phục hồi sau burnout của tôi, và gần đây tôi đã viết vài suy nghĩ liên quan: https://notes.jordanscales.com/98-css-reflections
[0]: https://www.mathsheets.net/
Thật thú vị khi retro computing như các trò chơi cũ hay hệ điều hành cũ có thể mang lại sự an ủi, thậm chí có tính chữa lành
Tôi có cảm giác tương tự khi chơi các game Gameboy, Nintendo thời thơ ấu trên trình giả lập hoặc chạy Macintosh System 9, và cũng nghĩ đến Pico-8, SerenityOS, TempleOS
Điểm chung là đó là những môi trường điện toán kiểu hoài cổ mà người dùng có thể hiểu và kiểm soát hoàn toàn; có lẽ còn có những động lực tâm lý sâu hơn, như một sandbox an toàn đóng vai trò công cụ trị liệu
Công nghệ và xã hội ngày nay có quá nhiều dark pattern mang tính đối kháng, nên việc tìm được những không gian vật lý và tinh thần được thiết kế vì sự thoải mái của người dùng đem lại cảm giác nhẹ nhõm lớn
Ước gì cũng có bản cho Windows 2000 và Windows XP
Những thứ tôi đã gom lại:
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 đã trở thành một HN classic vì những lý do chính đáng
Các thảo luận trước đây:
https://news.ycombinator.com/item?id=33310554 - tháng 10/2022, 179 bình luận
https://news.ycombinator.com/item?id=22940564 - tháng 4/2020, 211 bình luận
Cũng đáng xem thêm HyperCard Simulator và Decker
https://hn.algolia.com/?q=hypercard
Tôi nhớ vào cuối thập niên 90, Microsoft có các tên màu tích hợp trong CSS khớp với theme và màu sắc desktop của Windows
Tôi không biết giờ chúng còn hoạt động không; trong IDE thì tất cả đều hiện màu đỏ nên có vẻ là không hoạt động
Có thể dùng các giá trị như
windowtext,appworkspace,menutext,threedlightshadow,threedshadow,threedfaceđể tạo UI web khớp với look-and-feel desktop của người dùngNăm 1998, tôi đã dùng như vậy trong một ứng dụng intranet dựa trên trình duyệt, nhờ đó nó trông giống native hơn
https://drafts.csswg.org/css-color/#css-system-colors
Các màu cũ đều đã được đánh dấu dự kiến loại bỏ:
https://drafts.csswg.org/css-color/#deprecated-system-colors
Kiểu này không hợp với DPI không mặc định
Ví dụ, khi đặt tỷ lệ màn hình ở 150%, để thử căn theo pixel vật lý, bạn có thể chạy như sau trong console của trình duyệt:
with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`Nếu nhân tỷ lệ với một số nguyên, bạn có thể có cảm giác được phóng to rõ nét; dù không hoàn hảo 100%, trông vẫn gần hơn nhiều với cách render dự định
withnhư thế này vừa đáng sợ vừa rất mới mẻVừa thích vừa ghét
Có vẻ crowdwave đã dùng một chút cái này: https://www.crowdwave.com
Những thứ đáng xem cùng: https://botoxparty.github.io/XP.css và https://khang-nd.github.io/7.css
Ngày nay, việc cần có không gian để “thở”, như giữa các lựa chọn trong một nhóm radio button, gần như đã trở thành câu thần chú; nhưng khoảng cách chật hơn của UI ngày xưa cho cảm giác chân thật hơn, tôn trọng người dùng cuối hơn và có mật độ thông tin cao hơn
Tôi không muốn vứt bỏ hết mọi đổi mới, nhưng thường rất nhớ UI cũ
Tôi không thích phần trang trí cửa sổ của Windows 7, nhưng phần còn lại có vẻ dùng cho ứng dụng Electron cũng không tệ
UI Windows XP là UI tốt nhất trong tất cả các UI Windows; nó hiện đại vừa đủ để tạo cảm giác tinh tế, nhưng vẫn có độ tương phản nên dễ nhìn, dễ đọc và dễ hiểu
UI Windows 7 thì quá bóng bẩy và đặt hình thức lên trước khả năng đọc; còn Windows 98 thì quá cũ kỹ, toàn màu xám nên cũng thiếu tương phản
https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
https://world-playground-deceit.net/
Nhìn những thứ như thế này khiến tôi muốn làm đến cùng
Chỉ nhìn bằng mắt cũng thấy có vẻ không phải MS Sans Serif từng được render trên Windows 95 và Windows 98
https://web.archive.org/web/20230603234837/https://vistaserv...
Stylesheet kiểu XP[1] được liên kết trong một bình luận khác vẽ chữ và hình khối ở độ phân giải cao, nhờ đó giảm bớt ràng buộc trong khi vẫn giữ cảm giác của UI
Lý do tôi thích UI kiểu 98 không phải vì độ phân giải thấp, mà vì sự rõ ràng và đơn giản
[1] https://news.ycombinator.com/item?id=42056921
Tôi thấy cái này tốt hơn nhiều so với những gì xuất hiện sau nhiều năm “nghiên cứu” và “cải tiến” UX/UI
Năm 1998 tôi mới một tuổi, nên không phải vì tôi thuộc thế hệ cũ
Tôi chỉ ghét những nút trông không giống nút, tab trông không giống tab, và các trường văn bản mà phải bấm vào mới biết là có thể chỉnh sửa
Apple có lẽ đã nghiên cứu ở mức nào đó cho MacOSX, nhưng trong 20 năm qua, đặc biệt trên mobile, tôi có cảm giác các tính năng cứ bị ném vào mà không có khái niệm về khả năng khám phá hay tính nhất quán
Trên hết, có vẻ việc các công ty muốn “branding nhất quán” hoặc “diện mạo riêng” là nguyên nhân của nhiều vấn đề
Và trên trang web đó còn có nút “show code” ngụy trang như văn bản bình thường