我搞了个1984年的Mac桌面，纯CSS的
上周我闲着没事翻 GitHub，想找个能让我摸鱼时假装在写代码的东西，结果挖到一个叫System.css的库，直接让我电脑屏幕穿越回 1984 年。
这玩意儿是个纯 CSS 设计系统，专门用来搭建长得像苹果 System 6的界面——就是那个从 1984 年跑到 1991 年的老系统，黑白单色、像素感拉满。最妙的是它完全不用 JavaScript，随便你用什么前端框架都能套，想改样式直接覆盖 CSS 变量就行，自由度很高。
【按钮按下去会“反色”，爽】 它的按钮默认 59px 宽、20px 高，用.btn 类就能生成。普通状态是圆角矩形，按下去直接黑白反转，特别像当年 Mac 的物理反馈。还有.btn-default可以加个外边框表示“推荐选项”，禁用按钮文字变灰，加个 disabled 属性就搞定。连动态宽度都支持，比如“Buttons can be long!!”这种长文本也能自适应。
【菜单栏和窗口，细节控狂喜】 菜单栏用.menu-bar类，支持多级下拉，甚至能单独设置某个菜单项没有下拉（加 aria-haspopup="false"）。窗口组件更讲究：标题栏至少 19px 高，带关闭按钮、标题文字和“赛车条纹”，字体用的是Chicago 12pt。还有个.inactive-title-bar类，专门用来做非活跃窗口的灰化效果。窗口内容区用.window-pane包一下就能往里塞东西，单选按钮、复选框、下拉菜单、文本框全都有，连输入框的 placeholder 都给你配好了复古示例文字。
说实话，这库不只是一个玩具。你要是做个人主页、复古风工具站、或者想给项目加个彩蛋，直接引用它的 CSS 就能出效果。而且所有组件都遵循Apple HI Guidelines里的规范，连尺寸和交互逻辑都还原了——比如单选按钮同一组只能选一个，复选框用 square 加标签。我试了试把它的菜单栏改成标准下拉，一行代码都不用改，加个 aria-haspopup 属性就行。
你要是也喜欢这种老 Mac 的质感，可以去搜System.css的 GitHub 仓库，作者是sakofchit，文档写得特别清楚，每个组件都有示例代码和展示。你打算拿它做什么？我准备拿它做个假的“系统更新”页面糊弄朋友。
评论
暂无评论