Minimap khusus Firefox (2021)

• Minimap blog yang hanya terlihat oleh pengguna Firefox desktop adalah contoh eksperimen fitur CSS khusus browser meski pangsa pasar Firefox rendah, hanya 4%
• Intinya adalah fungsi CSS element() yang hanya didukung Firefox, dan dalam implementasi nyata digunakan -moz-element() yang memiliki vendor prefix
• Fungsi ini dapat menampilkan elemen HTML apa pun seperti gambar sambil tetap mencerminkan secara real-time pemilihan teks, scroll, hingga perubahan pada gambar lazy-loading
• Latar belakang minimap digambar dari node DOM #main sebagai background dengan satu baris CSS, dan JavaScript juga digunakan untuk memindahkan kotak viewport saat ini
• Dengan memanfaatkan fitur khusus Firefox, sebagian halaman dapat digunakan ulang sebagai latar belakang minimap tanpa rendering canvas terpisah

---

Minimap berbasis element() khusus Firefox

• Minimap pada artikel blog adalah fitur yang terlihat oleh pengguna Firefox desktop, dan pangsa pasar Firefox saat ini disebut 4%
• Firefox adalah satu-satunya browser yang mendukung fungsi CSS element(), dan penggunaan nyatanya memerlukan vendor prefix
• Fungsi element() dapat menampilkan elemen HTML apa pun di dalam halaman seperti gambar
  • Objek yang ditampilkan bukan screenshot statis, melainkan bekerja seperti gambar live
  • Perubahan seperti pemilihan teks atau munculnya gambar lazy-loading saat scroll juga ikut tercermin

Cara implementasi

• CSS untuk mendefinisikan elemen HTML lain sebagai gambar latar berbentuk seperti berikut

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

