HTML <blink> ve <marquee> (2020)

• 1990’lardaki kişisel ana sayfalar, “son güncellemeler”i göze çarptırmak için yanıp sönen ve kayan metinleri sıkça kullanırdı; bu iki etiket bugün artık pek rastlanmayan web kültürünün izleri hâline geldi
• <blink>, 1995’te Netscape Navigator 2.0’a eklenen bir etiketti; Lou Montulli sık sık fikrin kaynağı olarak anılsa da gerçek uygulama kodunu kendisinin yazmadığını belirtti
• Aynı yıl Microsoft Internet Explorer 2.0, kaydırma yönünü, hızını, tekrarını ve ileri-geri hareketini kontrol eden öznitelik tabanlı efektler sunan <marquee> etiketini tanıttı
• İki etiket iç içe kullanıldığında Netscape’te yanıp sönme, IE’de ise kayma görülüyordu; desteklemeyen tarayıcılarda bile metnin kendisi okunabiliyordu
• <blink> fiilen ortadan kalktı; <marquee> bazı modern tarayıcılarda kalsa da gerçek web sitelerinde erişilebilirliği ve kullanılabilirliği zedeleyen bir dijital nostalji unsuruna daha yakın

---

1990’ların tarayıcılarının yarattığı görsel efekt rekabeti

• <blink> ve <marquee>, kişisel ana sayfalarda dikkat çekmek için kullanılan tipik 1990’lar tarzı web tasarımı öğeleriydi
• Macromedia Dreamweaver bile <blink> etiketini <marquee> ile sarmalama yöntemini bir anti-pattern gibi ele almış görünüyor

• <blink>: Şakadan yaygın kullanılan etikete

  • <blink> etiketinin icadı genellikle Lou Montulli’ye atfedilir, ancak kendisi nihai uygulama kodunu doğrudan yazmadığını belirtti
  • Montulli, 1994’te Netscape’e katılmadan önce salt metin tarayıcısı Lynx’i geliştiren kişiydi
  • Netscape mühendislerinin önerdiği görsel efektlerin Lynx’te çalışmayacağını söylerken, iki tarayıcıda da mümkün olan en gösterişli efektin metni açıp kapatmak olduğuna dair şaka yaptığına ilişkin bir anekdot var
  • Daha sonra adı açıklanmayan başka bir mühendis, gece geç saatlerde yaptığı çalışmayla <blink> etiketini ekledi
  • Netscape Navigator 2.0, 1995’te <blink> desteğini ekledi; aynı dönemde animated GIF ve JavaScript’in erken biçimi de dahil edildi
  • Kullanımı, <BLINK>This is my blinking text!</BLINK> gibi özniteliksiz, basit bir yapıdaydı
  • HTML4 tavsiyesi iki yıl sonra çıkacağı sıralarda <blink> şaka olarak belgelendi, ancak 1990’ların sonundaki web’de yaygın şekilde kullanıldı
  • Kişisel ana sayfalarda “latest updates” başlığını veya tüm bir bloğu sarmalamak için kullanılıyordu; bu dönemin havasını Cameron’s World üzerinden deneyimlemek mümkün

• <marquee>: Internet Explorer’ın kayan metni

  • Microsoft, Netscape Navigator 2.0 ile aynı yıl Internet Explorer 2.0’ı yayımladı
  • Internet Explorer o dönemde Netscape’in uyguladığı özellikleri yakalama aşamasındaydı, ancak <blink> yerine <marquee> etiketini tanıttı
  • <marquee>, çeşitli özniteliklerle kaydırma yönünü, hızını, tekrar edip etmeyeceğini ve ileri-geri sekme hareketini kontrol edebiliyordu
  • Örnek <MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE> şeklindedir ve bazı modern tarayıcılarda hâlâ çalışabilir

İki etiket üst üste geldiğinde ne oldu

• 1990’ların sonlarında vurgulanmak istenen içeriği hem <blink> hem de <marquee> ile sarmalama yöntemi de bir ölçüde yaygındı
  • Örnek <MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE> şeklindedir
  • Netscape kullanıcıları yanıp sönen metin görürken, IE kullanıcıları kayan veya ileri-geri hareket eden metin görebiliyordu
• Bu yöntem, web’in tarayıcının bilmediği öğeleri yok sayıp işlemeye devam etme özelliğiyle örtüşüyordu
  • Postel Yasası uyarınca tarayıcılar, anlamadıkları girdi olsa bile kullanıcıya mümkün olan en iyi render’ı sunmalıdır
  • Modern <video> öğesinin kendini kapatan bir etiket değil de blok biçiminde olmasının nedeni de, <video> etiketini bilmeyen eski tarayıcıların içerideki yedek kodu okuyabilmesini sağlamaktır
