CSS Database Queries? Sure We Can!

It sounds a bit funny, doesn't it? CSS database query. But hey, CSS is able to communicate with other languages ​​because it sets the values ​​of things that other languages ​​can read. Additionally, CSS can request other files, and I think the server can respond to the request with something it requested from the database.

But I was a little off topic. The idea for CSS database query was a joke tweet circulating the other day about recruiters looking for developers who can connect to the database using CSS. Lee Meichin wrote: "Yes, I can connect to the database with CSS", which is an equally funny response.

What are the techniques behind CSS database query?

It's pretty clever:

1. Use SQL.js, which has been manually modified to ESM, which is SQLite in JavaScript.
2. Prepare a database that SQL.js can query.
3. Build a Houdini PaintWorklet that executes queries in JavaScript and results in PaintWorklet's<canvas></canvas> Draw back to the screen.
4. Pass the query to be run to the worklet via CSS custom properties.

So, the final usage is like this:

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

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

You must admit that this is connecting and querying the database in CSS.

It reminds me of Simon Willison doing this last year in a completely different way. His concept is that you have RESTful endpoints, such as /api/roadside_attractions , which returns JSON data. But as an alternative endpoint, you can set it to /api/roadside_attractions.css , which will return a valid CSS file where all data is used as a CSS custom attribute.

So, it looks like this:

<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>

Again, this is essentially connecting to the database in CSS (although HTML is required). You can see for yourself how it works.

The above is the detailed content of CSS Database Queries? Sure We Can!. For more information, please follow other related articles on the PHP Chinese website!