CSS数据库查询？当然我们可以！

听起来有点滑稽，不是吗？CSS 数据库查询。但是，嘿，CSS 能够与其他语言进行通信，因为它可以设置其他语言可以读取的事物的数值。此外，CSS 可以请求其他文件，我想服务器可以用它从数据库请求的东西来响应该请求。

但我有点跑题了。CSS 数据库查询的想法是前几天流传的一个关于招聘人员寻找能够使用 CSS 连接到数据库的开发人员的笑话推文。Lee Meichin 写道：“是的，我可以用 CSS 连接到数据库”，这是一个同样好笑的回应。

CSS 数据库查询背后的技巧是什么？

它相当巧妙：

1. 使用经过手动修改为 ESM 版本的 SQL.js，它是 JavaScript 中的 SQLite。
2. 准备 SQL.js 可以查询的数据库。
3. 构建一个 Houdini PaintWorklet，它以 JavaScript 执行查询并将结果以 PaintWorklet 的 <canvas></canvas> 方式绘制回屏幕。
4. 通过 CSS 自定义属性将要运行的查询传递到 worklet。

所以，最终用法是这样的：

CSS.paintWorklet.addModule('./cssdb.js')

main {
  --sql-query: SELECT name FROM test;
  background: paint(sql-db);
}

你必须承认，这是在 CSS 中连接和查询数据库。

这让我想起了 Simon Willison 去年用完全不同的方法做到了这一点。他的概念是，您有 RESTful 端点，例如 /api/roadside_attractions，它返回 JSON 数据。但作为替代端点，您可以将其设为 /api/roadside_attractions.css，它将返回一个有效的 CSS 文件，其中所有数据都作为 CSS 自定义属性。

所以，它看起来像这样：

<link href="/api/roadside_attractions.css" rel="stylesheet">
.attraction-name:after { content: var(--name); }
.attraction-address:after { content: var(--address); }
<p>Attraction name: </p>
<p>Address: </p>

同样，这本质上是在 CSS 中连接到数据库（尽管需要 HTML）。你可以亲眼看到它的工作原理。

以上是CSS数据库查询？当然我们可以！的详细内容。更多信息请关注PHP中文网其他相关文章！