CSS 数据库查询?没问题!

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费赠送额度!

听起来有点傻,不是吗?CSS 数据库查询。 但是,嘿,CSS 能够与其他语言对话,因为它可以设置其他语言可以读取的元素的值。 此外,CSS 可以请求其他文件,我想服务器可以响应该请求,并将它从数据库请求的内容作为响应。

但我有点超前了。 CSS 数据库查询的想法是前几天流传的一条玩笑推文,内容是招聘人员正在寻找能够使用 CSS 连接到数据库的开发人员。 Lee Meichin 写了 “是的,我可以在 CSS 中连接到数据库”,作为同样有趣的反驳。

Screenshot of a tweet sarcastically looking for someone who can do CSS database queries.

CSS 数据库查询背后的诀窍是什么?

它经过精心设计

  1. 使用经过手工修改为 ESM 版本的 SQL.js,它是在 JavaScript 中的 SQLite
  2. 准备一个 SQL.js 可以查询的数据库。
  3. 构建一个 Houdini PaintWorklet,它在 JavaScript 中执行查询并将结果以 <canvas> 式的方式绘制回屏幕上,PaintWorklets 就是这样做的。
  4. 通过 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)。 你可以 亲眼看到它的工作原理