在大多数人的认知里，CSS 只是用来美化网页的样式表语言，和编程、运算关系不大，甚至不少程序员们还常拿“CSS 算不算编程语言”当作玩笑。
不过近日，一位名为 Lyra Rebane 的开发者坐实了「CSS 就是一门编程语言」的说法，她仅凭纯 CSS 写出了一个 x86 CPU 模拟器，全程没有使用一行 JavaScript、WASM 代码，让原本只负责网页样式的 CSS，真正实现了“计算”的功能。
这个看似“离经叛道”的项目，也让人们重新审视 CSS 的能力边界。
一个纯 CSS 打造的 x86 CPU 模拟器，能跑 C 程序还带交互
据 Lyra Rebane 介绍，她开发的这个项目名为 x86css ( https://lyra.horse/x86css/ ) ，本质上是一个基于 CSS 实现的 16 位 x86 CPU 模拟器。
简单来说，就是用网页样式语言在浏览器里造了一台“迷你电脑”。这台“CSS 电脑”并非花架子，而是具备了实际的运算和交互能力，甚至能像真实的 CPU 一样执行机器代码。
基于此，她建了一个网页，展示一个用 C 语言编写的程序，经过 GCC 编译成原生的 8086 机器码后，完全在 CSS 中执行的过程。
从功能来看，x86css 配备了一个基础的显示界面和虚拟键盘，还预装了一些程序，比如用于计算斐波那契数列、生成 Pascal 三角形，甚至还有一个类 Wordle 的文字游戏，这些程序都能在纯 CSS 环境下独立运行。
更令人惊讶的是，它并非只能运行开发者预设的程序，普通开发者也能自己编写 C 语言代码，通过专用编译器编译后，在这个 CSS 模拟器上执行。
很多人看到这个项目的第一反应是：“它能跑 Doom 吗？”这是游戏和编程圈的经典问题，也是对模拟器性能的终极考验。
答案是暂时不能，原因并非 CSS 性能不足，而是这个模拟器目前仅实现了 16 位 x86（8086）架构的核心功能，缺少中断处理、端口输入输出等游戏必备的关键特性，而 Doom 作为 32 位程序，还需要 32 位 CPU、4MB 内存和保护模式支持，这些都是当前版本的 x86css 尚未实现的。
但即便如此，能让 CSS 实现 CPU 的核心运算功能，已经是前所未有的突破。
不用 JS、不依赖 AI 大模型，CSS 如何实现“计算”？
在普通人看来，CSS 只是用来设置字体、颜色、布局的工具，怎么可能实现 CPU 的运算逻辑？
Lyra Rebane 的操作，全靠把现代 CSS 的新特性玩到了极致，而且全程手搓代码。
首先明确一点，这个 x86 CPU 是纯 CSS 驱动的，并没有借助 JavaScript 或 WebAssembly。
对此，有人发现 Lyra Rebane 分享的网站里包含了<script>标签，直言道：“页面里不是还有 <script> 吗？总得靠点 JavaScript 吧？”
Rebane 的回答很干脆：不需要。那个 <script> 标签只是为了提供一个更稳定的“时钟信号”，让模拟器运行得更快一点。即便把浏览器里的脚本功能关掉，这个模拟器依然可以运行，因为 CSS 本身也实现了一套不依赖 JavaScript 的“时钟机制”。所以从原理上讲，它完全不需要 JavaScript。
Lyra Rebane 还表示，自己实现这个“CSS 时钟”的方式，是利用动画加上一种叫“样式容器查询”的功能。简单来说，就是通过样式变化来推动程序一步步往下执行。这样做的好处是，程序可以自动运行，不需要你点击或操作页面。但代价是，速度会慢一点，稳定性也稍微差一点。
她之所以坚持这么做，还有一个原因。此前也有人用“鼠标悬停”来驱动 CSS 运算——只要把鼠标放在页面上，样式就会不断触发变化，程序就能跑起来。这种方式速度更快，也更稳定。但它必须依赖用户一直按着鼠标，有人因此质疑这种方案算不算真正意义上的“自动计算”。Rebane 不想留下这种争议，所以选择了完全自动执行的方案：页面加载后，哪怕你什么都不做，它也会自己“跑”下去。
除了没有用到 JS 之外，这个项目也几乎没用到 HTML。
至于为什么用「几乎」这个词，Lyra Rebane 解释称：这个“CPU”的核心逻辑全部写在 CSS 里，本身并不依赖 HTML 结构。但现实问题是，你总得有个 <style> 标签才能把 CSS 放进网页里，所以这一步是不可避免的。在 Firefox 浏览器里，理论上可以加载几乎没有 HTML 的 CSS 文件，但目前这个演示只在基于 Chromium 的浏览器里才能运行，比如 Chrome 或 Edge。
另外，Lyra Rebane 连 CSS 预处理器都没用，基础代码全是在编辑器里手写的，只有那些高度重复的代码片段，才写了个 Python 脚本辅助生成。
至于 AI 大模型？她的回答也特别干脆：没用，也觉得大模型做不了这个项目。因为这不仅是语法堆砌，而是对 CSS 执行机制、浏览器行为以及底层计算模型的深入理解和精确控制。
仅兼容 Chromium，开发背后的小遗憾
正如上文所提及到的，虽然 x86css 项目足够惊艳，但它目前并非一个能跨浏览器使用的通用项目，仅支持 Chrome、Edge 等 Chromium 内核浏览器，这成为了一个小小的遗憾。
之所以存在浏览器兼容性问题，核心原因还是该项目依赖了一些 CSS 新特性，如 if()语句、样式查询、自定义@functions 等，目前仅在 Chromium 内核中实现，Firefox、Safari 等浏览器尚未支持这些特性。
尽管这些特性已经被纳入 CSS 官方规范，未来大概率会成为通用标准，但现阶段还处于“实验性”阶段。
Lyra Rebane 在博客中写道，「她平时的项目都会兼顾 Firefox 浏览器，但这次的 CSS CPU 模拟器项目，由于依赖的特性过于前沿，兼顾 Firefox 变得不切实际」。
不过她也期待，随着浏览器厂商对 CSS 新特性的逐步支持，未来这个项目能实现跨浏览器运行。
除此之外，这个 CSS 模拟器还有一些小的“不完美”：它并未实现 x86 架构的所有指令和特性，比如 CF/OF 标志位的设置等，一些细节行为也和真实的8086 CPU 略有差异。
但在 Lyra Rebane 看来，这并不重要——她的开发思路是“按需实现”，即先用 C 语言写出自己想运行的程序，然后用 GCC 以不同的优化等级把它们编译出来，再把编译生成的每一条指令逐一实现。这样一来，她就能确保，程序运行所需要的所有指令都已经被完整支持。
从性能来看，这个 CSS 模拟器的运行效率自然无法和真实的 CPU 相比，甚至也比不上用 JavaScript 编写的模拟器。但 Lyra Rebane 并不在意，因为这个项目的核心并非“追求性能”，而是“探索可能性”。
项目已开源，探索 CSS 的能力边界
当被问到这个项目的实际用途时，Lyra Rebane 只是简单地表示，这是一个做起来会很有趣，也超酷的项目。
虽然它注定成不了一个实用的开发工具，但其意义远不止“有趣”这么简单。长久以来，编程圈一直有一个争议：“HTML 和 CSS 算不算编程语言？”
大多数开发者的答案是否定的，因为它们没有通用编程语言的核心特性——逻辑运算、状态机、图灵完备性，只能完成特定的网页开发任务。但 Lyra Rebane 的这个项目，让 CSS 真正实现了“图灵完备”的核心能力，能用纯 CSS 实现 CPU 的运算逻辑，这让人们不得不重新思考：CSS 的本质到底是什么？它的能力边界到底在哪里？
这个项目也让人们看到了 Web 技术的无限可能。随着 CSS 的不断发展，它早已不是那个只能设置网页样式的简单语言，而是逐渐具备了逻辑判断、动态响应、甚至运算的能力。未来，随着更多新特性的加入，CSS 或许会在更多意想不到的领域发挥作用。
目前，Lyra Rebane 已经将 x86css 项目的代码完全 开源 ( https://github.com/rebane2001/x86css ) ，让感兴趣的开发者能自己编译程序、探索这个 CSS 模拟器的奥秘。
参考链接：
这个项目无疑是一个极佳的思维实验，它挑战了我们对技术边界的固有认知。类似这样富有探索精神的项目，正是推动整个开发者社区不断前行的动力。在 云栈社区 等平台上，也有许多开发者分享着他们突破常规的技术实践与思考。
发表于 22 小时前
|
查看: 1|
回复: 0
