Những kỹ thuật hack HTML đã định hình Internet

Sự khéo léo của các kỹ thuật hack HTML

• Sự cần thiết của hack HTML: Có những lúc phải viết mã không mấy thanh lịch để đạt được kết quả mong muốn do lỗi của mã HTML hoặc do trình duyệt triển khai chưa đầy đủ. Những kiểu hack này đôi khi rất sáng tạo và đáng để ghi nhớ.
• Hack @import của Netscape Navigator 4.0: Giúp chặn các kiểu CSS mà Netscape không hỗ trợ. Netscape ủng hộ JSSS thay vì CSS, nhưng khi W3C chọn CSS, việc triển khai CSS của Netscape 4 đã bị thúc ép hoàn thành, khiến nó hoạt động kém hơn so với các trình duyệt về sau.
• Dùng bảng HTML cho bố cục: Cho phép tạo ra các bố cục mang tính thử nghiệm hơn. Việc dùng bảng HTML như một công cụ dàn trang đúng là định nghĩa của một kiểu hack, và trong thế giới email nó vẫn còn được sử dụng.
• Dùng dấu gạch dưới trước kiểu CSS: Cho phép chỉ áp dụng một số kiểu nhất định cho IE6. Cách này tận dụng giới hạn của IE trong việc phân tích các ký tự đặc biệt.
• Dùng AlphaImageLoader để cung cấp độ trong suốt cho PNG: Hiển thị độ trong suốt của tệp PNG mà IE6 không hỗ trợ. Hình ảnh được xử lý thông qua bộ lọc.
• Chú thích có điều kiện: Cho phép chỉ dùng một số mẹo nhất định trên các phiên bản IE cụ thể. Nó hack chức năng chú thích HTML để có thể thực thi mã.
• Scalable Inman Flash Replacement (sIFR): Cho phép sử dụng các phông chữ không thuộc nhóm web-safe. Nó dùng một kiểu hack JavaScript để thay thế văn bản bằng phần nhúng Flash.
• Hack văn bản preheader: Ngăn văn bản bổ sung trong email tràn vào dòng mô tả. Nó sử dụng các chuỗi ký tự khoảng trắng không chuẩn hoặc bất thường.
• Google Chrome Frame: Thay thế IE6 bằng một cửa sổ Chrome. Nó được triển khai thông qua plugin trình duyệt.
• Hack bộ chọn chỉ dành cho Webkit: Chỉ áp dụng mã CSS cho các trình duyệt Webkit. Nó phát hiện xem một trình duyệt cụ thể có hỗ trợ một đoạn mã CSS cụ thể hay không.
• Thiết kế đáp ứng: Sắp xếp thông tin hiệu quả trong nhiều thiết lập khác nhau, đặc biệt là trên máy tính bảng và di động. Trong đa số trường hợp, nó dùng media query để bố trí thông tin theo từng thiết bị.

Ý kiến của GN⁺

• Điều quan trọng nhất là nỗ lực của các nhà phát triển trong việc tìm ra những giải pháp sáng tạo vượt ra ngoài tiêu chuẩn của HTML và CSS.
• Bài viết này thú vị và cuốn hút vì cho thấy các lập trình viên web đã dùng những kiểu hack sáng tạo như thế nào để vượt qua giới hạn của trình duyệt và cải thiện trải nghiệm người dùng.
• Những kiểu hack này phản ánh sự phát triển của các tiêu chuẩn web và nỗ lực không ngừng của các nhà phát triển nhằm tạo ra thiết kế web tốt hơn.

[GN⁺]

Ý kiến trên Hacker News

• Có thể hiểu được việc dùng bảng làm bố cục.

  Khi bảng không còn hợp mốt nữa, trong vài năm, việc dùng float để làm bố cục đã trở thành xu hướng chủ đạo. Tôi ngạc nhiên vì cách này không có trong danh sách. Theo tài liệu MDN, thuộc tính float ban đầu được dùng để làm cho hình ảnh nổi trong khối văn bản, nhưng cũng thường được dùng để tạo bố cục nhiều cột cho trang web. Giờ đây, với sự xuất hiện của flexbox và grid, nó đã quay về đúng mục đích ban đầu.

