Firefox’a özel minimap (2021)

• Yalnızca Firefox masaüstü kullanıcılarına görünen blog minimap’i, Firefox’un düşük %4 pazar payına rağmen tarayıcıya özel CSS özelliklerinin denendiği bir örnek
• Temel unsur, yalnızca Firefox tarafından desteklenen element() CSS fonksiyonu; gerçek uygulamada ise vendor prefix eklenmiş -moz-element() kullanılıyor
• Bu fonksiyon, herhangi bir HTML öğesini görüntü gibi gösterebilir ve aynı zamanda metin seçimini, kaydırmayı ve geç yüklenen görsellerdeki değişimleri gerçek zamanlı olarak yansıtır
• Minimap arka planı, #main DOM düğümünü background olarak çizen tek satırlık CSS ile oluşturulurken, mevcut viewport kutusunun hareketi için JavaScript de kullanılır
• Firefox’a özel özellikler kullanıldığında, ayrı bir canvas render işlemi olmadan sayfanın bir bölümü minimap arka planı olarak yeniden kullanılabilir

---

element() tabanlı, Firefox’a özel minimap

• Blog yazısının minimap’i, Firefox masaüstü kullanıcılarına görünen bir özelliktir ve Firefox’un pazar payı şu anda %4 olarak anılıyor
• Firefox, CSS element() fonksiyonunu destekleyen tek tarayıcıdır ve gerçek kullanımda vendor prefix gerekir
• element() fonksiyonu, sayfa içindeki herhangi bir HTML öğesini görüntü gibi gösterebilir
  • Gösterilen şey statik bir ekran görüntüsü değil, canlı bir görüntü gibi davranır
  • Metin seçimi veya kaydırma sırasında geç yüklenen görsellerin görünmesi gibi değişimler de yansıtılır

Uygulama şekli

• Başka bir HTML öğesini arka plan görseli olarak tanımlayan CSS şu şekildedir