• -moz-element(#main) berperan menggambar node DOM #main sebagai gambar latar minimap
• JavaScript juga digunakan untuk memindahkan kotak viewport saat ini di dalam minimap, tetapi inti yang menggambar node DOM lain adalah satu baris CSS ini
• Di Firefox, -moz-element dapat digunakan untuk menampilkan sebagian halaman seperti minimap

[GN⁺]

Komentar Hacker News

• 10 tahun lalu saya membuat library JS semacam mainan untuk melipat elemen DOM seperti kertas, https://oridomi.com, dan berharap suatu saat bisa memakai element() alih-alih menyalin node berulang-ulang dengan cara yang membosankan setiap kali melipatnya
  Setelah 10 tahun pun fitur CSS yang sangat niche ini belum diadopsi browser lain, dan spesifikasi CSS Custom Filters dari periode yang sama juga saya kira akan segera dipakai, tetapi sampai sekarang masih belum mendapat traction

  • Setahu saya, para pembuat browser melihat spesifikasi CSS Custom Filters dan memutuskan bahwa terlalu sulit untuk diimplementasikan dengan aman
    Di satu sisi, saya paham kalau sebuah fitur dibatalkan karena tidak bisa dibuat aman, tetapi di sisi lain saya benar-benar menginginkan CSS Custom Filters dan masih sering memikirkan hal-hal yang bisa dilakukan dengannya
    https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

• Kalau saya memakai editor yang punya minimap, hal pertama yang saya lakukan adalah mematikannya
  Dalam coding, itu nyaris fitur paling tidak berguna, dan di situs web pun tampaknya sama tidak bergunanya. Isinya terlalu kecil untuk dipahami ke mana harus pergi, dan baik untuk halaman pendek maupun panjang, manfaatnya tidak sebanding dengan ruang layar yang terbuang atau distraksi yang ditimbulkan; indeks yang rapi dengan judul yang deskriptif atau fitur pencarian jauh lebih baik untuk navigasi halaman
  Tempat minimap bisa terasa keren adalah pada objek yang secara inheren visual, seperti gambar besar atau peta, karena saat diperbesar akan berguna untuk melihat bagian mana dari keseluruhan yang sedang dilihat. Ini memang fitur masa depan yang keren, tetapi implementasi ini tidak terlihat terlalu bagus

  • Saya membiarkannya menyala. Saat menggulir dengan perangkat penunjuk seperti mouse atau trackpad, itu berfungsi seperti scrollbar yang lebih besar
    Sistem operasi modern cenderung menyembunyikan scrollbar atau membuatnya sekecil mungkin, dan minimap menyelesaikan masalah itu sambil juga sedikit menunjukkan bentuk visual isi file. Teksnya memang tidak bisa dibaca, tetapi kalau itu file yang sudah lama dikerjakan, saya bisa tahu persis sedang melihat bagian apa
  • Saya memakainya justru kebalikannya. Karena sering menangani file panjang, saya banyak memakai minimap sebagai scrollbar yang jauh lebih baik
    Walaupun jarang saya tatap langsung, ia tetap ada dalam bidang pandang sehingga sering saya pindai secara bawah sadar. Fitur seperti ini jelas bukan untuk semua orang, tetapi tidak suka padanya bukan berarti ia tidak berguna
  • Tujuannya bukan untuk membaca huruf kecil, melainkan untuk melihat bentuk kode
    Misalnya, VSCode menandai error dengan warna merah yang mencolok di minimap, sehingga lebih mudah berpindah ke lokasinya
  • Minimap juga bisa bagus untuk meningkatkan fungsi pratinjau dari scrollbar klasik
    Scrollbar memberi tahu panjang halaman sehingga membantu memutuskan apakah perlu terus membaca, tetapi minimap membantu membedakan antara “tulisan pendek yang diikuti beberapa halaman komentar yang bisa diabaikan” dan “tulisan yang dari awal memang terlalu panjang untuk dibaca”
  • Saya cukup suka minimap. Ini seharusnya tidak wajib, dan saya sangat paham alasan orang ingin mematikannya. Ia memakan banyak ruang, dan bagi orang yang sering melihat file dalam split view, itu bisa cukup mengganggu
    Tetapi saya cenderung memikirkan kode secara visual dan spasial, dan juga cenderung tidak memecah file sampai memang perlu, jadi melihat “bentuk” file membantu untuk berpindah dengan cepat. Terutama ketika file terbagi menjadi beberapa bagian yang jelas
    Saya juga setuju soal gambar besar atau peta. Kebanyakan editor gambar memang punya fitur viewport seperti itu, dan cukup berguna saat melakukan pekerjaan detail

• Saya bisa melihat kegunaannya, tetapi ini cukup wild. Saat memilih teks, itu diperbarui secara real-time, dan terlihat seperti viewport terpisah menuju konten yang hampir sama
  Saya sedang memikirkan use case dan implikasinya; ini juga bisa dibuat bekerja pada elemen yang disembunyikan lewat trik offscreen atau overflow:hidden. Namun setahu saya, sampai sekarang belum ada cara mengubah elemen itu menjadi gambar tanpa library, dan mungkin alasannya adalah privasi
  Halaman MDN-nya cukup pendek, jadi saya punya banyak pertanyaan. Filter dan distorsi CSS mungkin bisa langsung diterapkan ke elemen, tetapi apakah fakta bahwa ini diperlakukan seperti background membuka kemungkinan baru? Meskipun sudah lama ada, ini pertama kalinya saya mendengarnya, dan saya tidak tahu fitur seperti ini pernah masuk kandidat CSS. Kalau targetnya hanya Firefox dan Chrome tidak dipedulikan, saya penasaran sejauh apa kegunaannya di luar sekadar menduplikasi viewport

  • Sepertinya ada cukup banyak penggunaan keren, seperti cermin, kaca pembesar, atau fitur untuk menjaga sebagian halaman yang berada di luar layar tetap terlihat
    Misalnya bisa dipakai untuk keperluan editing, dan rasanya masih banyak use case yang terlewat. Pada dasarnya ini bukan fitur yang benar-benar wajib, tetapi masing-masing tetap punya keunikannya sendiri

• Saya setiap hari bertemu situs yang hanya berjalan di Chrome. Sudah waktunya membalas :)

  • Saya hanya memakai Firefox dan menjelajah web dengan cara yang cukup biasa, dan hal seperti itu hampir tidak pernah terjadi. Jauh lebih jarang daripada sebulan sekali, mungkin sekitar sekali tiap 3 bulan
  • Apakah ini fenomena regional? Bagi saya sangat jarang terjadi. Meski begitu, beberapa situs Google yang saya pakai secara rutin memang bekerja lebih buruk di Firefox daripada di Chrome
  • Di Firefox, baik di Mac maupun Linux, saya pernah mengalami masalah di mana beberapa checkbox sama sekali tidak terlihat
    Bulan lalu saat check-in penerbangan internasional American Airlines, checkbox yang diperlukan tidak muncul di Firefox sehingga saya tidak bisa menyelesaikan proses check-in, dan baru bisa lanjut setelah menyadari bahwa checkbox itu terlihat di Chrome
  • Kalau saya menemui situs seperti itu, saya kesal. Terutama karena pada tahun 2023 tidak ada alasan yang bisa membenarkannya
    Saya pernah mengalami halaman-halaman yang lebih obscure di situs Vanguard rusak dengan error di konsol, lalu saat pindah ke Chrome semuanya berjalan
  • Betul. Itu mengingatkan saya pada rumor atau fakta lama tentang sabotase open source untuk menghambat Firefox
    Saya sering melihat halaman yang dulu berjalan baik di Firefox sekarang tidak lagi, dan kadang saya harus membuka browser lain. Saya sangat berharap itu bukan benar-benar yang terjadi. Secara default saya memakai Firefox