• Không hề có sự tôn trọng nào dành cho spacer.gif.

  Vẫn đang được dùng trên HN và được đưa vào mọi request của trang: s.gif

• Những kỹ thuật tôi thích nhất:

  • 'Faux columns' để làm cho thanh bên trông như dài bằng nội dung
  • Hack đường viền bằng cách dùng nine-patch và 9 div hoặc bảng 3x3, rồi lặp nền trên một số trục. Trong CSS3, border-image đã xuất hiện để hỗ trợ việc này. Nhưng những kiểu đường viền như vậy không còn được ưa chuộng nữa.
  • Có thể dùng nine-patch để tạo đường viền bo tròn, nhưng nhiều người đã dùng generator tạo HTML để mô phỏng đường viền bo tròn. Như được giải thích trong bài viết, từng có quan niệm phổ biến rằng phần markup bổ sung sẽ tốn nhiều byte hơn hình ảnh, nhưng cách này ít roundtrip hơn và dễ triển khai hơn.

• HN đến nay vẫn dùng một trong những kỹ thuật này:

  • Dùng bảng HTML làm bố cục
  • Danh sách này nhấn mạnh việc phát triển không có chuẩn mực sẽ mã hóa thông tin điều khiển vào nhiều kênh phụ được chấp nhận khác nhau như thế nào.
  • Sự hỗn loạn và xung đột tiềm ẩn do điều này gây ra đôi khi làm nổi bật sự khinh thường mà người ta cảm nhận đối với quy trình của W3C. Quy trình này kết hợp sự tiến hóa của công nghệ web dựa trên tiêu chuẩn với đổi mới do trình duyệt dẫn dắt. Đôi khi chúng dẫn dắt lẫn nhau hoặc diễn ra song song.
  • Dù thường bị chỉ trích, quy trình này có thể được xem là bền vững và ổn định hơn những gì có trước đó.
  • Tôi tự hỏi có bao nhiêu người trong số những người chỉ trích chuẩn mực mới giữa W3C và các nhà cung cấp sẽ nhớ lại hơn 10 kiểu hack kỳ quặc này và muốn quay về thời đó.

• Không nhắc đến việc đặt tiêu đề phục vụ khả năng truy cập ở vị trí -10000 để nó không hiển thị trên màn hình.

• Không có nhắc đến việc cài HTML5 shiv trước CSS để loại bỏ các điểm kỳ quặc của mọi trình duyệt.

  Lịch sử của HTML5 shiv

• Tôi nhớ những ngày xưa tốt đẹp khi dùng gif 1×1 pixel trong suốt để điều khiển các ô của bảng.

• Bổ sung thêm về  , tức thực thể ký tự khoảng trắng không ngắt dòng, vốn được dùng rộng rãi trong giai đoạn đầu:

  Được dùng để đẩy văn bản sang phải hoặc sang trái trong container. Hoặc được dùng tương tự gif spacer 1x1 để làm cho ô bảng hoạt động đúng cách. Có những trang dùng tới hàng trăm  . Nói chung, nó được dùng như một cách để thêm margin hoặc padding.

• Đôi khi tôi không phân biệt được là các lập trình viên web hiện đại trở nên được nuông chiều nhờ CSS Grid và sự cáo chung của IE, hay là chúng tôi ngày đó mới là những người được nuông chiều vì không phải xử lý các framework hiện đại phức tạp và quy trình build.

• Băn khoăn liệu responsive design có thực sự là một kiểu hack hay không:

  Media query thật đáng kinh ngạc. Đưa logic điều kiện vào CSS thay vì JavaScript là một lợi thế lớn khi bạn muốn server-side rendering.