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 I suppose a server could respond to that request with something it requested from a database.
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.
It’s nicely elaborate:
PaintWorklet
that executes queries in JavaScript and paints the results back to the screen in that <canvas>
-y way that PaintWorklets
do.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.
Having fun with Bramus’ new Caniuse CLI tool. This’ll save lots of trips to the…
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your…
Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing…
I’m working on a refresh of my personal website, what I’m calling the HD remaster.…
Only Chris, right? You’ll want to view this in a Chromium browser: CodePen Embed Fallback…
I’m a big Lynn Fisher fan. You probably are, too, if you’re reading this. Or…