Các kỹ thuật hack HTML đã định hình Internet

 (tedium.co)
2 điểm bởi GN⁺ 2023-12-03 | 1 bình luận | Chia sẻ qua WhatsApp
  • Các nhà phát triển web thời kỳ đầu phải đối mặt với việc triển khai tiêu chuẩn và lỗi khác nhau giữa từng trình duyệt, nên rất khó đảm bảo ổn định bố cục và hành vi mong muốn chỉ bằng HTML/CSS hợp lệ
  • Những môi trường như Netscape 4, Internet Explorer 5/6/7, Safari/WebKit, Outlook đã sinh ra mã vòng tránh riêng cho từng trình duyệt trong CSS, độ trong suốt PNG, comment, selector và phần xem trước email
  • Bố cục bằng bảng HTML, sIFR, Chrome Frame và thiết kế đáp ứng là các ví dụ về việc kết hợp công nghệ theo cách khác với ý định ban đầu để vượt qua ràng buộc thiết kế và vấn đề của trình duyệt cũ
  • Các kiểu hack này có những giới hạn như làm giảm khả năng truy cập, tạo ra mã phi tiêu chuẩn, phụ thuộc vào Flash hoặc plugin, nhưng khi đó vẫn là phương án thực tế để đảm bảo khả năng tương thích và biểu đạt hình ảnh
  • Lý tưởng của tiêu chuẩn web và cách sử dụng thực tế luôn va chạm, và những lần vòng tránh lặp đi lặp lại của nhà phát triển lẫn nhà thiết kế đã để lại dấu ấn lâu dài trong thiết kế web, HTML email và cách thích ứng với di động

Các mẹo hack CSS để né lỗi trình duyệt

  • Mẹo @import của Netscape Navigator 4.0 hoạt động bằng cách cố tình tải CSS mà Netscape không hỗ trợ thông qua @import, để ngăn trình duyệt đó áp dụng các kiểu nâng cao
    • CSS cơ bản được tải bằng <link>, còn CSS nâng cao hơn được tách riêng và tải bằng @import
    • CSS Cookbook tổng kết rằng cách này tạo ra hiệu ứng cùng tải những tệp CSS không hoạt động trên Netscape
    • Netscape từng thúc đẩy JSSS, và sau khi W3C chọn CSS, hãng đã vội triển khai CSS trong Netscape 4 vào mùa hè năm 1997
    • Trên Netscape 4, nếu tắt JavaScript thì CSS cũng bị tắt theo như một tác dụng phụ
  • Mẹo hack CSS nhắm vào Internet Explorer 6 dùng dấu gạch dưới ở trước thuộc tính như _width để chỉ IE6 phân tích khai báo đó
    • Mô hình hộp của W3C xem width là không bao gồm border và padding, nhưng Internet Explorer xử lý padding và border khác đi, tạo ra chênh lệch bố cục giữa các trình duyệt
    • Ví dụ có dạng width: 300px; _width: 320px; padding: 10px;, trong đó khai báo không hợp lệ theo CSS chuẩn được dùng như giá trị hiệu chỉnh riêng cho IE6
    • Cũng có những mẹo riêng cho IE như thêm một dấu chấm than nữa sau !important để khiến IE7 trở xuống hoạt động khác đi