• İki etiketten hiçbirini bilmeyen tarayıcılarda bile içerik metni okunmaya devam edebiliyordu
  • Desteklenen tarayıcılara gösterişli efektler ekleyip diğer ortamlarda temel metni bırakması bakımından progressive enhancement yaklaşımına yakındır
  • JavaScript ve CSS de aynı kuralla uygulanabilir; bu, bakım yapılabilirliğe ve erişilebilirliğe yardımcı olur

Günümüzde daha çok tarihsel bir iz niteliğinde

• Netscape 7, 2002’de hem <blink> hem de <marquee> etiketlerini destekleyen nadir tarayıcılardan biriydi
  • Destek sırası ve iç içe öğeler konusunda bazı hassas noktalar vardı, ancak bazı kişisel web sayfalarında kayma ve yanıp sönme aynı anda görülüyordu
• <blink> günümüzde fiilen ölü bir etiket; gerçekten gerekirse CSS ile benzer bir efekt oluşturulabilir
• <marquee> hâlâ yaşıyor
  • Polyfill’lerin yanı sıra bazı tarayıcılarda yerel destek de varlığını sürdürüyor
  • Yine de gerçek web sitelerinde <marquee> kullanmaktan kaçınmak gerekir
• Dijital nostaljiyi yaşamak için ilginç bir kaynak olsa da, diğer kullanıcılara yanıp sönen ve akan metinleri dayatmak için bir neden yok

[GN⁺]

Hacker News yorumları

• https://web.archive.org/web/20201111125145/https://danq.me/2...

• 3.000 yıl önce de varmış gibi geliyor
  Navigasyonu frame içinde kullanmanın kötü bir pratik olup olmadığı üzerine tartışılan günleri hatırlıyorum. iframe değil, frame diyorum. AJAX öncesinde, sayfayı yenilemeden sunucuya mesaj göndermek için HTTP 204 kullanırdık; 2000’lerin başında da Dreamweaver ile ülke haritasının üstüne eyalet sınırlarını günlerce çizip tıklanabilir image map yapardık
  Dreamweaver şablon güncellemesi değişiklikleri uçurduğunda sürüm kontrolü olmadığı için geri getirmenin yolu yoktu; backend’de görüntünün tıklanan konumunu da işlerdik. Sayfa güncellemelerini Motion JPEG ile stream ederdik; IE’de PNG alfa harmanlamasını düzeltmek için birkaç adımdan geçip sonunda ActiveX yöntemine yaslandığımız da olurdu
  Site navigasyonunu Java, Flash, Silverlight ile yapardık; spacer GIF’leri, koşullu yorumları ve Firebug’ın nasıl bir kurtarıcı gibi geldiğini de hatırlıyorum. Ne zaman yaşlandım bilmiyorum; bir gün öylece olmuştu

  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
  • Frame’lerle web yazılımı yaptım ve bunda hiçbir sorun olmadığını düşünürdüm. Şimdi bile frame’lerin asıl sorununun ne olduğunu pek bilmiyorum; bazen ekran okuyucu erişilebilirliği gündeme geliyor ama somut olarak neyin sorun olduğunu hâlâ bilmiyorum
  • IE6’yı desteklemem gereken bir müşteri işi vardı; türlü türlü bug ve kısıt içinde tasarımcı her yuvarlatılmış köşeli Photoshop maketi verdiğinde umutsuzluğa kapılırdım
    Responsive de gerekiyordu ama o zamanlar daha çok farklı masaüstü boyutlarına uyarlama anlamına gelirdi; genelde köşeleri kesip tablo hücrelerine yerleştirmek gerekirdi. Bunları elle yapa yapa geliştirici olarak tuhaf bir bağışıklık kazanıyorsun
  • Photoshop’un slice aracıyla GIF’leri çok hassas biçimde kesip HTML tablolarına tam yerine yerleştirdiğimi hatırlıyorum
    800x600’e en iyi uyan tasarımlardı; o anların hepsi yağmurdaki gözyaşları gibi zaman içinde kayboldu
  • Hâlâ haftada birkaç kez frame kullanan siteleri ziyaret ediyorum. Open Group/POSIX tarafına, bugünlerde frame kullanılmaması gerektiğini kimse söylememiş gibi
  • Frame’lerle web chat yapmıştım. Üst taraf metnin sonsuz yüklendiği alandı; alt taraf ise mesaj gönderince yenilenmesin diye 204 yanıtı alan giriş kutusuydu
    IE4+ döneminde bunun en zarif yöntem olduğunu sanıyorum

