¿Consultas de la base de datos CSS? ¡Por supuesto que podemos! | trucos CSS

Suena un poco tonto, ¿no? Consultas de base de datos CSS. Pero bueno, CSS puede hablar otros idiomas en el sentido de que puede establecer los valores de las cosas que pueden leer. Además, CSS puede requerir otros archivos y sospecho que el servidor puede responder a esta solicitud con algo que solicitó de la base de datos.

Pero estoy por delante. La idea de las consultas de la base de datos CSS fue un tweet que se difundió el otro día entre los reclutadores que buscaban un desarrollador que pudiera conectarse a una base de datos CSS. Lee Mei Chin (suposición completa del nombre allí basado en el nombre de dominio) escribió «Sí, puedo conectarme a DB en CSS» como una señal igualmente divertida.

¿Cuál es el truco detrás de las consultas de la base de datos CSS?

Bien diseñado:

1. Use una versión modificada manualmente a ESM de SQL.jscual es SQLite en JavaScript.
2. Prepare una base de datos que SQL.js pueda consultar.
3. Construir Houdini PaintWorklet que ejecuta consultas de JavaScript y dibuja los resultados en la pantalla en ese <canvas>– por lo tanto PaintWorklets hacer.
4. Envíe la consulta que desea ejecutar en el año comercial utilizando una propiedad CSS personalizada.

Entonces, el uso final es el siguiente:

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

Lo cual, hay que admitirlo, es conectar y consultar una base de datos CSS.

Eso me recuerda a Simon Willison. hacer esto el año pasado con un enfoque completamente diferente. Su concepto era que tienes puntos finales RESTful, como /api/roadside_attractionsque devuelven datos JSON. Pero luego, como un punto final alternativo, puede hacer eso /api/roadside_attractions.css que devolverá un archivo CSS válido con todos los datos como propiedades CSS personalizadas.

Entonces, en cambio, se ve así:

<link rel="stylesheet" href="https://css-tricks.com/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>

Lo cual, nuevamente, es esencialmente una conexión a una base de datos CSS (todavía se requiere HTML). Literalmente puedes ver cómo funciona.