• Mengejutkan bahwa element() sudah didukung penuh di Firefox sejak 2011 bersama -moz-, sementara browser lain tampaknya bahkan belum punya dukungan parsial https://caniuse.com/css-element-function
  Kalau saja ada dukungan lintas-browser, bukan cuma minimap, saya bisa membayangkan beberapa use case kuat lainnya. Kalau ada yang punya koneksi ke tim Chrome atau WebKit, saya penasaran alasannya. Apakah karena kurang minat, sulit diimplementasikan dengan performa yang baik, atau ada masalah keamanan yang rumit

  • Di browser berbasis Chromium ada -webkit-box-reflect yang menangani sebagian dari apa yang dilakukan element() https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
    Secara spesifik, itu menangani refleksi elemen. Menurut saya, use case terbesar untuk -moz-element juga memang refleksi itu sendiri

• Minimap juga lucu, tapi screensaver yang aktif kalau tab dibiarkan idle selama 3 menit justru lebih menarik
  Senang rasanya web masih punya sisi iseng seperti ini

• Ini terlihat seperti fitur yang bisa disalahgunakan parah oleh situs yang sengaja merusak fungsi browser bawaan, seperti simpan gambar lewat klik kanan atau pemilihan teks
  Kalau seluruh halaman dirender sebagai gambar latar belakang, kontennya jadi tidak bisa lagi diperiksa, disimpan, atau diterjemahkan. Itu baru contoh pertama yang terpikir; rasanya ada banyak sekali cara jahat untuk menyiksa pembaca dengan fungsi ini

  • Saya setuju ini terlihat bisa disalahgunakan, tapi contoh yang diberikan kurang tepat. Fitur-fitur yang disebut tadi sudah bisa diblokir hanya dengan sedikit CSS atau JS, jadi tidak perlu dibuat seribet itu dengan canvas element
    Alasan kebanyakan situs tidak melakukan hal seperti itu bukan karena mereka tidak mampu, melainkan karena memang tidak berniat. Situs yang buruk juga mendapat hukuman ekonomi nyata karena orang-orang pindah ke pesaing
    Namun, di area yang bukan pasar bebas—seperti portal intranet perusahaan atau situs pemerintah daerah yang jelek—prinsip ini tidak bekerja dengan baik, jadi hal-hal yang memusuhi pengguna lebih sering muncul. Secara umum, menganggap kualitas situs akan naik kalau operator situs sengaja dibatasi itu keliru; kenyataannya justru sebaliknya

• Mengesankan seberapa baik minimap ini bekerja pada tulisan panjang. Saya asal klik-klik lalu sampai di https://www.stefanjudis.com/notes/should-responsive-images-w... dan minimap langsung muncul, bahkan ikut diperbarui sinkron pada hal-hal seperti pemilihan teks, jadi terasa agak seperti sihir
  Sedikit disayangkan minimapnya tidak bisa dipakai untuk scroll dengan cara dimanipulasi seperti di Sublime Text, tapi dari sudut pandang pembuat situs itu tampaknya lebih sulit diimplementasikan. Tetap saja, sangat keren bahwa hal seperti ini bisa dilakukan di web, dan saya penasaran berapa banyak pekerjaan yang dibutuhkan agar fitur CSS kompleks ini didukung di Chrome atau Safari

  • Aneh, di artikel aslinya terlihat jelas tapi di postingan ini tidak muncul. Mungkin karena ekstensi?

• Ada ketidakcocokan aneh antara GPU dan decoding video di Chrome, jadi selama setahun terakhir saya memakai Firefox
  Terjadi frame drop dan kualitas YouTube menurun. Selain tidak adanya penerjemah web yang benar-benar bagus di Firefox, saya tidak merasa ada masalah besar. -moz-element terlihat bagus dan akan menyenangkan kalau hadir juga di browser lain

  • Saya terus memakai Firefox sejak Opera pada dasarnya tamat, tetapi dalam 3–6 bulan terakhir saya benar-benar berusaha keras memakai Vivaldi
    Alasan utamanya karena ada versi portabel bawaan yang menemukan profil hanya dari foldernya, jadi sangat bagus untuk sinkronisasi. Tapi lambat sekali. Bahkan setelah mematikan mail dan feed yang menghabiskan CPU, saya tetap tidak bisa membuatnya terasa cepat, dan setelah kembali ke Firefox serta merapikan semuanya, rasanya begitu lincah sampai saya pikir lebih baik mengelola sisanya dengan 3 profil—normal, dev, media—dan bookmark
    Opsi UI dan tingkat kustomisasi Vivaldi memang luar biasa, tetapi setelah ditambah Tree Style Tabs, beberapa add-on, dan bahkan hack CSS UI, saya akhirnya kembali menjadikan Firefox browser utama dan berpura-pura semua itu tidak pernah terjadi
    Meski begitu, saya berharap Firefox menyimpan cache untuk shader WebGL yang telah dikompilasi. Dalam hal itu Chrome jauh unggul. Mungkin bisa diatur lewat setting, tapi saya belum mengeceknya; dalam kondisi default, saat memuat ulang halaman yang punya banyak shader, Chrome hampir selesai seketika bahkan di ponsel, sementara Firefox bisa butuh waktu lama tergantung shader-nya

• Rasanya tidak masalah kalau sekarang kita mulai melihat "berjalan paling baik di Firefox" alih-alih “berjalan paling baik di Chrome/Edge”