程序员没有使用AI和手工制作CSS，而是“完全”创建了一个也可以运行C程序的x86 CPU模拟器！网友：谁敢说CSS不是编程语言？

一个开发者，竟然能仅靠CSS代码，在零JS、零WASM的情况下，于浏览器里打造出一台能跑C程序的16位x86 CPU模拟器，你以为CSS就只能给网页做做美化装饰吗？这可不是那种仅用于概念验证一类的，而是实实在在可以交互，还能够运行斐波那契数列的“电脑”。要是你还认为CSS和编程没什么关联，那么这篇文章会完全颠覆你的认知，并且带你瞧瞧怎样借助现代CSS特性 玩出这种令人惊叹的操作。

从美化工具到模拟器背后是哪些特性撑腰

好多人觉得CSS3之后仅仅是增添了圆角以及阴影，实际上这些年CSS暗暗地融入了数目众多的与计算相关的特性。自定义属性也就是CSS变量，使得样式具备了动态变化的潜在可能性，而这是达成状态存储的根基所在。

紧要的一步是@property规则，它准许你界定带类型的CSS变量。借由syntax指定成数字或者长度，这些变量便可参与切实的数值运算，而不单单是字符串替换。这使得CSS具备了处理寄存器数据的能力。

状态机不是编程语言的专利用选择器就能模拟

状态转移是CPU的核心部件，根据条件应用各异样式这是CSS所最为擅长的。对于复选框而言，借助:checked伪类能够模拟比特位的0状态与1状态，一组复选框共同构成了内存以及寄存器。

仰仗组合~兄弟选择器以及:checked状态，能够收获类似“一旦某条件得以满足之际便开展某操作”这般的逻辑。就像模拟一条指令予以执行之时，按照操作码的各异，引发不一样的样式准则，进而达成指令的分发与执行。

动画循环代替时钟信号让CSS动起来

CPU每一步操作都得靠时钟信号来驱动，CSS里不存在循环语句，不过可用动画进行替代。定义出一个无限轮回的动画，于动画关键帧当中逐步去改变变量的值，以此驱动整个模拟器的状态更新。

处在关键帧之间时，能够去定义复杂的样式变化，每一步所产生的改变，都对应着CPU的一个微操作，将animation-delay进行巧妙使用以后，可以对每一步的触发时机做到精确控制，从而去模拟出指令的时序逻辑。

存储是模拟器的基本功自定义属性当内存用

能够容纳16位数据的CPU，需要数量众多的存储单元，而CSS变量恰好能够承担起这样的职责。每一个变量都能够存储一个16位的数值，借助数值的运算以及传递，达成内存的读写操作。@property能够保证这些变量被作为数字来进行处理，可以直接进行加减运算。

选择器同样能够用以达成内存地址译码，借助查验表征地址的变量数值，凭借属性选择器去匹配各异的范围，进而挑选出相应的存储单元变量来开展读写操作，此情形如同于在CSS当中构建起了一条简易的地址总线。

交互界面不用JS全靠表单元素撑场面

这个 CSS CPU，用户要怎么与之交互呢？答案是借助 以及表单元素。虚拟键盘能够用一组单选按钮进行实现，按下不一样的按键，改变某个 CSS 变量的值，以此来模拟键盘输入。显示界面呢，则能够通过 ::before 和 ::after 伪元素的 content 属性去展示变量值，进而实现屏幕输出。

有一种类似Wordle的文字类游戏，其逻辑全部存在于CSS当中，每一次进行猜测操作是借助单选框组来触发的，CSS规则会对猜测值以及预设答案展开比对，依据比对结果进而改变格子的背景颜色，这完全是依靠选择器的条件判断方面的能力。

编译和运行C代码需要打通整个工具链

Lyra Rebane的工作并非仅仅局限于编写CSS，她构建起了一整套完整的工具链，开发者所撰写的C代码首先会借助标准GCC编译成为8086机器码，之后她编写出了一个转换工具，该工具用于把这些机器码翻译成为等同的CSS规则。

每条机器指令被翻译过程映射成一组CSS变量以及规则，最终生成的CSS文件涵盖了整个程序的逻辑还有初始数据，浏览器加载此CSS文件之后，动画驱动模拟器逐一条地“执行”这些样式规则，屏幕上便可看到程序运行结果。

或许这个项目给予你的最为重大的启发并非是去复制一个中央处理器，而是要再度审视自己常常会用到的工具。你可曾思索过，在你每日所运用的技术当中，还潜藏着哪些尚未被你察觉到的有着超凡能力的特质？欢迎于评论区域分享你的所见所闻，请不要忘记点赞，以便让更多的人能够看到层叠样式表的另外一面。