Bẻ cong cấu trúc ngữ nghĩa để làm bố cục

  • Bố cục bằng bảng HTML là kiểu hack tiêu biểu khi dùng <table>, vốn dành cho dữ liệu dạng bảng, như một công cụ sắp đặt trang theo thị giác
    • David Siegel tiếp cận web với góc nhìn của một nhà thiết kế truyền thống và muốn tạo ra các website đẹp mắt hơn bằng cách đi ngược lại thông lệ rằng trình duyệt sẽ quyết định kết quả hiển thị của HTML
    • Trong Creating Killer Web Sites, ông đề cập đến việc lách markup cấu trúc, dùng hình ảnh để tạo sắp đặt hai chiều và khi bảng xuất hiện thì đưa văn bản vào các cột
    • Jay Hoffman của The History of the Web tổng kết rằng những người theo chủ nghĩa thuần HTML/XML coi việc trộn lẫn thiết kế với cấu trúc mã là một điều cấm kỵ lớn
    • Bố cục bằng bảng đã phá hỏng khả năng truy cập và mất nhiều thời gian để khắc phục, nhưng nó cho thấy giá trị ở chỗ nhà phát triển có thể tổ chức các cổng web theo thị giác
  • Thiết kế đáp ứng, giống như bố cục bảng, là việc kết hợp lại công nghệ sẵn có theo cách mới, nhưng vẫn nằm trong phạm vi tiêu chuẩn web để thay đổi bố cục theo kích thước màn hình
    • Trong thiết kế web thập niên 2000, bài toán hiện thực “Holy Grail layout” với 3 cột kéo dài tới cuối trang bằng CSS là một chủ đề gây tranh cãi lớn
    • Đã có nhiều cách vòng tránh như dùng ảnh nền để tạo cột giả, và về sau CSS mới hỗ trợ bố cục dựa trên lưới
    • Khi smartphone phổ biến, ý nghĩa của bố cục 3 cột truyền thống suy giảm và xuất hiện tình huống phải chi tiền làm website di động riêng
    • Ethan Marcotte trong bài viết responsive web design trên A List Apart đã đề xuất dùng media query để điều chỉnh cách sắp đặt website theo dạng màn hình
    • Thiết kế đáp ứng khi đó trông giống như một kiểu hack dùng media query còn xa lạ, nhưng về lâu dài đã thay đổi thiết kế web

Những cách lách về hình ảnh và comment trong thời đại Internet Explorer

  • AlphaImageLoader là cách vòng tránh việc Internet Explorer 5 và 6 không hỗ trợ đúng độ trong suốt PNG bằng bộ lọc riêng của Microsoft
    • Internet Explorer đã hỗ trợ PNG từ phiên bản 4 nhưng không render đúng trong nhiều trường hợp, và đặc biệt vấn đề không hỗ trợ PNG trong suốt ở IE5/IE6 là rất lớn
    • Jeff Starr của Perishable Press trong PNG fix for Internet Explorer cho biết các giải pháp thời đó đòi hỏi bộ lọc độ trong suốt AlphaImageLoader độc quyền của Microsoft
    • Ví dụ là áp dụng filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...) cho IE, còn với trình duyệt không phải IE thì dùng selector [class] để áp dụng ảnh nền thông thường
    • Những khoảng trống nhỏ như vậy về tính năng đã khiến lập trình viên cuối thập niên 2000 và đầu thập niên 2010 vẫn phải tiếp tục cân nhắc các kiểu hack riêng cho từng trình duyệt
  • Conditional Comments là mở rộng comment HTML do Microsoft tạo ra để quyết định có render một đoạn HTML cụ thể theo từng phiên bản IE hay không
    • Vì Internet Explorer đòi hỏi quá nhiều hack khi triển khai website, Microsoft lại đưa vào thêm một hack khác để quản lý chính những hack đó
    • Comment HTML vốn không dùng để thực thi đã bị biến thành một cấu trúc hoạt động theo điều kiện phiên bản IE
    • Nó lần đầu được đưa vào Internet Explorer 5 và đến nay vẫn có lúc cần thiết cho các thiết kế email phức tạp trong Microsoft Outlook trên Windows
    • Jens Oliver Meiert trong bài viết năm 2007 phê phán rằng Conditional Comments buộc phải chỉnh lại HTML của từng tài liệu hoặc template để ứng phó với các phiên bản IE, làm tổn hại sự tách biệt giữa cấu trúc và trình bày
    • Conditional Comments bị loại bỏ từ IE9 trở đi, và conditional compilation của JavaScript từng có thể được dùng như giải pháp thay thế

