CSS Datenbankabfragen? Klar können wir das!

Klingt irgendwie albern, oder? CSS Datenbankabfragen. Aber hey, CSS kann mit anderen Sprachen kommunizieren, insofern, als dass es Werte für Dinge setzen kann, die diese lesen können. Außerdem kann CSS andere Dateien anfordern, und ich nehme an, ein Server könnte auf diese Anfrage mit etwas reagieren, das er aus einer Datenbank abgefragt hat.

Aber ich greife schon vor. Die Idee von CSS Datenbankabfragen war ein Scherz-Tweet, der neulich die Runde machte, über Recruiter, die nach einem Entwickler suchen, der sich mit CSS mit einer Datenbank verbinden kann. Lee Meichin schrieb „Ja, ich kann mich in CSS mit einer DB verbinden“ als ebenso lustige Erwiderung.

Was steckt hinter CSS Datenbankabfragen?

Es ist schön ausgefeilt

1. Verwenden Sie eine handmodifizierte ESM-Version von SQL.js, das ist SQLite in JavaScript.
2. Bereiten Sie eine Datenbank vor, die SQL.js abfragen kann.
3. Erstellen Sie einen Houdini PaintWorklet, der Abfragen in JavaScript ausführt und die Ergebnisse auf dem Bildschirm im „Canvas“-Stil, wie es PaintWorklets tun, zurückmalt.
4. Übergeben Sie die Abfrage, die Sie ausführen möchten, über eine CSS-Benutzereigenschaft an das Worklet.

Also, die Verwendung sieht am Ende so aus

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

Was, das muss man zugeben, die Verbindung zu einer Datenbank und deren Abfrage in CSS ist.

Das erinnert mich daran, dass Simon Willison letztes Jahr etwas Ähnliches mit einem völlig anderen Ansatz gemacht hat. Seine Idee war, dass Sie RESTful Endpunkte haben, wie z.B. /api/roadside_attractions, die JSON-Daten zurückgeben. Aber als alternativen Endpunkt könnten Sie /api/roadside_attractions.css machen, was eine gültige CSS-Datei mit allen Daten als CSS-Benutzereigenschaften zurückgeben würde.

Also sieht es stattdessen so aus

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

Was wiederum im Wesentlichen die Verbindung zu einer Datenbank in CSS (allerdings mit erforderlichem HTML) ist. Sie können es buchstäblich in Aktion sehen.