听起来有点傻,不是吗?CSS 数据库查询。 但是,嘿,CSS 能够与其他语言对话,因为它可以设置其他语言可以读取的元素的值。 此外,CSS 可以请求其他文件,我想服务器可以响应该请求,并将它从数据库请求的内容作为响应。
但我有点超前了。 CSS 数据库查询的想法是前几天流传的一条玩笑推文,内容是招聘人员正在寻找能够使用 CSS 连接到数据库的开发人员。 Lee Meichin 写了 “是的,我可以在 CSS 中连接到数据库”,作为同样有趣的反驳。

CSS 数据库查询背后的诀窍是什么?
它经过精心设计
- 使用经过手工修改为 ESM 版本的 SQL.js,它是在 JavaScript 中的 SQLite。
- 准备一个 SQL.js 可以查询的数据库。
- 构建一个 Houdini
PaintWorklet
,它在 JavaScript 中执行查询并将结果以<canvas>
式的方式绘制回屏幕上,PaintWorklets
就是这样做的。 - 通过 CSS 自定义属性将您想要运行的查询传递到 worklet。
所以,最终的使用方式是这样的
<script>
CSS.paintWorklet.addModule('./cssdb.js')
</script>
<style>
main {
--sql-query: SELECT name FROM test;
background: paint(sql-db);
}
</style>
你得承认,这确实是在 CSS 中连接和查询数据库。
这让我想起了 Simon Willison 去年做的事情,他使用了完全不同的方法。 他的概念是,您拥有 RESTful 端点,例如 /api/roadside_attractions
,它返回 JSON 数据。 但是,作为替代端点,您可以将其改为 /api/roadside_attractions.css
,它将返回一个有效的 CSS 文件,其中包含所有数据,以 CSS 自定义属性 形式。
所以,它看起来像这样
<link rel="stylesheet" href="/api/roadside_attractions.css">
<style>
.attraction-name:after { content: var(--name); }
.attraction-address:after { content: var(--address); }
</style>
<p class="attraction-name">Attraction name: </p>
<p class="attraction-address">Address: </p>
再次,这本质上是在 CSS 中连接数据库(尽管需要 HTML)。 你可以 亲眼看到它的工作原理。
如果你使用 js,它就不是用 css 连接的。
查询在 CSS 中,正如标题所说。
初始调用在 CSS 中,即使它调用的内容是 JavaScript。 所以从技术上讲,如果你眯着眼睛看,它是在通过 CSS 连接。
Chris,你需要删除这个,否则我们会在职位要求中看到它。
为什么要这样做? 使用它的优势是什么?
动机是这是你的工作。 这种方法的优势是显而易见的,这种方法的长期可行性决定了我们的架构原型。 这使我们能够确保干净的开发周期,同时减少诸如有毒代码膨胀 (TCB) 之类的噪声。 随着你在职业生涯中的成长,你会开始欣赏这种东西。
这太搞笑了。 我喜欢!