`<Blink>` và `<Marquee>` (2020)

• Thẻ <blink> và <marquee> xuất hiện vào buổi đầu của web thập niên 90 là những yếu tố mang tính biểu tượng của thiết kế web thời đó
• Thẻ <blink> được giới thiệu trong Netscape Navigator 2.0 và dù mang tính đùa vui cùng tính thẩm mỹ kém, nó vẫn được sử dụng rộng rãi
• Để đáp lại, Microsoft đã đưa thẻ <marquee> vào Internet Explorer, cho phép kiểm soát hiệu ứng hoạt ảnh văn bản đa dạng hơn
• Khi lồng hai thẻ này vào nhau, có thể tạo ra các hiệu ứng hoạt ảnh khác nhau tùy theo trình duyệt, và điều này được nhắc đến như một ví dụ về nguyên tắc nâng cấp dần
• Hiện nay <blink> đã biến mất và <marquee> cũng không còn được khuyến nghị sử dụng, nhưng chúng vẫn thường được nhắc đến như những ví dụ tiêu biểu của lịch sử web và nỗi hoài niệm trực tuyến

---

Mở đầu: nhìn lại các thẻ <blink> và <marquee>

• Gần đây, trong lúc trò chuyện với một đồng nghiệp phát triển web, tác giả đã đùa về các thẻ HTML <blink> và <marquee>, rồi phát hiện ra người kia không hề biết đến hai thẻ này
• Với các lập trình viên trẻ ngày nay, những thẻ này khá xa lạ, nhưng đã từng là biểu tượng của thiết kế web thập niên 90

Bối cảnh ra đời và lịch sử của thẻ <blink>

• Người tạo ra thẻ <blink> thường được cho là Lou Montulli, người làm ra trình duyệt Lynx, nhưng thực tế ông nói rằng mình không trực tiếp viết mã cho nó
• Theo lời ông, trong một cuộc trò chuyện ở quán bar với các kỹ sư Netscape, một “hiệu ứng văn bản nhấp nháy” có thể dùng cả trên trình duyệt văn bản như Lynx đã được đề xuất như một trò đùa, và một kỹ sư khác đã dựa vào đó để thức đêm triển khai
• Năm 1995, thẻ <blink> chính thức được đưa vào Netscape Navigator 2.0, góp phần định hình trải nghiệm website cá nhân cùng với ảnh GIF động và JavaScript thời kỳ đầu
• Thẻ <blink> được dùng mà không có thuộc tính, và dù trong HTML4 nó chính thức được ghi nhận là một thẻ mang tính đùa vui, nó vẫn bị lạm dụng rộng rãi vào cuối thập niên 90
• Nó thường được dùng để tăng mức độ thu hút chú ý cho nhiều loại thông điệp, chẳng hạn như nhấn mạnh “cập nhật mới nhất”

Thẻ <marquee> và cuộc cạnh tranh giữa các trình duyệt

• Cùng năm đó, Internet Explorer 2.0 do Microsoft phát hành đã giới thiệu thẻ <marquee> thay vì dùng <blink> như Netscape
• Thẻ <marquee> có thể điều chỉnh hoạt ảnh bằng nhiều thuộc tính khác nhau như hướng cuộn, tốc độ và số lần lặp
• Nếu <blink> mang sắc thái đùa cợt và có thể làm giảm khả năng đọc trực quan, thì <marquee> lại chủ ý nhấn mạnh hiệu ứng
• Vào cuối thập niên 90, cách dùng kết hợp hai thẻ — <marquee> bên trong <blink> — trở nên thịnh hành như một cách tạo ra các hiệu ứng khác nhau tùy trình duyệt (IE và Netscape)

Nâng cấp dần (Progressive Enhancement) và khả năng tương thích web

• Việc lồng <blink> và <marquee> có liên quan đến Postel’s Law (nguyên tắc khoan dung), theo đó trình duyệt web sẽ bỏ qua các thẻ không được hỗ trợ nhưng vẫn hiển thị nguyên nội dung bên trong
• Các phần tử HTML mới (như <video>) cũng thường dùng thẻ không tự đóng vì lý do này, nhằm tăng khả năng tương thích
• Khi dùng các thẻ như <blink>/<marquee>, ngay cả những trình duyệt không biết các thẻ đó vẫn có thể đọc được nội dung thông tin
• Web dựa trên khái niệm nâng cấp dần: cung cấp thông tin cho mọi người dùng, và chỉ một số trình duyệt mới tận hưởng thêm các hiệu ứng bổ sung

Những thay đổi và hỗ trợ trên nhiều trình duyệt

