故事背景
某公司招聘需求如下:
我们正在寻求可以使用CSS连接数据库的前端伙伴~
自从我上次开始一个高质量的“发帖”以来，已经有很长一段时间了，事实上，它已经很长一段时间了，那时候我的词汇表中可能还没有“水帖”这个词。
为此，我受到了一个早期项目的启发，该项目基于区块链初创公司将投资者的脸投影到3D立方体上让我想起了以前的互联网，那时一切都很奇怪。
好汉不提当年勇。所以今天，我将讨论如何管理我自己的新项目:sqlcss.xyz[1]
顾名思义，这就是使用CSS连接数据库的方式。不幸的是，它只能在Chrome中工作，但你可以提供任何你喜欢的SQLite数据库，并通过CSS查询它。
它是如何工作的?
首先我们需要用到一组被亲切地称为Houdini[2]的api，它让你的浏览器能够通过Javascript对象模型来控制CSS。换言之，这意味着您可以定制CSS样式、添加定制属性，等等。
可能这个作品最大的特性是CSS Paint Worklet[3]，它允许你在一个元素上“绘制”，就像你知道和喜欢的画布一样，并让浏览器把它当作CSS中的图像。这里有一些例子可以用来演示Houdini[4]。
然而，这个工作集只提供了Worker API的一个子集，而且画布上下文本身也被大量剥离。这样做的实际结果是，您的自定义CSS绘制代码提供了一个比您预期的更小的沙盒。
这意味着什么? 没有网络访问权限，因此可以和fetch和XmlHttpRequest说再见了。在绘制上下文上没有drawText功能。其他各种JS api也消失了，以防你希望解决这些问题。
不过，不用担心。并非一切都完了。让我们把它分解成几个步骤。
1. 设置数据库
这必须是第一步，以便理解概念证明是否可行。
首先我们会借助于sql.js[5]。它实际上是一个通过emscripten编译成WebAssembly和老式ASM.js的SQLite版本。不幸的是，我们不能使用WASM版本，因为它必须通过网络获取二进制文件。ASM版本没有这个限制，因为所有的代码都可以在一个模块中使用。
虽然PaintWorklet限制了worker内部的网络访问，但你仍然可以导入代码，只要它是一个ES6模块。这意味着文件中必须有一个导出语句。不幸的是，sql.js没有ES6的版本，所以我自己修改了sql.js，使其能够顺利的被import进入项目。
现在到了关键时刻:我可以在我的工作包中建立一个数据库吗?
const queryInput = document.getElementById('db-query')
queryInput.onchange = () => {
let query = queryInput.value;
if (query.endsWith(';')) {
query = query.slice(0, -1)
}
document.documentElement.style.setProperty(
'--sql-query',
queryInput.value
)
}
从现在开始，您可以使用CSS导入和浏览您自己的数据库了!
我遗漏了一件事，就是所有这些查询结果特别多的时候，如何更好的渲染展示的问题。如果查询结果有很多，他们需要分开到单独的行。这与本文的主题–使用CSS连接到数据库并没有太大关系，所以我认为在这里谈论这个问题并不合适，但如果你想进一步了解这个”荒谬”的概念，git上的代码都是可用的[8]。
译者补充
-
SQLite是由C语言编写的嵌入式轻量级数据库，广泛用于IOS和Android的App中。若有读者想要在浏览器端应用SQLite，推荐使用SQLite的WebAssembly版–sql.js，基本与SQLite的使用没有太多区别。在实际项目使用中，还需特别注意SQLite的安全性问题。 -
为方便展示，特此截取本文作者所实现的CSS连接SQLite的部分demo如下:
-
关于文中所提到的jspm,这里引用其官网的介绍如下:jspm为导入映射提供了模块CDN和包管理，允许任何来自NPM的包都可以直接在浏览器中加载，无需进一步的处理。
参考资料
sqlcss.xyz: https://www.sqlcss.xyz
[2]
CSS Houdini: https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini
[3]
CSS Paint Worklet: https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet
[4]
houdini how: https://houdini.how/
[5]
sql.js: https://sql.js.org/#/
[6]
opentype.js: https://opentype.js.org/
[7]
jspm: https://jspm.org/
[8]
sqlcss git: https://git.sr.ht/~mrlee/sqlcss
作者：Memeloper
原文：https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html
点赞和在看就是最大的支持❤️
网站javaclass.top收集整理
