Pertanyaan pangkalan data CSS? Pasti kita boleh!

Kedengarannya agak lucu, bukan? Pertanyaan pangkalan data CSS. Tetapi hei, CSS dapat berkomunikasi dengan bahasa lain kerana ia menetapkan nilai -nilai perkara yang dapat dibaca oleh bahasa lain. Di samping itu, CSS boleh meminta fail lain, dan saya fikir pelayan boleh menjawab permintaan dengan sesuatu yang diminta dari pangkalan data.

Tetapi saya sedikit topik. Idea untuk pertanyaan pangkalan data CSS adalah tweet jenaka yang beredar pada hari yang lain mengenai perekrut mencari pemaju yang boleh menyambung ke pangkalan data menggunakan CSS. Lee Meichin menulis: "Ya, saya boleh menyambung ke pangkalan data dengan CSS", yang merupakan tindak balas yang sama lucu.

Apakah teknik di sebalik pertanyaan pangkalan data CSS?

Ia cukup pandai:

1. Gunakan sql.js, yang telah diubahsuai secara manual ke ESM, iaitu SQLite dalam JavaScript.
2. Sediakan pangkalan data yang boleh ditanyakan oleh sql.js.
3. Bina Houdini Paintworklet yang melaksanakan pertanyaan dalam JavaScript dan menghasilkan Paintworklet<canvas></canvas> Lukis kembali ke skrin.
4. Lulus pertanyaan untuk dijalankan ke kerja melalui CSS Custom Properties.

Jadi, penggunaan akhir adalah seperti ini:

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

Utama {
  --SQL-Query: Pilih nama dari ujian;
  Latar Belakang: Cat (SQL-DB);
}

Anda mesti mengakui bahawa ini menyambung dan menanyakan pangkalan data dalam CSS.

Ia mengingatkan saya tentang Simon Willison melakukan ini tahun lepas dengan cara yang sama sekali berbeza. Konsepnya ialah anda mempunyai titik akhir yang tenang, seperti /api/roadside_attractions , yang mengembalikan data JSON. Tetapi sebagai titik akhir alternatif, anda boleh menetapkannya ke /api/roadside_attractions.css , yang akan mengembalikan fail CSS yang sah di mana semua data digunakan sebagai atribut adat CSS.

Jadi, nampaknya ini:

<link href="/api/roadside_attractions.css" rel="stylesheet">
.Artraction-Name: selepas {content: var (-name);
. ADDRESS-ADDRESS: selepas {kandungan: var (-alamat);
<p>Nama Tarikan:</p>
<p>Alamat:</p>

Sekali lagi, ini pada dasarnya menyambung ke pangkalan data dalam CSS (walaupun HTML diperlukan). Anda dapat melihat sendiri bagaimana ia berfungsi.

Atas ialah kandungan terperinci Pertanyaan pangkalan data CSS? Pasti kita boleh!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!