• Người dùng Opera, dù có giấy phép trả phí, hầu như không bao giờ thấy hiệu ứng <blink> hay <marquee>, nhưng việc truy cập nội dung thì không gặp vấn đề gì
• Netscape 7 gần như là trình duyệt duy nhất hỗ trợ cả <blink> lẫn <marquee>, nhờ đó có thể tạo đồng thời hiệu ứng cuộn + nhấp nháy, mang lại một kiểu hiệu ứng hiếm thấy nhất trên web

Kết luận: vị trí hiện tại và bài học cho thiết kế web

• Thẻ <blink> hiện nay đã hoàn toàn biến mất (không còn được trình duyệt hiện đại hỗ trợ), và nếu cần thì có thể thay thế bằng CSS animation
• Dù <marquee> vẫn còn hỗ trợ mặc định hoặc polyfill trong một số trình duyệt, việc sử dụng nó vẫn không được khuyến nghị
• Nó vẫn là biểu tượng của lịch sử web và mỹ học trực tuyến thời kỳ trước, đồng thời là một ví dụ giàu tính bài học về tiêu chuẩn web cũng như khả năng truy cập và bảo trì
• Nếu quan tâm đến nỗi hoài niệm số, bạn có thể tham khảo các tư liệu hoặc trang web liên quan đến thiết kế web thời xưa

[GN⁺]

Ý kiến trên Hacker News

• Tôi nhớ trước đây có một trang như ở liên kết dưới đây https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/

• Tôi thuộc kiểu người có cảm giác như đã sống từ 3.000 năm trước. Tôi còn nhớ thời người ta tranh cãi rất dữ dội về việc điều hướng bằng frame có phải là thực hành tệ hay không (không phải iframe mà là frame). Nếu còn ai biết frame thì thật vui. Trước khi AJAX xuất hiện, tôi từng tự dùng HTTP 204 để gửi thông điệp lên server mà không cần làm mới trang. Đầu những năm 2000 tôi cũng từng làm image map tham khảo image map: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map. Tôi còn từng dùng Dreamweaver để vẽ ranh giới bản đồ trong nhiều ngày liền để hoàn thành một bản đồ quốc gia có thể bấm được. Template của Dreamweaver thì không dùng version control, nên khi cập nhật rất hay làm mất sạch chỉnh sửa và không thể khôi phục. Tôi cũng nhớ việc xử lý vị trí click ảnh ở backend bằng input type=image. Tôi còn triển khai cập nhật streaming trên trang bằng Motion JPEG, và đến giờ Chrome vẫn chạy còn Firefox thì hơi chập chờn. Tôi đã thử đủ cách để xử lý vấn đề PNG alpha blending trên IE, cuối cùng cũng dùng được đôi chút với bản ActiveX, nhưng rồi phong cách flat design lên ngôi nên không còn cần nữa. Điều hướng thì tôi đã thử qua cả JAVA, Flash và Silverlight. Tôi cũng nhớ rất rõ spacer GIF, conditional comment, và việc môi trường phát triển trở nên dễ chịu hơn nhiều sau khi Firebug xuất hiện. Thời gian cứ thế trôi qua đến lúc chẳng nhận ra mình đã già từ khi nào

  • Tôi từng phát triển phần mềm web bằng frame kiểu cũ và không thấy có vấn đề gì đặc biệt. Mọi người hay nói về accessibility, nhưng đến giờ tôi vẫn chưa thật sự hiểu cụ thể vấn đề nằm ở đâu

  • Tôi nhớ thời làm việc cho các khách hàng yêu cầu hỗ trợ giữa vô vàn lỗi quái dị và giới hạn của IE6. Mỗi lần nhà thiết kế gửi bản bo góc từ Photoshop là chỉ biết thở dài. Hồi đó cái gọi là responsive thực ra chỉ là hỗ trợ vài độ phân giải desktop khác nhau. Phải cắt góc thành ảnh rồi đặt trực tiếp vào các ô của bảng. Làm mấy việc thủ công như vậy khiến tôi cảm thấy sức chịu đựng tinh thần của lập trình viên được rèn luyện lên rất nhiều

  • Tôi nhớ thời dùng công cụ slice của Photoshop để chia ảnh cực kỳ chi tiết, xuất ra gif rồi cố đặt chính xác vào các bảng HTML. Đó là thời mà rất nhiều thiết kế được tối ưu cho độ phân giải 800x600. Cảm giác như mọi ký ức đó đã tan biến vào dòng thời gian

  • Đến giờ tôi vẫn còn vài lần ghé vào những trang dùng frame. Trang Open Group/POSIX vẫn đang dùng frame

  • Tôi từng làm một webchat bằng frame. Phía trên là cửa sổ chat tải lại vô hạn, phía dưới là ô input, và khi gửi tin nhắn thì dùng 204 để ngăn làm mới. Tôi còn có thể gửi một script nhỏ vào frame phía trên để reload frame bên phải có danh sách người dùng. Khoảng năm 2000 tôi và vài người bạn đã dùng nó cùng nhau