Những tổ hợp phi tiêu chuẩn cho font chữ, email và trình duyệt cũ

  • sIFR (Scalable Inman Flash Replacement) là một kiểu hack dựa trên JavaScript, biến văn bản thành nhúng Flash để hiển thị font mong muốn mà không bị bó buộc vào font web-safe
    • Core Fonts for the Web của Microsoft trên thực tế đã khuyến khích việc dùng một tập font web-safe hạn chế, rồi sau đó bị ngừng
    • Các kỹ thuật thay font ban đầu xuất phát từ việc dùng hình ảnh, nhưng có giới hạn về khả năng truy cập và biểu đạt
    • Shaun Inman đã nảy ra ý tưởng thay thế bằng một tệp Adobe Flash nhỏ chứa font mong muốn, và Mike Davidson qua sIFR đã khiến font có thể được mở rộng theo nhu cầu
    • Trong bài công bố sIFR năm 2004, Davidson cho rằng bài toán phân phối kiểu chữ tùy chỉnh cho người dùng chưa cài đặt sẵn vẫn chưa được giải quyết
    • sIFR là một bước trung gian trên đường tới giải pháp web font thực sự, và không tồn tại lâu khi Flash không thể chuyển sang di động
  • Mẹo hack văn bản preheader là cách chèn ký tự ẩn và ký tự khoảng trắng để ngăn phần văn bản thân email tiếp theo bị dính vào dòng xem trước của trình khách email
    • Preheader là đoạn văn bản ngắn xuất hiện sau tiêu đề trong hộp thư đến và hoạt động như phụ đề của email
    • Vì trình khách email có thể kéo thẻ HTML hoặc phần nội dung không liên quan vào phần preview, nên người ta chèn cưỡng bức khoảng đệm giữa preheader mong muốn và đoạn văn bản kế tiếp
    • Ví dụ do Litmus khuyến nghị có dạng đặt lặp lại các ký tự như ͏, ‌,  ,  , ­ trong một vùng áp dụng display: none, max-height: 0px, overflow: hidden
  • Google Chrome Frame là plugin trình duyệt cho phép dùng engine render của Chrome bên trong Internet Explorer, giúp các môi trường vẫn phụ thuộc vào IE6 có thể sử dụng các tính năng web hiện đại
    • Một số doanh nghiệp khó chuyển sang trình duyệt mới vì bộ phận IT quá cứng nhắc và sự phụ thuộc vào công nghệ dựa trên IE6
    • Năm 2009, Google tạo ra Chrome Frame để mang engine hiện đại vào Internet Explorer cũ, giúp nhà phát triển không phải làm nhiều phiên bản hoặc từ bỏ tính năng mới
    • Theo bài viết về việc khai tử Chrome Frame, khi đó nhiều người dùng vẫn đang sử dụng trình duyệt tụt lại phía sau về tính năng hiện đại
    • Các công cụ như Google Wave và YouTube cần đến tính năng HTML5, và việc hỗ trợ IE6 là một ràng buộc với Google
    • Chrome Frame tồn tại trên thị trường 5 năm, và sau giai đoạn đó Chrome đã trở thành một trình duyệt cực kỳ thống trị

