- Tag <blink> dan <marquee> yang muncul pada awal web era 90-an merupakan elemen ikonik desain web saat itu
- Tag <blink> diperkenalkan di Netscape Navigator 2.0, dan meski tujuannya cenderung iseng serta kurang estetis, tag ini tetap digunakan secara luas
- Sebagai tanggapan, Microsoft memperkenalkan tag <marquee> di Internet Explorer sehingga animasi teks bisa dikendalikan dengan jauh lebih beragam
- Jika kedua tag digunakan secara bertingkat, dimungkinkan untuk memberikan efek animasi yang berbeda menurut browser, dan ini disebut sebagai contoh prinsip peningkatan bertahap
- Saat ini <blink> telah menghilang dan <marquee> juga tidak lagi direkomendasikan, tetapi keduanya masih sering dibicarakan sebagai contoh sejarah web dan nostalgia online
Pendahuluan: mengenang tag <blink> dan <marquee>
- Baru-baru ini, saat berbincang dengan sesama pengembang web, penulis bercanda tentang tag HTML <blink> dan <marquee>, lalu menyadari bahwa pengembang tersebut tidak mengenal kedua tag ini
- Bagi pengembang muda saat ini, tag-tag tersebut mungkin terasa asing, tetapi dulu keduanya merupakan elemen ikonik desain web era 90-an
Latar belakang kelahiran dan sejarah tag <blink>
- Pencipta tag <blink> sering disebut sebagai Lou Montulli, pembuat browser Lynx, tetapi ia sendiri menyatakan bahwa ia tidak menulis kodenya secara langsung
- Menurut penuturannya, saat berbincang di sebuah bar dengan para insinyur Netscape, efek “teks berkedip” yang bahkan bisa dipakai di browser teks seperti Lynx diajukan sebagai lelucon, lalu berdasarkan ide itu insinyur lain mengerjakannya semalaman hingga terwujud
- Pada 1995, tag <blink> resmi diperkenalkan di Netscape Navigator 2.0, dan bersama GIF bergerak serta JavaScript awal turut membentuk pengalaman situs web pribadi pada masa itu
- Tag <blink> digunakan tanpa atribut, dan meskipun dalam HTML4 secara resmi dicatat sebagai tag untuk bercanda, pada akhir 90-an tag ini tetap disalahgunakan secara luas
- Tag ini banyak dipakai untuk menarik perhatian pada berbagai pesan seperti penekanan “pembaruan terbaru”
<marquee> dan persaingan antar-browser
- Pada tahun yang sama, Internet Explorer 2.0 yang dirilis Microsoft memperkenalkan tag <marquee> alih-alih <blink> milik Netscape
- Tag <marquee> memungkinkan animasi diatur lewat beragam atribut seperti arah gulir, kecepatan, dan apakah pengulangan dilakukan atau tidak
- Jika <blink> bernuansa lelucon dengan kecenderungan merusak keterbacaan visual, <marquee> justru sengaja menonjolkan efek tersebut
- Pada akhir 90-an, cara memakai kedua tag sekaligus—<marquee> di dalam <blink> atau sebaliknya dalam praktiknya—menjadi populer sebagai metode untuk menghadirkan efek berbeda di tiap browser (IE dan Netscape)
Progressive Enhancement dan kompatibilitas web
- Penggunaan bertingkat <blink> dan <marquee> berkaitan dengan Postel’s Law(prinsip toleransi), yaitu bahwa browser web mengabaikan tag yang tidak didukung tetapi tetap merender konten di dalamnya
- Elemen HTML baru (seperti <video>) juga kerap memakai tag non-self-closing karena alasan ini, demi menjaga kompatibilitas
- Dengan memanfaatkan tag seperti <blink>/<marquee>, browser yang tidak mengenali tag tersebut tetap bisa membaca konten informasinya
- Web didasarkan pada konsep peningkatan bertahap, yaitu menyediakan informasi bagi semua pengguna sambil membiarkan hanya sebagian browser menikmati efek tambahan
Perubahan dan dukungan di berbagai browser
- Pengguna Opera hampir tidak pernah melihat efek <blink> atau <marquee> meskipun memakai lisensi berbayar, tetapi tidak mengalami masalah dalam mengakses kontennya
- Netscape 7 adalah hampir satu-satunya browser yang mendukung baik <blink> maupun <marquee>, sehingga bisa menampilkan efek gulir + kedip secara bersamaan dan menghasilkan salah satu efek paling langka di web
Kesimpulan: posisinya saat ini dan pelajaran bagi desain web
- Tag <blink> kini benar-benar telah hilang (tidak didukung browser modern), dan bila diperlukan dapat digantikan dengan animasi CSS
- Meski <marquee> di beberapa browser masih memiliki dukungan bawaan atau polyfill, penggunaannya tetap tidak direkomendasikan
- Keduanya tetap menjadi simbol sejarah web dan estetika online masa lalu, sekaligus contoh yang memberi pelajaran tentang standar web serta aksesibilitas dan pemeliharaan
- Jika tertarik pada nostalgia digital, Anda bisa melihat materi atau situs terkait desain web lama
1 komentar
Komentar Hacker News
Saya ingat dulu pernah ada situs seperti di tautan berikut https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/
Saya merasa seperti orang yang sudah ada sejak 3.000 tahun lalu. Saya ingat masa ketika orang berdebat sengit apakah navigasi frame itu praktik yang buruk atau tidak (bukan iframe, tapi frame). Senang juga kalau masih ada yang tahu frame. Sebelum AJAX muncul, saya pernah langsung memakai HTTP 204 untuk mengirim pesan ke server tanpa me-refresh halaman. Pada awal 2000-an saya juga pernah mengerjakan image map referensi image map: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map. Saya bahkan pernah menghabiskan beberapa hari menggambar batas peta di Dreamweaver sampai jadi peta negara yang bisa diklik. Template Dreamweaver sering bikin perubahan hilang total dan tak bisa dipulihkan saat update karena tidak pakai version control. Saya juga ingat memproses posisi klik gambar di backend dengan input type=image. Saya pernah membuat update streaming di halaman memakai Motion JPEG, dan itu masih jalan di Chrome walau agak tidak stabil di Firefox. Saya mencoba berbagai cara untuk mengatasi masalah alpha blending PNG di IE, lalu sempat cukup memanfaatkan versi ActiveX, tetapi akhirnya jadi tidak perlu lagi setelah desain flat menjadi tren. Untuk navigasi, saya sudah mencoba JAVA, Flash, sampai Silverlight. Saya juga masih sangat ingat spacer GIF, conditional comments, dan betapa mudahnya lingkungan pengembangan setelah Firebug muncul. Waktu berlalu sampai saya tidak sadar kapan saya jadi tua
Dulu saya mengembangkan perangkat lunak web dengan frame dan tidak merasa ada masalah besar. Orang-orang sering bicara soal aksesibilitas, tapi sampai sekarang saya masih kurang paham bagian spesifik mana yang bermasalah
Saya ingat bekerja untuk klien yang meminta dukungan di tengah semua bug dan keterbatasan aneh IE6. Setiap desainer menyerahkan desain sudut membulat dari Photoshop, saya cuma bisa menghela napas. Waktu itu, "responsif" pada dasarnya berarti menyesuaikan beberapa resolusi desktop. Sudut-sudut harus dipotong menjadi gambar lalu ditempatkan langsung ke sel tabel. Pekerjaan manual seperti ini benar-benar menempa mental developer
Saya ingat masa ketika saya membagi gambar secara detail dengan alat slice di Photoshop, mengekspornya sebagai gif, lalu berusaha menatanya dengan tepat di tabel HTML. Saat itu banyak desain yang dioptimalkan untuk resolusi 800x600. Rasanya semua kenangan ini telah meleleh dan hilang ditelan waktu
Sampai sekarang saya masih mengunjungi beberapa situs yang memakai frame. Situs Open Group/POSIX masih menggunakan frame
Saya pernah membuat web chat dengan frame. Di atas ada jendela chat yang terus memuat ulang tanpa henti, di bawah ada input box, dan saat mengirim pesan saya memakai 204 agar tidak terjadi refresh. Saya juga bisa mengirim script kecil ke frame atas agar me-reload frame kanan yang berisi daftar pengguna. Sekitar tahun 2000, saya memakainya bersama beberapa teman
Dulu saya pernah membuat situs yang animasinya murni hanya dengan tag marquee. Sama sekali tidak memakai JavaScript, dan semua orang yang saya tunjukkan selalu terkejut https://udel.edu/~ianozi/
Trik favorit saya dengan tag marquee adalah menumpuknya. Jika arahnya dibuat berbeda, lalu marquee di dalam disetel ke arah sebaliknya dengan kecepatan yang sama, kita bisa membuat efek berhenti sesaat lalu bergerak lagi. Kalau kecepatannya dibedakan, gerakannya bisa jadi lebih kompleks. Kalau tidak salah, agar cara ini bekerja dengan benar, inner marquee harus diberi lebar maksimum
Dulu saya sangat membenci tag blink sampai-sampai saya mengubah string 'blink' menjadi 'blonk' di file biner browser yang saya pakai (mungkin Netscape), jadi teksnya tidak berkedip lagi
Saya cukup sering melakukan tweak biner seperti ini terutama pada klien Slack (karena aplikasi Electron jadi sangat mudah). Fitur yang tidak saya suka juga mudah dihilangkan, misalnya menyembunyikan notifikasi atau memblokir tanda sedang mengetik
Kalau ada yang pernah memakai tag blonk, mungkin sekarang sudah ada istilah blonking. Kedengarannya seperti hack yang cukup lucu
Mengubah biner itu cukup menyenangkan. Saya dulu suka mengganti "__gnu_warning" menjadi "__gnu_whining" supaya pesan peringatan gets() hilang. Soal buffer overrun ya bisa saja terjadi, tapi untuk kode yang dibuat seadanya saya tidak terlalu peduli
Saya sangat sering memakai tag marquee untuk pengujian HTML injection. Karena hampir tidak ada yang memakainya, begitu tag bergerak muncul saya langsung tahu bahwa serangannya berhasil. Bahkan untuk orang nonteknis, menunjukkan teks bergerak saat seharusnya tidak bergerak jauh lebih mudah dipahami risikonya dibanding sekadar bold
Saat melakukan sanitization HTML, saya sengaja menyisakan hanya marquee di whitelist sebagai easter egg, dan memblokir hampir semua yang lain
Saya membaca Hacker News lewat aggregator kustom, dan dari postingan ini saya jadi sadar bahwa itu rentan terhadap HTML injection. Artikel tahun 2020 itu sedang berjalan keliling layar sebagai marquee
"Dan sang Beast akan datang dalam pusaran awan pembalasan. Rumah kaum kafir akan dihancurkan dan tag mereka akan berkedip sampai akhir zaman." – The Book of Mozilla, 12:10 (about:mozilla). Membaca itu membuat saya merasa Mozilla sekarang juga sedang menghilang. Rasanya seperti kiamat
Saya jadi teringat masa ketika saya menjalankan situs web lantai asrama kampus dari komputer saya sendiri. Saya menaruh pesan panjang 997 kata di marquee, isinya ocehan tentang perempuan, depresi, filsafat, dan macam-macam lainnya. Di akhir pesan itu ada tanda ! yang ditautkan ke halaman tersembunyi. Akhirnya seseorang menemukan halaman itu setelah membaca isi panjangnya lewat view source
Teman saya selalu membungkus nama tengahnya dengan tag blink untuk cepat menguji apakah ada escaping yang terlewat dan potensi xss. Dulu cara sederhana seperti ini cukup efektif untuk menemukan celah
Komentar ini saat ini sedang dalam pembangunan. Silakan sering mampir untuk memeriksa pembaruan
Saya penasaran di mana visitor counter dan guestbook-nya
Saya penasaran halaman ini dioptimalkan untuk browser apa
Jangan lupa menambahkan tanda [NEW]