mini-map .screen-image .canvas {
  background: white -moz-element(#main) no-repeat scroll center center / contain;
}

• -moz-element(#main), #main DOM düğümünü minimap’in arka plan görseli olarak çizer
• Minimap içindeki mevcut viewport kutusunun hareketi için JavaScript de kullanılır, ancak başka bir DOM düğümünü çizmenin özü tek satırlık CSS’tir
• Firefox’ta -moz-element kullanılarak sayfanın bir bölümü minimap gibi gösterilebilir

[GN⁺]

Hacker News yorumları

• 10 yıl önce DOM öğelerini kâğıt gibi katlayan oyuncakvari bir JS kütüphanesi https://oridomi.com yapmıştım; her katlamada düğümleri zahmetli şekilde klonlamak yerine element() kullanabileceğimi umuyordum.
  10 yıl geçmesine rağmen bu niş CSS özelliği diğer tarayıcılar tarafından benimsenmedi; aynı dönemdeki CSS Custom Filters spesifikasyonunu da yakında kullanabileceğimizi sanıyordum ama o da hâlâ traction kazanamadı.

  • Bildiğim kadarıyla tarayıcı üreticileri CSS Custom Filters spesifikasyonuna bakıp bunun güvenli biçimde uygulanmasının fazla zor olduğuna karar verdi.
    Bir yandan, güvenli hâle getirilemediği için bir özellikten vazgeçilmesini anlıyorum; diğer yandan CSS Custom Filters’ı gerçekten istiyordum ve hâlâ onunla yapabileceğim şeyleri sık sık düşünüyorum.
    https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

• Minimapa sahip editörleri kullanınca yaptığım ilk şey onu kapatmak oluyor.
  Kod yazarken neredeyse en işe yaramaz özelliklerden biri; sitelerde de benzer şekilde faydasız görünüyor. İçerik nereye gittiğini anlayamayacak kadar küçük; sayfa kısa da olsa uzun da olsa ekran alanı kaybına veya dikkat dağınıklığına değecek bir getirisi yok. Açıklayıcı başlıklara sahip düzgün bir içindekiler dizini ya da arama işlevi, sayfa gezinmesi için çok daha iyi.
  Minimapın havalı olabileceği yerler, büyük görseller veya haritalar gibi doğası gereği görsel nesneler; yakınlaştırdığınızda bütünün neresine baktığınızı görmek açısından işe yarar. Havalı bir gelecek özelliği ama bu uygulama pek mükemmel görünmüyor.

  • Açık bırakıyorum. Fare veya trackpad gibi bir işaretleme aygıtıyla kaydırırken daha büyük bir kaydırma çubuğu gibi çalışıyor.
    Günümüz işletim sistemleri kaydırma çubuklarını gizlemeye ya da olabildiğince küçültmeye çalışıyor; minimap bu sorunu çözerken dosya içeriğinin görsel biçimini de biraz gösteriyor. Metni okuyamazsınız ama üzerinde uzun süre çalıştığınız bir dosyaysa neye baktığınızı tam olarak bilirsiniz.
  • Ben tam tersine kullanıyorum. Uzun dosyalarla sık çalıştığım için minimapı çoğunlukla çok daha iyi bir kaydırma çubuğu olarak kullanıyorum.
    Doğrudan baktığım nadirdir ama görüş alanımda olduğu için farkında olmadan sık sık göz gezdiriyorum. Böyle bir özellik açıkça herkese uygun değil; ama beğenmediğiniz için işe yaramaz olduğunu düşünmek hata olur.
  • Amaç küçük yazıları okumak değil, kodun şeklini görmek.
    Örneğin VSCode minimapta hataları kırmızıyla belirgin biçimde gösterdiği için ilgili konuma gitmek kolaylaşıyor.
  • Minimap, klasik kaydırma çubuğunun önizleme işlevini geliştirmek için de iyi olabilir.
    Kaydırma çubuğu sayfanın uzunluğunu göstererek okumaya devam edip etmeyeceğinize karar vermenizi sağlar; minimap ise “kısa bir yazının ardından yok sayılabilecek yorumların birkaç sayfa sürdüğü durum” ile “baştan okunamayacak kadar uzun bir yazı”yı ayırt etmeye yardımcı olur.
  • Minimapı epey seviyorum. Zorunlu olmamalı ve birinin kapatmak istemesini tamamen anlıyorum. Çok yer kaplıyor; dosyaları sık sık bölerek görüntüleyenler için epey rahatsız edici olabilir.
    Ancak kodu görsel ve mekânsal olarak düşünen, dosyaları da gerekene kadar bölmeyen biri olduğum için dosyanın “şeklini” görüp hızlıca gezinmeme yardımcı oluyor. Bu özellikle dosya net bölümlere ayrılmışsa geçerli.
    Büyük görseller veya haritalar konusunda da katılıyorum. Çoğu görsel düzenleyicide buna benzer bir viewport özelliği var ve ayrıntılı çalışma yaparken epey işe yarıyor.

• Kullanım amacı görülüyor ama epey wild. Metin seçtiğinizde gerçek zamanlı güncelleniyor ve neredeyse aynı içeriğe bakan ayrı bir viewport gibi görünüyor.
  Kullanım senaryolarını ve sonuçlarını düşünüyorum; offscreen ya da overflow:hidden hileleriyle gizlenen öğelerde de çalışacak hâle getirilebilir. Yine de bildiğim kadarıyla, kütüphane olmadan o öğeyi görüntüye dönüştürmenin hâlâ bir yolu yok; muhtemelen gizlilik nedeniyle.
  MDN sayfası oldukça kısa olduğu için çok sorum var. CSS filtreleri ve distorsiyonları öğelere doğrudan uygulamak mümkün olsa gerek; peki bunun arka plan gibi ele alınması yeni olasılıklar açar mı? Uzun zamandır varmış ama ilk kez duyuyorum; böyle bir özelliğin CSS adayları arasında olduğunu bilmiyordum. Yalnızca Firefox’u hedefleyip Chrome’u umursamadığınızda, viewport kopyalamanın ötesinde ne kadar kullanım alanı olacağını merak ediyorum.

  • Ayna, büyüteç, ekran dışında kalan sayfa bölümünü sürekli görünür tutma gibi epey havalı kullanım alanları olabilir.
    Örneğin düzenleme amaçlı kullanılabilir; kaçırdığım çok kullanım senaryosu da vardır. Temelde mutlaka gerekli özellikler değiller ama her biri kendi çapında havalı.

• Her gün yalnızca Chrome’da çalışan sitelerle karşılaşıyorum. Artık karşı saldırı zamanı :)

  • Ben yalnızca Firefox kullanıyorum ve web’de oldukça sıradan biçimde geziniyorum; böyle şeyler neredeyse hiç olmuyor. Ayda birden çok daha az, muhtemelen üç ayda bir kadar.
  • Bölgesel bir durum olabilir mi? Bende çok nadir oluyor. Yine de düzenli kullandığım bazı Google siteleri Firefox’ta Chrome’a göre daha kötü çalışıyor.
  • Firefox’ta, hem Mac’te hem Linux’ta bazı onay kutularının hiç görünmediği bir sorun yaşamıştım.
    Geçen ay American Airlines’ın uluslararası uçuş check-in işlemini yaparken, Firefox’ta gerekli onay kutusu görünmediği için check-in sürecini tamamlayamadım; ancak Chrome’da göründüğünü fark edince ilerleyebildim.
  • Böyle bir siteyle karşılaşınca sinirleniyorum. Özellikle 2023’te bunun bahanesi yok.
    Vanguard web sitesinin daha obscure sayfalarında konsol hatalarıyla bozulduğunu gördüm; Chrome’a geçince çalıştı.
  • Evet. Eskiden Firefox’u engelleyen açık kaynak sabotajı hakkındaki söylentiler veya gerçekler aklıma geliyor.
    Firefox’ta düzgün çalışan sayfaların artık çalışmadığını sık görüyorum ve bazen başka bir tarayıcı açmam gerekiyor. Gerçekten böyle bir şey olmamasını umuyorum. Varsayılan olarak Firefox kullanıyorum.

• element() Firefox’ta 2011’den beri -moz- ile tam olarak destekleniyormuş; diğer tarayıcılarda kısmi destek bile yok gibi görünmesi şaşırtıcı https://caniuse.com/css-element-function
  Çapraz tarayıcı desteği olsaydı, minimap dışında da birkaç güçlü kullanım senaryosu akla geliyor. Chrome veya WebKit ekipleriyle bağlantısı olan biri varsa nedenini merak ediyorum. İlgi eksikliğinden mi, performanslı biçimde uygulaması zor olduğundan mı, yoksa çetrefilli güvenlik sorunları olduğundan mı bilmek isterim

  • Chromium tabanlı tarayıcılarda, element()in yaptığı işlerin bir kısmını yapan -webkit-box-reflect var https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
    Özellikle öğenin yansımasını ele alıyor. Kişisel olarak -moz-element için en büyük kullanım senaryosunun da tam olarak bu yansıma olduğunu düşünüyorum

• Minimap de sevimli, ama sekmeyi 3 dakika idle durumda bırakırsanız devreye giren ekran koruyucu daha eğlenceli
  Web’de hâlâ böyle bir oyunculuğun kalmış olması hoş

• Bu, sağ tıkla görsel kaydetme veya metin seçme gibi temel tarayıcı özelliklerini bilerek bozan sitelerin fena hâlde suistimal edebileceği bir özellik gibi görünüyor
  Tüm sayfayı arka plan görseli olarak render ederseniz artık içeriği inceleyemez, kaydedemez veya çeviremezsiniz. Bu sadece akla gelen ilk örnek; bu fonksiyonla okuru rahatsız etmenin kötü niyetli pek çok yolu olabileceğini düşünüyorum

  • Suistimal edilebilir göründüğüne katılıyorum, ama verdiğin örnek uygun değil. Bahsettiğin özellikler zaten çok az CSS veya JS ile engellenebiliyor; bunun için element canvas’ıyla işi karmaşıklaştırmaya gerek yok
    Çoğu web sitesinin bunu yapmamasının nedeni beceriksizlik değil, gerçekten bunu yapmak istememeleri; kötü web siteleri için de insanların rakiplere gitmesi gibi ekonomik bir ceza var
    Ancak şirket intranet portalları veya kötü yerel yönetim siteleri gibi serbest piyasa olmayan alanlarda bu ilke pek iyi işlemediğinden, kullanıcıya düşman şeyler daha sık görülüyor. Genel olarak web sitesi işletmecilerini özellikle kısıtlamak gerektiğinde web sitesi kalitesinin artacağını düşünmek bir hata; gerçekte doğrusu bunun tersi

• Büyük yazılarda minimap’in ne kadar iyi çalıştığı etkileyici. Rastgele tıklarken https://www.stefanjudis.com/notes/should-responsive-images-w... adresine denk geldim; minimap hemen ortaya çıktı ve metin seçimi gibi eylemlerde de senkron biçimde güncellendiği için hafifçe sihirli hissettirdi
  Sublime Text’teki gibi minimap’i manipüle ederek kaydırma yapamamak biraz üzücü, ama web sitesi yazarı açısından uygulaması daha zor olur gibi. Yine de web’de böyle bir şey yapılabilmesi çok havalı; bu karmaşık CSS özelliğini Chrome veya Safari’de desteklemek için ne kadar çalışma gerekeceğini merak ediyorum

  • Tuhaf biçimde özgün yazıda iyi görünüyor ama bu yazıda görünmüyor. Belki bir eklenti yüzündendir?

• GPU ile Chrome’un video çözme sistemi arasında garip bir uyumsuzluk olduğu için son bir yıldır Firefox kullanıyorum
  Kare düşmeleri oluyordu ve YouTube kalitesi düşüyordu. Firefox’ta gerçekten iyi bir web çevirmeni olmaması dışında büyük bir sorun hissetmedim. -moz-element iyi görünüyor ve diğer tarayıcılara da gelmesini isterim

  • Opera fiilen bittikten sonra Firefox kullanmayı sürdürdüm, ama son 3–6 ayda Vivaldi’yi gerçekten yoğun biçimde denemeye çalıştım
    Ana neden, yalnızca klasöre bakıp profili bulabilen taşınabilir sürümü varsayılan olarak sunmasıydı; bu da senkronizasyon için çok iyi. Ama çok yavaş. CPU’yu hunharca tüketen mail ve feed özelliklerini kapatsam da hızlandıramadım; Firefox’a dönüp düzenleyince o kadar çevik geldi ki normal, dev, media şeklinde 3 profil ve yer imleriyle geri kalanını halletmenin daha iyi olacağını düşündüm
    Vivaldi’nin UI seçenekleri ve yapılandırılabilirliği harika; ama Tree Style Tabs, birkaç eklenti ve UI CSS hack’leri de eklenince Firefox’u tekrar ana tarayıcım yaptım ve sanki hiçbir şey olmamış gibi davranıyorum
    Yalnız Firefox’un derlenmiş WebGL shader’larını önbelleğe almasını isterdim. O konuda Chrome açık ara üstün. Belki ayarlarla düzenlenebiliyordur ama kontrol etmedim; varsayılan hâlde shader’ı çok olan sayfaları yeniden yüklerken Chrome mobilde bile neredeyse anında bitirirken Firefox, shader’a bağlı olarak uzun sürebiliyor

• Artık “en iyi Chrome/Edge’de çalışır” yerine en iyi Firefox’ta çalışır görmeye başlarsak bence fena olmaz