Ứng phó riêng cho Safari/WebKit và sự tiến hóa thực tế của web

  • Mẹo hack selector riêng cho WebKit dùng việc kiểm tra hỗ trợ CSS đặc thù của trình duyệt như @supports (-webkit-appearance:none) {} để chỉ áp dụng CSS cho các trình duyệt họ WebKit
    • Khi mới ra mắt, Safari dựa trên một engine có gốc rễ trong cộng đồng mã nguồn mở và ban đầu hỗ trợ tiêu chuẩn HTML/CSS khá tốt
    • Apple Mail dùng WebKit nên thường được xem là môi trường hoạt động tương đối ổn trong việc code email
    • Theo thời gian, lịch phát hành Safari bị buộc chặt vào lịch của Mac và iOS, khiến nó chậm hơn nhịp chung của ngành
    • Các nhà phát triển chỉ trích Apple vì phớt lờ bug hoặc trì hoãn những tính năng bất lợi về cạnh tranh
    • Một người dùng Reddit trong bài than phiền về phát triển cho Safari viết rằng ngay cả khi API được triển khai thì lỗi vẫn nhiều hoặc sau đó còn bị hỏng
    • Kiểu hack này cũng hoạt động trên các phiên bản Chrome đầu tiên vốn khởi đầu từ nền tảng WebKit
  • Ý định ban đầu của HTML và cách web thực tế được sử dụng đã khác nhau rất xa, và các nhà thiết kế cùng chuyên gia UI đã xây dựng nên biểu đạt thị giác trên Internet bất chấp những đoạn mã kỳ quặc
    • Như cách David Siegel mô tả, các tổ chức tiêu chuẩn hóa muốn HTML vận hành theo hướng coi trọng người dùng và cấu trúc hơn thiết kế cuối cùng, gần giống RSS
    • Những giao thức như Gopher xuất hiện cùng thời cũng vận hành theo cách không đặt nặng ảnh hưởng của thiết kế
    • Nhưng vì tính sáng tạo của người dùng Internet và sự phụ thuộc của Internet thương mại vào ngôn ngữ thị giác, triết lý đó đã không trở thành dòng chính
    • Trong HTML email, ngay cả xử lý gradient trong suốt đơn giản bằng HTML/CSS chuẩn cũng khó khăn, và các cách vòng tránh như glitch bảng HTML trong một bình luận StackOverflow cũ đôi khi vẫn có thể là lời giải

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-12-03
Các ý kiến trên Hacker News

  • Dùng bảng để dàn trang thì cũng khá dễ hiểu
    Nhưng trong vài năm sau khi bảng hết thời, việc dàn trang bằng float gần như là tất cả. Thời đó mới thật sự hoang dã, nên khá bất ngờ khi nó bị bỏ sót khỏi danh sách
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    “Thuộc tính float, vốn ban đầu dùng để làm ảnh nổi bên trong khối văn bản, đã trở thành một trong những công cụ phổ biến nhất để tạo bố cục nhiều cột cho trang web. Với sự xuất hiện của flexbox và grid, giờ nó đã quay lại mục đích ban đầu”

    • Vào khoảng thời gian float mới xuất hiện, tôi đã phát triển toàn bộ một trang sửa chữa máy tính trên FF
      Đến lúc gần hoàn thiện, mở thử trên IE thì toàn bộ thiết kế vỡ tung, mà khách hàng mục tiêu gần như chắc chắn là người dùng IE, nên cuối cùng phải viết lại bằng bố cục dựa trên bảng. Đó là một ngày buồn
    • Ngay từ đầu, việc gọi bố cục dựa trên bảng là hack đã khiến tôi khó chịu
      Sau khi bảng bị gạt sang một bên, tôi chứng kiến vô số đội frontend lãng phí tổng cộng hàng tháng trời để nghịch float nhằm giữ đức tin của những “người thuần túy”, tạo ra các trang web khó hiểu hơn nhiều; và tôi rút ra được một bài học quan trọng từ đó
      Joel Spolsky trong một bài viết xuất sắc đã gọi những nhà phát triển như vậy là Architecture Astronauts: kiểu người quên rằng công việc của mình là thật sự tạo ra phần mềm hoạt động tốt với nỗ lực tối thiểu. Tôi cho rằng những thứ như sự lố bịch của đặc tả EJB đầu tiên hay AbstractFactoryBuilderConstructor từng bị chế giễu trong Java cũng là sản phẩm của nhóm đó
      Theo thời gian, tôi đã học được cách nhận ra khuynh hướng này và tránh xa nó
    • Chuyện “dàn trang bằng float trong vài năm” được gọi là faux columns, và ngay cả bố cục 3 cột cơ bản cũng khó đến mức bị gọi là “chén thánh” của layout
      https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
    • Như W3Schools đến giờ vẫn gọi, đó là clearfix hack mới mẻ và hiện đại
      .clearfix::after { content: ""; clear: both; display: table; }
      [1] https://www.w3schools.com/howto/howto_css_clearfix.asp
    • Thời kỳ giữa bảng và flexbox/grid thật vất vả
      float thì rắc rối và khó căn cho đúng, nên nhiều người đơn giản quay lại dùng bảng; nói thật là không thể trách họ

  • spacer.gif không được tôn trọng sao?
    Tất nhiên nó vẫn còn trên HN và được đưa vào mọi yêu cầu trang
    https://news.ycombinator.com/s.gif

    • Câu chuyện về bố cục dựa trên bảng sẽ không trọn vẹn nếu thiếu ảnh spacer

  • Có vài thứ mà tôi từng rất thích
    Faux columns tạo cảm giác thị giác như được kéo dài, khiến sidebar trông dài bằng phần nội dung: https://alistapart.com/article/fauxcolumns/
    Xa hơn nữa, với 9-patch và 9 div hoặc bảng 3x3, bạn có thể tự mô phỏng đường viền bằng cách lặp nền theo từng trục. CSS3 có border-image nên cũng giúp được phần nào, nhưng các kiểu viền như thế giờ không còn thịnh hành lắm
    Bo góc cũng có thể làm bằng 9-patch, và nhiều người dùng trình tạo để sinh nhiều phần tử, tạo HTML mô phỏng viền bo tròn. Bài này giải thích: http://benogle.com/2009/04/29/css-round-corners.html Thông thường markup bổ sung sẽ tốn nhiều byte hơn ảnh, nhưng khi đó người ta cho rằng nó giảm số lượt request khứ hồi và khá dễ làm

    • Nhóm chúng tôi dùng cách 3x3 nhiều đến mức còn tạo hẳn một component cho nó
      Nó gần với ActionScript hơn, nhưng ý tưởng styling thì giống nhau nên tôi cũng đã viết bài: https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...
      Một thứ khác tôi thích là cách dùng cicada principle cho các pattern nền không lặp lại
    • Tôi bấm vào A List Apart và khá sốc khi thấy header bị vỡ trên di động
      Dù vậy, sau ngần ấy năm, nó vẫn trông gọn gàng
    • Cũng đáng nhắc đến kỹ thuật sliding doors cho góc bo tròn: https://alistapart.com/article/slidingdoors/
    • Faux columns vẫn còn sống trên website chính của chúng tôi. Lúc nào cũng không có thời gian để thay bằng thứ hiện đại hơn ;)

  • Tôi thích việc HN đến giờ vẫn dùng một trong những thứ này: dùng bảng HTML để dàn layout
    Nói nghiêm túc hơn, danh sách này cho thấy rất rõ rằng nếu phát triển không có tiêu chuẩn, thông tin điều khiển sẽ bị mã hóa vào nhiều kênh phụ “tạm chấp nhận được”
    Sự hỗn loạn và khả năng xung đột như vậy khiến ta nhìn lại sự khinh miệt mà quy trình W3C đôi khi phải nhận. Quy trình này kết hợp tiến hóa công nghệ web do tiêu chuẩn dẫn dắt với đổi mới do trình duyệt dẫn dắt, để hai bên luân phiên đi trước hoặc tiến song song
    Dù thường bị chế giễu, cũng có thể xem đây là cách bền vững và ổn định hơn so với cách cũ
    Không biết trong số những người chỉ trích chuẩn mực W3C-nhà cung cấp mới, có bao nhiêu người thực sự muốn quay lại những ngày tháng hào hứng mà “10 kiểu hack kỳ quặc” này gợi nhớ

    • Đó không hẳn là thiếu tiêu chuẩn, mà gần với thiếu chức năng cần thiết hơn
      Khi việc bạn muốn làm không được xem như một chức năng, bạn sẽ sáng tạo bằng mọi cách. Nếu tiêu chuẩn chưa đủ trưởng thành để nắm bắt mọi nhu cầu tiềm năng, nó lại tạo ra sự cứng nhắc và dẫn đến tình huống này. Đặc biệt là khi bị ràng buộc vào một tiêu chuẩn có thể phù hợp hoặc không phù hợp với nhu cầu, như web
      Ở các lĩnh vực khác thường có đủ lựa chọn, và một trong số đó đủ linh hoạt để làm việc cần làm, chỉ cần chọn nó
      Nếu làm lâu trong giới nghiên cứu, bạn sẽ thấy đáng ngạc nhiên là rất nhiều việc muốn làm đòi hỏi cách tiếp cận kỹ thuật mang tính hack. Vì nhiều tiêu chuẩn và tập hợp tính năng được hình thành quanh các tương tác kinh doanh/người tiêu dùng nơi tiền đổ vào, cùng các hệ thống xung quanh chúng
    • Đáng tiếc là ngày nay W3C và TC39 gần như bị Google thống trị hoàn toàn, và họ thúc đẩy nhiều tiêu chuẩn trong khi chỉ quan tâm tới quy trình gần như theo kiểu hình thức
      Nhiều bên phụ thuộc vào tính năng trình duyệt, chẳng hạn các hãng TV chạy ứng dụng trong WebKit hoặc một phiên bản Chromium, lại hoàn toàn im lặng trong các ủy ban tiêu chuẩn. Vì vậy thực tế thậm chí còn chưa tới mức là cuộc kéo co ba bên giữa Google, Apple và Mozilla
    • Thú vị là bảng được nói là đã “biến mất”, rồi lại được thay thế rộng rãi bằng Bootstrap
      Kết quả là ta có bảng nằm trong div. Chỉ là nó có 12 cột mà thôi
    • WHATWG chưa từng phát triển web vì bất kỳ ai ngoài các lợi ích vì lợi nhuận
      Tôi học từ HTML 3.2 nên biết rất rõ những trò vô lý kiểu Byzantine nào từng cần thiết vì IE và Netscape. Nhưng đó là lựa chọn của MS và Netscape, và ngay cả nếu W3C có hiện diện mạnh hơn thì cũng không có gì đảm bảo hay ngụ ý rằng MS và Netscape sẽ tuân theo tiêu chuẩn mới
      Dù vậy, thời đó vẫn tốt hơn tình trạng rác rưởi hiện nay, khi một tập đoàn lớn muốn gì thì phần còn lại của web phải gánh
      Thật tuyệt khi nó tốt hơn nhiều nhỉ /s

  • Thiếu mất kiểu hack “ưa thích nhất” của tôi. Đó là đặt tiêu đề cho khả năng truy cập ở vị trí -10000 để nó không được render trên màn hình nhưng trình đọc màn hình vẫn đọc được

    • Một biến thể gần với cách này đến giờ vẫn khá phổ biến. Vì trong mọi trường hợp vẫn chưa có lựa chọn thật tốt để xử lý văn bản không nhìn thấy nhưng trình đọc màn hình có thể truy cập
      Những thứ như aria-label đã thay thế một phần các trường hợp dùng mẫu này, nhưng không phải tất cả
    • Cách đó vẫn hoạt động chứ? Hay phải dùng ARIA?

  • Không thấy nhắc tới html5 shiv, thứ từng được cài trước mọi CSS để loại bỏ quirks của trình duyệt
    https://paulirish.com/2011/the-history-of-the-html5-shiv/

    • Những thứ như reset, normalize cũng bị bỏ sót

  • Nhớ những ngày xưa tốt đẹp với GIF trong suốt 1×1 pixel dùng để giữ các ô bảng ngoan ngoãn đúng chỗ

    • “Ngày xưa tốt đẹp”? Trang bạn đang xem bây giờ cũng đang dùng nó đấy ;)
      https://news.ycombinator.com/item?id=38485665
    • Ngày xưa người ta thường cắt một ảnh lớn thành mẫu lưới rồi giữ chúng bằng bảng
      Tôi còn không nhớ tại sao lại làm vậy nữa. Có phải để tải nhanh hơn không?

  • Thêm một thứ nữa từ thời kỳ đầu: việc sử dụng rộng rãi entity ký tự khoảng trắng không ngắt dòng  
    Nó được dùng để đẩy văn bản sang phải hoặc trái trong container, và theo tôi nhớ thì cũng được dùng giống GIF spacer 1x1 để khiến ô bảng nằm yên. Có những trang có hàng trăm  , gần như là một phương tiện đa dụng để thêm margin hoặc padding

  • Đôi khi tôi không biết là các lập trình viên web hiện đại đã bị chiều hư vì có CSS Grid và IE đã chết, hay là chúng ta ngày xưa đã bị chiều hư vì không phải chịu độ phức tạp của các framework hiện đại và quy trình build hiện nay

    • Có lẽ là cả hai
      Dù vậy, ngày nay chắc vẫn dễ hơn. Về mặt kỹ thuật, bạn không nhất thiết phải dùng framework hiện đại và quy trình build; chỉ với CSS và JavaScript hiện đại cũng có thể dễ dàng tạo các site và app mà ngày xưa từng rất phức tạp
    • Phát triển web có sắc thái rất riêng so với các lĩnh vực khác tôi từng làm
      Ngành này đã hình thành thói quen liên tục phát minh lại bánh xe theo cách phức tạp hơn
      Phỏng đoán hợp lý nhất là web là lĩnh vực thường được các lập trình viên mới hoặc ít kinh nghiệm chọn hơn, và đây là tác dụng phụ của điều đó

  • Thiết kế responsive thật sự là hack sao? Media query rất tuyệt
    Đưa logic điều kiện vào CSS thay vì JavaScript là một thắng lợi lớn. Đặc biệt khi bạn muốn server-side rendering

    • Dùng media query để hỗ trợ các phương tiện khác nhau có vẻ đúng chính xác là use case phù hợp
    • Nếu bạn không truy vấn điều mình thực sự muốn biết, mà truy vấn một thứ tình cờ có tương quan với thứ bạn cần, thì đó là hack
    • Không phải hack
      Bạn có thể truy vấn nhiều đặc tính của user agent và cung cấp CSS khác nhau dựa trên kết quả đó. Gọi việc này là hack là thiếu hiểu biết, và đó là phần cần thiết để tạo thiết kế responsive