整理 | 屠敏
出品 | CSDN(ID:CSDNnews)

在大多数人的认知里,CSS 只是用来美化网页的样式表语言,和编程、运算关系不大,甚至不少程序员们还常拿“CSS 算不算编程语言”当作玩笑。

不过近日,一位名为 Lyra Rebane 的开发者坐实了「CSS 就是一门编程语言」的说法,她仅凭纯 CSS 写出了一个 x86 CPU 模拟器,全程没有使用一行 JavaScript、WASM 代码,让原本只负责网页样式的 CSS,真正实现了“计算”的功能。

这个看似“离经叛道”的项目,也让人们重新审视 CSS 的能力边界。

  • 试玩地址:https://lyra.horse/x86css/

打开网易新闻 查看精彩图片

一个纯 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 分享的网站里包含了