CSS Database Queries? Sure We Can!

Publikováno: 23.2.2022

Kinda silly sounding, isn’t it? CSS database queries. But, hey, CSS is capable of talking to other languages in the sense that it can set the values of things that they can read. Plus, CSS can request other files, and …

CSS Database Queries? Sure We Can! originally published on CSS-Tricks. You should get the newsletter.

Celý článek

But I’m getting ahead of myself. The idea of CSS database queries was a joke tweet going around the other day about recruiters looking for a developer who can connect to a database with CSS. Lee Mei Chin (total guess on the name there based on the domain name) wrote “Yes, I can connect to a DB in CSS” as an equally funny retort.

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

What’s the trick behind CSS database queries?

It’s nicely elaborate:

Use a hand-modified-to-ESM version of SQL.js, which is SQLite in JavaScript.
Get a database ready that SQL.js can query.
Build a Houdini PaintWorklet that executes queries in JavaScript and paints the results back to the screen in that <canvas>-y way that PaintWorklets do.
Pass the query you want to run into the worklet by way of a CSS custom property.

So, the usage is like this in the end:

<script>
  CSS.paintWorklet.addModule('./cssdb.js')
</script>
<style>
  main {
    --sql-query: SELECT name FROM test;
    background: paint(sql-db);
  }
</style>

Which, you gotta admit, is connecting and querying a database in CSS.

This reminds me that Simon Willison did this last year with a totally different approach. His concept was that you have RESTful endpoints, like /api/roadside_attractions, that return JSON data. But then as an alternative endpoint, you could make that /api/roadside_attractions.css which would return a valid CSS file with all the data as CSS custom properties.

So, instead it looks like this:

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

Which, again, is essentially connecting to a database in CSS (with HTML required, though). You can literally see it work.

CSS Database Queries? Sure We Can! originally published on CSS-Tricks. You should get the newsletter.