Requêtes de base de données CSS? Bien sûr, nous le pouvons!

Cela semble un peu drôle, n'est-ce pas? Requête de base de données CSS. Mais bon, CSS est capable de communiquer avec d'autres langues car elle définit les valeurs des choses que d'autres langues peuvent lire. De plus, CSS peut demander d'autres fichiers, et je pense que le serveur peut répondre à la demande avec quelque chose qu'il a demandé à la base de données.

Mais j'étais un peu hors sujet. L'idée de la requête de la base de données CSS était un tweet de blague qui circulait l'autre jour sur les recruteurs à la recherche de développeurs qui peuvent se connecter à la base de données à l'aide de CSS. Lee Meichin a écrit: "Oui, je peux me connecter à la base de données avec CSS", qui est une réponse tout aussi drôle.

Quelles sont les techniques derrière la requête de base de données CSS?

C'est assez intelligent:

1. Utiliser SQL.JS, qui a été modifié manuellement en ESM, est SQLite en JavaScript.
2. Préparez une base de données que SQL.JS peut interroger.
3. Construisez un peinture Houdini qui exécute des requêtes en JavaScript et se traduit par des peintures<canvas></canvas> Retmener à l'écran.
4. Passez la requête pour être exécutée aux travaux via les propriétés personnalisées CSS.

Donc, l'utilisation finale est comme ceci:

 Css.paintworklet.addmodule ('./ cssdb.js')

principal {
  --SQL-QUERY: Sélectionnez Nom dans Test;
  Contexte: peinture (SQL-DB);
}

Vous devez admettre que cela connecte et interroge la base de données dans CSS.

Cela me rappelle Simon Willison à faire cela l'année dernière d'une manière complètement différente. Son concept est que vous avez des points de terminaison reposants, tels que /api/roadside_attractions , qui renvoie les données JSON. Mais en tant que point de terminaison alternatif, vous pouvez le définir sur /api/roadside_attractions.css , qui renverra un fichier CSS valide où toutes les données sont utilisées comme attribut personnalisé CSS.

Donc, ça ressemble à ceci:

<link href="/api/roadside_attractions.css" rel="stylesheet">
.Attraction-Name: After {Content: var (- name);
.Attraction-Address: After {Content: var (- Adresse);
<p>Nom d'attraction:</p>
<p>Adresse:</p>

Encore une fois, cela se connecte essentiellement à la base de données dans CSS (bien que HTML soit requis). Vous pouvez voir par vous-même comment cela fonctionne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!