วิศวกรวิจัยที่ Conjecture ได้สร้าง HTML quine ที่น่าประทับใจ - เว็บเพจที่แสดงซอร์สโค้ดของตัวเองเป็นผลลัพธ์ เว็บไซต์ส่วนตัวของ Pranav สาธิตแนวคิดการเขียนโปรแกรมที่น่าสนใจนี้โดยใช้เทคนิคการจัดรูปแบบ CSS อย่างชาญฉลาดที่ทำให้โครงสร้าง HTML พื้นฐานมองเห็นได้สำหรับผู้เยี่ยมชม
แนวคิดของ quine มาจากวิทยาการคอมพิวเตอร์ ซึ่งเป็นโปรแกรมที่สร้างซอร์สโค้ดของตัวเองเป็นผลลัพธ์ แม้ว่า quine มักจะเชื่อมโยงกับภาษาการเขียนโปรแกรม แต่การนำไปใช้นี้นำแนวคิดมาสู่การพัฒนาเว็บในรูปแบบที่สง่างาม
ตัวอย่าง HTML Quine ที่เกี่ยวข้อง:
- Brutalist HTML quine จากปี 2019 (ถูกพูดถึงใน Hacker News สองครั้ง)
- GitHub contribution chart quine โดยผู้ใช้ ' mame '
- การทดลอง CSS-to-Markdown renderer
- การสาธิตการเขียนโปรแกรมแบบอ้างอิงตัวเองหลากหลายรูปแบบ
เทคนิคการแสดงผล CSS ทำให้โครงสร้าง HTML มองเห็นได้
เวทมนตร์เบื้องหลัง quine นี้อยู่ที่การจัดรูปแบบ CSS ที่บังคับให้องค์ประกอบ HTML แสดงเป็นข้อความที่มองเห็นได้แทนที่จะเป็นมาร์กอัปที่เรนเดอร์แล้ว เทคนิคนี้ใช้คุณสมบัติ display:block และ pseudo-elements ของ CSS เพื่อแสดงแท็ก HTML เปิดและปิดรอบๆ เนื้อหา สิ่งนี้สร้างภาพลวงตาว่าคุณกำลังดูซอร์สโค้ด HTML ดิบ ในขณะที่จริงๆ แล้วคุณกำลังดูเว็บเพจที่มีการจัดรูปแบบ
สมาชิกชุมชนได้สังเกตพฤติกรรมที่น่าสนใจของเบราว์เซอร์กับแนวทางนี้ ฟังก์ชันการค้นหาทำงานแตกต่างกันกับเนื้อหาที่มีการจัดรูปแบบ - ในขณะที่คุณสามารถค้นหาข้อความภายในองค์ประกอบ head และ title ที่แสดงผลได้ แต่ข้อความภายในบล็อก style ยังคงค้นหาไม่ได้ผ่านฟังก์ชันค้นหาของเบราว์เซอร์ แม้ว่าจะแสดงผลทางภาพแล้วก็ตาม
องค์ประกอบทางเทคนิคหลัก:
- ใช้กฎ CSS
* {display:block;}เพื่อทำให้องค์ประกอบทั้งหมดเป็นระดับบล็อก - ใช้ pseudo-elements ของ CSS (::before และ ::after) เพื่อแสดงแท็ก HTML
- ทำงานได้กับเบราว์เซอร์สมัยใหม่ แต่ไม่รองรับเบราว์เซอร์แบบข้อความอย่าง Lynx
- ฟังก์ชันค้นหาของเบราว์เซอร์ไม่สามารถค้นหาข้อความภายในองค์ประกอบ
<style>ได้แม้ว่าจะแสดงผลแล้วก็ตาม
ความเข้ากันได้ของเบราว์เซอร์และข้อจำกัดทางเทคนิค
quine ทำงานได้กับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ แม้ว่าเบราว์เซอร์แบบข้อความอย่าง Lynx จะไม่เรนเดอร์การจัดรูปแบบ CSS ที่สร้างเอฟเฟกต์ quine ในกรณีเหล่านี้ ผู้เยี่ยมชมจะเห็นเพียงเนื้อหาธรรมดาโดยไม่มีการแสดงมาร์กอัป HTML ที่ทำให้มันพิเศษ
document.body.innerText มีเนื้อหาของสไตล์ชีตอยู่ด้วย ดังนั้นเบราว์เซอร์จึงพิจารณาว่าเป็นข้อความที่มองเห็นได้ในแง่หนึ่ง
การนำไปใช้นี้เข้าร่วมกับ HTML quine สร้างสรรค์อื่นๆ ที่ปรากฏขึ้นในช่วงหลายปีที่ผ่านมา รวมถึงเวอร์ชัน HTML แบบ brutalist และแม้กระทั่ง quine ที่ฝังอยู่ในแผนภูมิการมีส่วนร่วมของ GitHub แนวทางนี้แสดงให้เห็นว่า CSS สามารถจัดการการนำเสนอเนื้อหาในรูปแบบที่ไม่คาดคิดได้อย่างไร
เว็บเพจทำหน้าที่เป็นทั้งพอร์ตโฟลิโอส่วนตัวและการสาธิตทางเทคนิค แสดงให้เห็นว่าการเขียนโค้ดเชิงสร้างสรรค์สามารถทำให้เทคโนโลยีเว็บธรรมดาทำสิ่งที่ไม่ธรรมดาได้ มันได้รับแรงบันดาลใจจากแนวคิดจาก Gödel, Escher, Bach ของ Douglas Hofstadter เชื่อมโยงแนวคิดการอ้างอิงตนเองทางคณิตศาสตร์กับการพัฒนาเว็บในทางปฏิบัติ
อ้างอิง: Hi, I'm Pranav