This content originally appeared on CSS-Tricks and was authored by Chris Coyier
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.
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
PaintWorkletthat executes queries in JavaScript and paints the results back to the screen in that<canvas>-y way thatPaintWorkletsdo. - 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.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2022-02-23T20:04:39+00:00) CSS Database Queries? Sure We Can!. Retrieved from https://www.scien.cx/2022/02/23/css-database-queries-sure-we-can/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.