¿Cómo? Consultas SQL desde CSS? Si, a mí también me sorprendió, pero tiene truco. CSS es capaz de hablar con otros lenguajes en el sentido de que puede establecer los valores de las clases en tiempo real.

La idea de las consultas de la base de datos de CSS fue un tuit de broma que circulaba el otro día sobre reclutadores que buscaban un desarrollador que pudiera conectarse a una base de datos con CSS.

Captura de pantalla de un tweet que busca sarcásticamente a alguien que pueda hacer consultas de base de datos CSS.

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

  1. Utiliza una versión de SQL.js un fork de SQLite en JavaScript.
  2. Configura una base de datos que SQL.js puedas consultar.
  3. Crea un Houdini PaintWorklet que ejecute consultas en JavaScript y muestre los resultados en la pantalla.
  4. Envía la consulta que deseas ejecutar al worklet mediante una propiedad personalizada de CSS.

El resultado es algo así:

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

Conclusión

La gran variedad de lenguajes de programación que puedes integrar es muy amplia y también las necesidades que te puedes encontrar en diferentes proyectos. Con la librería SQL.js puedes hacer consultas desde CSS, algo no muy habitual pero que puede serte útil en algún proyecto.

Photo by Mika Baumeister on Unsplash

Reference:
· CSS Database Queries? Sure We Can!

Compartir es construir