Seorang jurutera penyelidik di Conjecture telah mencipta HTML quine yang mengagumkan - sebuah laman web yang memaparkan kod sumbernya sendiri sebagai output. Laman web peribadi Pranav menunjukkan konsep pengaturcaraan yang menarik ini menggunakan teknik penggayaan CSS yang bijak untuk menjadikan struktur HTML asas kelihatan kepada pelawat.
Konsep quine berasal daripada sains komputer, di mana sebuah program menghasilkan kod sumbernya sendiri sebagai output. Walaupun quine biasanya dikaitkan dengan bahasa pengaturcaraan, pelaksanaan ini membawa idea tersebut kepada pembangunan web dengan cara yang elegan.
Contoh HTML Quine yang Berkaitan:
- HTML quine gaya Brutalist dari tahun 2019 (dibincangkan di Hacker News sebanyak dua kali)
- Carta sumbangan GitHub quine oleh pengguna 'mame'
- Eksperimen pemapar CSS-ke-Markdown
- Pelbagai demonstrasi pengaturcaraan merujuk diri
Trik Paparan CSS Menjadikan Struktur HTML Kelihatan
Keajaiban di sebalik quine ini terletak pada penggayaan CSS yang memaksa elemen HTML untuk dipaparkan sebagai teks yang boleh dilihat dan bukannya markup yang dirender. Teknik ini menggunakan sifat display:block dan pseudo-elemen CSS untuk menunjukkan tag HTML pembuka dan penutup di sekeliling kandungan. Ini mencipta ilusi bahawa anda sedang melihat kod sumber HTML mentah, sedangkan anda sebenarnya melihat laman web yang digayakan.
Ahli komuniti telah mencatatkan beberapa tingkah laku pelayar yang menarik dengan pendekatan ini. Fungsi carian berkelakuan berbeza dengan kandungan yang digayakan - walaupun anda boleh mencari teks di dalam elemen head dan title yang dipaparkan, teks dalam blok style kekal tidak boleh dicari melalui fungsi cari pelayar, walaupun dipaparkan secara visual.
Komponen Teknikal Utama:
- Menggunakan peraturan CSS
* {display:block;}untuk menjadikan semua elemen sebagai peringkat blok - Menggunakan pseudo-elemen CSS (::before dan ::after) untuk memaparkan tag HTML
- Berfungsi merentas pelayar moden tetapi tidak pada pelayar berasaskan teks seperti Lynx
- Fungsi carian pelayar tidak dapat mencari teks dalam elemen
<style>walaupun ketika dipaparkan
Keserasian Pelayar dan Had Teknikal
Quine ini berfungsi merentasi kebanyakan pelayar moden, walaupun pelayar berasaskan teks seperti Lynx tidak merender penggayaan CSS yang mencipta kesan quine . Dalam kes ini, pelawat hanya melihat kandungan biasa tanpa paparan markup HTML yang menjadikannya istimewa.
document.body.innerText memang mengandungi kandungan style sheet, jadi pelayar memang menganggapnya sebagai teks yang boleh dilihat dalam erti kata tertentu.
Pelaksanaan ini menyertai HTML quine kreatif lain yang telah muncul selama bertahun-tahun, termasuk versi HTML brutalis dan juga quine yang dibenamkan dalam carta sumbangan GitHub . Pendekatan ini menunjukkan bagaimana CSS boleh memanipulasi persembahan kandungan dengan cara yang tidak dijangka.
Laman web ini berfungsi sebagai portfolio peribadi dan demonstrasi teknikal, menunjukkan bagaimana pengkodan kreatif boleh menjadikan teknologi web biasa melakukan perkara yang luar biasa. Ia diilhamkan oleh konsep daripada Gödel, Escher, Bach karya Douglas Hofstadter , menghubungkan idea rujukan kendiri matematik kepada pembangunan web praktikal.
Rujukan: Hi, I'm Pranav