Một kỹ sư nghiên cứu tại Conjecture đã tạo ra một HTML quine ấn tượng - một trang web hiển thị mã nguồn của chính nó như đầu ra. Trang web cá nhân của Pranav thể hiện khái niệm lập trình hấp dẫn này bằng cách sử dụng các kỹ thuật tạo kiểu CSS thông minh giúp cấu trúc HTML cơ bản hiển thị cho người truy cập.
Khái niệm quine xuất phát từ khoa học máy tính, nơi một chương trình tạo ra mã nguồn của chính nó như đầu ra. Trong khi quine thường được liên kết với các ngôn ngữ lập trình, việc triển khai này đưa ý tưởng này vào phát triển web một cách tinh tế.
Các Ví dụ HTML Quine Liên quan:
- HTML quine phong cách Brutalist từ năm 2019 (đã được thảo luận hai lần trên Hacker News)
- Quine biểu đồ đóng góp GitHub bởi người dùng ' mame '
- Thử nghiệm trình kết xuất CSS-to-Markdown
- Các minh họa lập trình tự tham chiếu khác nhau
Các thủ thuật hiển thị CSS làm cho cấu trúc HTML hiển thị rõ ràng
Điều kỳ diệu đằng sau quine này nằm ở việc tạo kiểu CSS buộc các phần tử HTML hiển thị như văn bản có thể nhìn thấy thay vì markup được render. Kỹ thuật này sử dụng thuộc tính display:block và các pseudo-element CSS để hiển thị các thẻ HTML mở và đóng xung quanh nội dung. Điều này tạo ra ảo giác rằng bạn đang xem mã nguồn HTML thô, trong khi thực tế bạn đang nhìn vào một trang web được tạo kiểu.
Các thành viên cộng đồng đã lưu ý một số hành vi thú vị của trình duyệt với cách tiếp cận này. Chức năng tìm kiếm hoạt động khác nhau với nội dung được tạo kiểu - trong khi bạn có thể tìm thấy văn bản bên trong các phần tử head và title được hiển thị, văn bản trong các khối style vẫn không thể tìm kiếm được thông qua chức năng tìm kiếm của trình duyệt, ngay cả khi được hiển thị trực quan.
Các Thành Phần Kỹ Thuật Chính:
- Sử dụng quy tắc CSS
* {display:block;}để biến tất cả các phần tử thành dạng khối - Áp dụng các pseudo-element CSS (::before và ::after) để hiển thị các thẻ HTML
- Hoạt động trên các trình duyệt hiện đại nhưng không hoạt động trên các trình duyệt dạng văn bản như Lynx
- Chức năng tìm kiếm của trình duyệt không thể tìm thấy văn bản trong các phần tử
<style>ngay cả khi được hiển thị
Khả năng tương thích trình duyệt và hạn chế kỹ thuật
Quine hoạt động trên hầu hết các trình duyệt hiện đại, mặc dù các trình duyệt dựa trên văn bản như Lynx không render kiểu CSS tạo ra hiệu ứng quine. Trong những trường hợp này, người truy cập chỉ thấy nội dung thuần túy mà không có hiển thị markup HTML làm cho nó trở nên đặc biệt.
document.body.innerText có chứa nội dung style sheet, vì vậy trình duyệt thực sự coi nó là văn bản hiển thị theo một nghĩa nào đó.
Việc triển khai này tham gia cùng các HTML quine sáng tạo khác đã xuất hiện trong những năm qua, bao gồm các phiên bản HTML brutalist và thậm chí cả quine được nhúng trong biểu đồ đóng góp GitHub . Cách tiếp cận này chứng minh cách CSS có thể thao tác việc trình bày nội dung theo những cách bất ngờ.
Trang web vừa là một portfolio cá nhân vừa là một minh họa kỹ thuật, cho thấy cách lập trình sáng tạo có thể làm cho các công nghệ web thông thường thực hiện những điều phi thường. Nó được lấy cảm hứng từ các khái niệm trong cuốn Gödel, Escher, Bach của Douglas Hofstadter , kết nối các ý tưởng tự tham chiếu toán học với phát triển web thực tế.
Tham khảo: Hi, I'm Pranav