HTML <blink> và <marquee> (2020)
(danq.me)- Trong thập niên 1990, các trang chủ cá nhân thường dùng chữ nhấp nháy và chữ cuộn để làm nổi bật mục “cập nhật mới nhất”, và hai thẻ này nay đã trở thành dấu tích của một nền văn hóa web khó còn bắt gặp
<blink>là thẻ được đưa vào Netscape Navigator 2.0 năm 1995; Lou Montulli thường được nhắc đến như nguồn gốc ý tưởng, nhưng ông cho biết mình không viết mã triển khai thực tế- Cùng năm đó, Microsoft Internet Explorer 2.0 giới thiệu
<marquee>, cung cấp hiệu ứng dựa trên thuộc tính để điều khiển hướng cuộn, tốc độ, số lần lặp và chuyển động qua lại - Khi lồng hai thẻ này vào nhau, trên Netscape sẽ thấy hiệu ứng nhấp nháy, còn trên IE sẽ thấy hiệu ứng cuộn; ngay cả trong các trình duyệt không hỗ trợ thì bản thân văn bản vẫn đọc được
<blink>hầu như đã biến mất và<marquee>vẫn còn trong một số trình duyệt hiện đại, nhưng trên các website thực tế chúng gần như chỉ còn là nỗi hoài niệm số gây hại cho khả năng truy cập và tính dễ dùng
Cuộc cạnh tranh hiệu ứng thị giác do các trình duyệt thập niên 1990 tạo ra
<blink>và<marquee>là những yếu tố thiết kế web kiểu thập niên 1990 tiêu biểu để thu hút sự chú ý trên các trang chủ cá nhân- Ngay cả Macromedia Dreamweaver dường như cũng xem cách bọc
<blink>trong<marquee>như một anti-pattern -
<blink>: từ một trò đùa thành thẻ được dùng rộng rãi- Việc phát minh ra
<blink>thường được gán cho Lou Montulli, nhưng ông cho biết mình không trực tiếp viết mã triển khai cuối cùng - Trước khi gia nhập Netscape năm 1994, Montulli là người tạo ra trình duyệt chỉ văn bản Lynx
- Có giai thoại rằng khi các kỹ sư Netscape đề xuất những hiệu ứng thị giác mới, ông nói rằng các hiệu ứng đó không chạy được trên Lynx, và đùa rằng hiệu ứng hào nhoáng nhất có thể hoạt động trên cả hai trình duyệt là bật tắt văn bản
- Sau đó, một kỹ sư khác không được công khai danh tính đã thêm
<blink>trong một phiên làm việc khuya - Netscape Navigator 2.0 bổ sung hỗ trợ
<blink>vào năm 1995, và cùng thời điểm đó cũng bao gồm animated GIF cùng dạng sơ khai của JavaScript - Cách dùng là một cấu trúc đơn giản không có thuộc tính như
<BLINK>This is my blinking text!</BLINK> - Đến lúc khuyến nghị HTML4 xuất hiện sau đó 2 năm,
<blink>đã được ghi tài liệu theo kiểu đùa vui, nhưng trong web cuối thập niên 1990 nó vẫn được dùng rất nhiều - Nó thường được dùng để bọc tiêu đề “latest updates” hoặc cả một khối nội dung trên trang chủ cá nhân, và có thể cảm nhận bầu không khí thời kỳ đó qua Cameron’s World
- Việc phát minh ra
-
<marquee>: văn bản cuộn của Internet Explorer- Microsoft phát hành Internet Explorer 2.0 trong cùng năm với Netscape Navigator 2.0
- Khi đó Internet Explorer vẫn đang trong giai đoạn đuổi kịp các tính năng mà Netscape đã triển khai, nhưng thay vì
<blink>thì hãng đưa vào<marquee> <marquee>có thể dùng nhiều thuộc tính để điều khiển hướng cuộn, tốc độ, việc lặp lại và chuyển động nảy qua lại- Ví dụ là
<MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE>, và nó vẫn còn hoạt động trong một số trình duyệt hiện đại
Điều xảy ra khi chồng hai thẻ lên nhau
- Vào cuối thập niên 1990, cách bọc nội dung cần nhấn mạnh bằng cả
<blink>lẫn<marquee>cũng khá phổ biến ở một mức độ nhất định- Ví dụ là
<MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE> - Người dùng Netscape sẽ thấy văn bản nhấp nháy, còn người dùng IE sẽ thấy văn bản cuộn hoặc di chuyển qua lại
- Ví dụ là
- Cách làm này gắn với đặc tính của web là trình duyệt sẽ bỏ qua các phần tử không biết đến và vẫn tiếp tục render
- Theo Postel’s Law, trình duyệt nên cung cấp cách hiển thị tốt nhất có thể cho người dùng ngay cả khi gặp đầu vào mà nó không hiểu
- Lý do phần tử
<video>hiện đại không phải là thẻ tự đóng mà là dạng khối cũng vì để các trình duyệt cũ không biết<video>vẫn có thể đọc được mã thay thế bên trong
- Ngay cả trên những trình duyệt không biết cả hai thẻ, nội dung văn bản vẫn tiếp tục đọc được
- Ở chỗ chỉ thêm hiệu ứng hào nhoáng cho các trình duyệt được hỗ trợ và để lại văn bản cơ bản cho các môi trường còn lại, nó gần với progressive enhancement
- JavaScript và CSS cũng có thể áp dụng theo nguyên tắc này để giúp cải thiện khả năng bảo trì và khả năng truy cập
Hiện nay gần như chỉ còn là dấu tích lịch sử
- Netscape 7 là một trong số ít trình duyệt hiếm hoi hỗ trợ cả
<blink>lẫn<marquee>vào năm 2002- Dù có những điểm kén chọn về thứ tự hỗ trợ và phần tử lồng nhau, một số trang web cá nhân vẫn hiển thị đồng thời cả cuộn lẫn nhấp nháy
<blink>là một thẻ hiện nay về thực chất đã chết, và nếu thật sự cần thì có thể tạo hiệu ứng tương tự bằng CSS<marquee>thì vẫn còn sống- Không chỉ có polyfill, mà một số trình duyệt vẫn còn hỗ trợ native
- Dù vậy, vẫn nên tránh dùng
<marquee>trên các website thực tế
- Đây là tài liệu thú vị để thưởng thức nỗi hoài niệm số, nhưng không có lý do gì để bắt người dùng khác phải chịu văn bản nhấp nháy và trôi chạy
1 bình luận
Các ý kiến trên Hacker News
https://web.archive.org/web/20201111125145/https://danq.me/2...
Cảm giác như chuyện này đã có từ 3.000 năm trước vậy
Tôi nhớ thời người ta còn tranh cãi việc dùng navigation trong frame có phải là cách làm tệ hay không. Không phải iframe, mà là frame ấy. Trước AJAX, để gửi thông điệp tới server mà không refresh trang, người ta dùng HTTP 204; đầu những năm 2000 thì dùng Dreamweaver để mất mấy ngày vẽ ranh giới bang lên bản đồ quốc gia, tạo image map có thể nhấp được
Khi cập nhật template Dreamweaver làm mất thay đổi thì không có version control nên chẳng có cách khôi phục; backend cũng xử lý vị trí nhấp trên ảnh. Chúng tôi stream cập nhật trang bằng Motion JPEG, và để sửa alpha blending của PNG trên IE thì phải qua nhiều bước, có lúc còn dựa vào cách dùng ActiveX
Chúng tôi làm navigation cho site bằng Java, Flash, Silverlight, và tôi vẫn nhớ spacer GIF, conditional comments, cùng việc Firebug giống vị cứu tinh đến mức nào. Không biết mình già đi từ lúc nào; một ngày nọ tự nhiên đã như vậy
Cũng cần responsive, nhưng khi đó chủ yếu là đáp ứng các kích thước desktop khác nhau; thường phải cắt các góc ra rồi đặt vào ô của bảng. Làm những việc này bằng tay khiến bạn phát triển một kiểu sức chịu đựng kỳ lạ với tư cách developer
Đó là những thiết kế tối ưu nhất cho 800x600, và tất cả những khoảnh khắc ấy đã tan biến trong thời gian như nước mắt trong mưa
Thời IE4+ thì tôi nghĩ đó là cách thanh lịch nhất
Đây là thứ tôi làm ngày xưa; mỗi lần cho người khác xem, họ đều ngạc nhiên vì hoàn toàn không có JavaScript. Tất cả animation chỉ dùng thẻ marquee: https://udel.edu/~ianozi/
Kỹ thuật tôi thích nhất với marquee là lồng chúng theo các hướng khác nhau
Nếu cho marquee bên trong di chuyển ngược hướng với marquee bên ngoài, cùng tốc độ, bạn có thể làm nội dung trông như đang cuộn rồi dừng lại; nếu lồng thêm nhiều lớp và xen kẽ tốc độ, còn có thể tạo hiệu ứng nhảy loạn ngẫu nhiên. Tôi nhớ hình như để nó hoạt động thì phải đặt chiều rộng tối đa cho marquee bên trong
Marquee có một lý do rất hữu ích: chèn HTML
Marquee chuyển động, và hầu như chẳng ai cố ý dùng thẻ này, nên khi kiểm thử lỗ hổng chèn HTML, rất dễ nhận ra cuộc tấn công có thành công hay không. Với người không chuyên kỹ thuật, giải thích “cái này không được phép chuyển động mà lại chuyển động” dễ hiểu hơn nhiều so với “đoạn chữ này không được phép in đậm mà lại in đậm”
(2020)đang trôi ngang như marquee<plaintext>. Vì là phần tử không thể đóng, nó biến phần còn lại của tài liệu thành HTML thô, nên cực kỳ dễ nhận rahttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
Thẻ blink dĩ nhiên đã bị ghét từ lâu; tôi từng thử tìm
"blink"trong binary của một trình duyệt đang dùng thử, có lẽ là Netscape, rồi đổi thành"blonk". Thế là xong, nó không nhấp nháy nữa"__gnu_warning"thành"__gnu_whining"để làm im mấy lời càm ràm vô ích quanhgets()Tất nhiên là có thể có buffer overrun, nhưng nếu đang viết chương trình dùng xong bỏ thì chỉ cần đừng làm tràn buffer là được
Ví dụ như tắt ẩn thông báo hoặc tắt việc gửi tín hiệu rằng tôi đang soạn tin nhắn
“Con thú sẽ xuất hiện, được bao quanh bởi những đám mây xoáy của báo thù. Nhà của những kẻ không tin sẽ sụp đổ, và chúng sẽ bị thiêu rụi đến tận mặt đất. Các thẻ của chúng sẽ nhấp nháy cho đến ngày tận thế.”
Đây là đoạn từ The Book of Mozilla, 12:10 trong
about:mozilla, và giờ Mozilla đang bị thiêu rụi đến tận mặt đất. HếtBạn tôi luôn dùng cách bọc tên đệm của mình bằng một thẻ để kiểm tra nhanh các ký tự escape bị thiếu và XSS tiềm ẩn. Ngày xưa cách này phát hiện vấn đề hiệu quả đáng ngạc nhiên
Bình luận này đang được thi công. Vui lòng quay lại thường xuyên để xem cập nhật
[NEW]nữaMột trong những lý do người ta ghét các phần tử như thế là vì chúng từng bị lạm dụng
Nhưng chính sự lạm dụng đó đã khiến nhiều người tự tay thử HTML. Với người mới dùng HTML, thử blink hay marquee khá là có cảm giác thành tựu; chúng giống như chất gây nghiện nhập môn của thế giới HTML
Những người dùng các phần tử này cuối cùng chắc cũng học được rằng không nên dùng chúng, hoặc nếu đó là trang mySpace thì có thể họ vẫn tiếp tục dùng. Chế giễu blink và marquee thì dễ, giống như designer đồ họa coi thường người dùng Comic Sans, nhưng những điều cấm kỵ như vậy đã rất hữu ích trong việc giúp mọi người có được sự tự tin để “thử làm xem sao”