• Trước đây tôi từng làm một trang có hoạt ảnh hoàn toàn chỉ bằng thẻ marquee. Hoàn toàn không dùng JavaScript, và ai xem cũng ngạc nhiên https://udel.edu/~ianozi/

  • Có lẽ đã 20 năm rồi tôi chưa thấy thẻ marquee, và hình như tôi chưa từng biết tham số direction còn cho phép cuộn dọc

• Trò tôi thích nhất với thẻ marquee là lồng chúng vào nhau. Nếu đặt hướng khác nhau, bạn có thể chỉnh marquee bên trong chạy ngược chiều với cùng tốc độ để tạo hiệu ứng đứng yên một lúc rồi mới di chuyển. Nếu để tốc độ khác nhau thì còn làm được các chuyển động phức tạp hơn. Tôi nhớ là để cách này hoạt động đúng thì phải đặt chiều rộng tối đa cho marquee bên trong

• Ngày xưa tôi ghét thẻ blink đến mức từng sửa file nhị phân của trình duyệt mình dùng (chắc là Netscape), đổi blink thành blonk để nó không còn nhấp nháy nữa

  • Tôi cũng hay làm kiểu chỉnh nhị phân này với client Slack (vì là ứng dụng Electron nên cực kỳ dễ). Những tính năng tôi không thích, như ẩn thông báo hay tín hiệu đang gõ, đều có thể dễ dàng loại bỏ

  • Nếu ai đó từng dùng thẻ blonk thì giờ có lẽ đã có khái niệm blonking rồi. Nghe như một trò hack khá vui

  • Chỉnh sửa nhị phân khá thú vị. Tôi từng đổi __gnu_warning thành __gnu_whining để loại bỏ các thông báo cảnh báo về gets(). Buffer overrun thì có thể là vấn đề đấy, nhưng với code viết sơ sài tôi cũng chẳng bận tâm lắm

• Tôi thấy thẻ marquee rất hữu ích để kiểm thử HTML injection. Đây là thẻ chuyển động mà hầu như chẳng ai dùng, nên chỉ cần nhìn là biết payload đã ăn hay chưa. Với người không chuyên kỹ thuật, việc cho họ thấy đoạn chữ không nên chuyển động mà lại chuyển động còn giúp họ hiểu rủi ro dễ hơn nhiều so với mấy thứ như in đậm

  • Khi sanitization HTML, tôi để lại mỗi marquee trong whitelist như một easter egg, còn gần như chặn hết mọi thứ khác

  • Tôi đang xem Hacker News qua một aggregator tùy biến, và nhờ bài này mới phát hiện ra nó dễ bị HTML injection. Bài viết năm 2020 đang chạy vòng vòng trên màn hình bằng marquee

• “Con thú sẽ xuất hiện giữa những đám mây xoáy của sự báo thù. Ngôi nhà của kẻ vô tín sẽ bị phá hủy, và các thẻ của chúng sẽ nhấp nháy cho đến tận cùng.” – The Book of Mozilla, 12:10 (about:mozilla) khiến tôi nghĩ rằng giờ ngay cả Mozilla cũng đang dần biến mất. Cảm giác như ngày tận thế vậy

  • Tôi vẫn đang dùng Firefox làm trình duyệt mặc định

• Tôi nhớ thời chạy website của cả tầng ký túc xá đại học trên máy tính của mình. Tôi từng đăng một thông điệp rất dài 997 từ bằng marquee, trong đó luyên thuyên đủ chuyện như con gái, trầm cảm, triết học. Cuối thông điệp có một dấu !, và nó dẫn tới một trang ẩn. Rồi cuối cùng cũng có ai đó đọc hết đoạn dài đó qua view source và tìm ra trang ấy

• Bạn tôi lúc nào cũng bọc middle name của mình bằng thẻ blink để nhanh chóng kiểm tra xem có thiếu escaping và có khả năng xss hay không. Hồi đó những cách đơn giản thế này lại khá hiệu quả để tìm lỗ hổng

• Bình luận này hiện đang trong quá trình xây dựng. Vui lòng ghé lại thường xuyên để kiểm tra cập nhật

  • Tôi tự hỏi bộ đếm lượt truy cập và sổ lưu bút ở đâu

  • Tôi tự hỏi trang này được tối ưu cho trình duyệt nào

  • Đừng quên gắn nhãn [NEW]