• Eskiden yaptığım bir şey; her gösterdiğimde insanlar hiç JavaScript olmamasına şaşırıyor. Tüm animasyonlar yalnızca marquee etiketiyle yapılmış: https://udel.edu/~ianozi/

  • marquee etiketini yaklaşık 20 yıldır görmediğim için unutmuş olabilirim ama direction parametresiyle dikey kaydırmanın mümkün olduğunu bilmiyordum
  • https://no-js.abhij.it/

• marquee’de en sevdiğim teknik, farklı yönlerde iç içe kullanmaktı
  İçteki marquee’yi dıştakinin ters yönünde ve aynı hızda hareket ettirince içerik kayıp sonra duruyormuş gibi yapılabiliyordu; daha fazla katmanda hızları dönüşümlü verince rastgele zıplıyormuş efekti de mümkün oluyordu. Bunun çalışması için içteki marquee’ye maksimum genişlik vermek gerekiyordu sanırım

• marquee’nin çok yararlı olduğu bir alan var: HTML enjeksiyonu
  marquee hareket eder ve neredeyse kimse bilerek kullanmadığı bir etiket olduğu için HTML enjeksiyon açığını test ederken saldırının başarılı olup olmadığını ayırt etmek kolaydır. Teknik olmayan kişilere bile “bunun hareket etmemesi gerekiyordu ama ediyor” açıklaması, “bu metnin kalın olmaması gerekiyordu ama kalın”dan çok daha iyi işler

  • HTML temizleme yaparken Easter egg olarak yalnızca marquee’yi allowlist’e koyuyor, geri kalanların neredeyse hiçbirine izin vermiyorum
  • Hacker News’i özel bir toplayıcıyla okuyorum; bu yazı sayesinde toplayıcımın HTML enjeksiyonuna açık olduğunu fark ettim. Ekranda (2020) marquee gibi akıyordu
  • Her zaman <plaintext> etiketini kullanmışımdır. Kapatılamayan bir öğe olduğu için belgenin geri kalanını ham HTML’ye çevirir; bu yüzden çok göze çarpar
    https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

• blink etiketi elbette eskiden beri çok nefret toplardı; deneme için kullandığım tarayıcı binary’sinde, muhtemelen Netscape’ti, "blink" aratıp "blonk" yaptım. İşte, artık yanıp sönmüyordu

  • Binary düzenleme eskiden de şimdi de epey eğlenceli. gets() etrafındaki gereksiz dırdırı susturmak için "__gnu_warning"i "__gnu_whining"e çevirdiğimi hatırlıyorum
    Elbette buffer overrun olur, ama atılacak bir program kullanıyorsan buffer’ı taşırmazsın olur biter
  • Slack istemcisini de bu şekilde kurcaladım. Electron uygulamalarının avantajı gerçekten çok basit olmaları; hoşuna gitmeyen özellikleri kaldırabiliyorsun
    Örneğin bildirim gizleme ya da benim mesaj yazmakta olduğuma dair sinyal gönderme özelliğini kapatıyorum

• “Canavar, intikamın dönen bulutlarıyla çevrili olarak ortaya çıkacak. İnanmayanların evleri yıkılacak ve onlar yerle bir edilip yakılacak. Etiketleri kıyamet gününe kadar yanıp sönecek.”
  Bu, about:mozilla içindeki The Book of Mozilla, 12:10’dan bir alıntı; şimdi Mozilla yerle bir olup yanıyor. Son

  • Yine de hâlâ Firefox’u ana tarayıcı olarak kullanıyorum

• Bir arkadaşım, eksik escape’leri ve olası XSS’i hızlıca kontrol etmek için her zaman ikinci adını bir etiketin içine alma yöntemini kullanırdı. Eskiden bu şaşırtıcı derecede çok sorun bulurdu

• Bu yorum yapım aşamasındadır. Güncellemeleri görmek için lütfen sık sık tekrar ziyaret edin

  • Ziyaretçi sayacı ve ziyaretçi defteri nerede?
  • Bu sayfa hangi tarayıcı için optimize edildi?
  • [NEW] ifadesini de unutmayın

• İnsanların bu öğeleri sevmemesinin nedenlerinden biri aşırı kullanılmış olmaları
  Ama o aşırı kullanım sayesinde birçok kişi HTML’i bizzat denedi. HTML’e yeni başlayan biri için blink ya da marquee kullanmayı denemek oldukça tatmin ediciydi; HTML dünyasının giriş seviyesi uyuşturucusu gibiydi
  Bu öğeleri kullananlar da sonunda kullanmamaları gerektiğini öğrenmiş olmalı; ya da sayfa mySpace sayfasıysa kullanmaya devam etmiş de olabilirler. blink ve marquee ile alay etmek kolay; grafik tasarımcının Comic Sans kullananları küçümsemesine benzer. Ama bu tabular, insanların “bir deneyelim” özgüvenini kazanmasında çok işe yaradı