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中文網其他相關文章！