整理 | 屠敏

出品 | CSDN（ID：CSDNnews）

在大多數(shù)人的認(rèn)知里，CSS 只是用來美化網(wǎng)頁的樣式表語言，和編程、運(yùn)算關(guān)系不大，甚至不少程序員們還常拿“CSS 算不算編程語言”當(dāng)作玩笑。

不過近日，一位名為 Lyra Rebane 的開發(fā)者坐實(shí)了「CSS 就是一門編程語言」的說法，她僅憑純 CSS 寫出了一個(gè) x86 CPU 模擬器，全程沒有使用一行 JavaScript、WASM 代碼，讓原本只負(fù)責(zé)網(wǎng)頁樣式的 CSS，真正實(shí)現(xiàn)了“計(jì)算”的功能。

這個(gè)看似“離經(jīng)叛道”的項(xiàng)目，也讓人們重新審視 CSS 的能力邊界。

• 試玩地址：https://lyra.horse/x86css/

一個(gè)純 CSS 打造的 x86 CPU 模擬器，能跑 C 程序還帶交互

據(jù) Lyra Rebane 介紹，她開發(fā)的這個(gè)項(xiàng)目名為 x86css（https://lyra.horse/x86css/），本質(zhì)上是一個(gè)基于 CSS 實(shí)現(xiàn)的 16 位 x86 CPU 模擬器。

簡單來說，就是用網(wǎng)頁樣式語言在瀏覽器里造了一臺“迷你電腦”。這臺“CSS 電腦”并非花架子，而是具備了實(shí)際的運(yùn)算和交互能力，甚至能像真實(shí)的 CPU 一樣執(zhí)行機(jī)器代碼。

基于此，她建了一個(gè)網(wǎng)頁，展示一個(gè)用 C 語言編寫的程序，經(jīng)過 GCC 編譯成原生的 8086 機(jī)器碼后，完全在 CSS 中執(zhí)行的過程。

從功能來看，x86css 配備了一個(gè)基礎(chǔ)的顯示界面和虛擬鍵盤，還預(yù)裝了一些程序，比如用于計(jì)算斐波那契數(shù)列、生成 Pascal 三角形，甚至還有一個(gè)類 Wordle 的文字游戲，這些程序都能在純 CSS 環(huán)境下獨(dú)立運(yùn)行。

更令人驚訝的是，它并非只能運(yùn)行開發(fā)者預(yù)設(shè)的程序，普通開發(fā)者也能自己編寫 C 語言代碼，通過專用編譯器編譯后，在這個(gè) CSS 模擬器上執(zhí)行。

很多人看到這個(gè)項(xiàng)目的第一反應(yīng)是：“它能跑 Doom 嗎？”這是游戲和編程圈的經(jīng)典問題，也是對模擬器性能的終極考驗(yàn)。

答案是暫時(shí)不能，原因并非 CSS 性能不足，而是這個(gè)模擬器目前僅實(shí)現(xiàn)了 16 位 x86（8086）架構(gòu)的核心功能，缺少中斷處理、端口輸入輸出等游戲必備的關(guān)鍵特性，而 Doom 作為 32 位程序，還需要 32 位 CPU、4MB 內(nèi)存和保護(hù)模式支持，這些都是當(dāng)前版本的 x86css 尚未實(shí)現(xiàn)的。

但即便如此，能讓 CSS 實(shí)現(xiàn) CPU 的核心運(yùn)算功能，已經(jīng)是前所未有的突破。

不用 JS、不依賴 AI 大模型，CSS 如何實(shí)現(xiàn)“計(jì)算”？

在普通人看來，CSS 只是用來設(shè)置字體、顏色、布局的工具，怎么可能實(shí)現(xiàn) CPU 的運(yùn)算邏輯？

Lyra Rebane 的操作，全靠把現(xiàn)代 CSS 的新特性玩到了極致，而且全程手搓代碼。

首先明確一點(diǎn)，這個(gè) x86 CPU 是純 CSS 驅(qū)動(dòng)的，并沒有借助 JavaScript 或 WebAssembly。

對此，有人發(fā)現(xiàn) Lyra Rebane 分享的網(wǎng)站里包含了