Teknik peretasan HTML yang membentuk internet

 (tedium.co)
2 poin oleh GN⁺ 2023-12-03 | 1 komentar | Bagikan ke WhatsApp
  • Para pengembang web awal menghadapi implementasi standar dan bug yang berbeda di tiap browser, sehingga sulit menjamin tata letak dan perilaku yang diinginkan secara konsisten hanya dengan HTML/CSS yang valid
  • Lingkungan seperti Netscape 4, Internet Explorer 5/6/7, Safari/WebKit, dan Outlook melahirkan kode akal-akalan khusus per browser untuk CSS, transparansi PNG, komentar, selector, dan pratinjau email
  • Tata letak tabel HTML, sIFR, Chrome Frame, dan desain responsif adalah contoh upaya melampaui batasan desain dan masalah browser lama melalui kombinasi yang berbeda dari tujuan awal teknologinya
  • Peretasan semacam ini punya keterbatasan seperti menurunkan aksesibilitas, menghasilkan kode nonstandar, dan bergantung pada Flash atau plugin, tetapi saat itu merupakan cara yang realistis untuk menjaga kompatibilitas dan tampilan visual
  • Cita-cita standar web dan cara pemakaian nyata terus berbenturan, dan akal-akalan berulang oleh pengembang serta desainer meninggalkan jejak panjang pada desain web, HTML email, dan cara menangani perangkat mobile

Peretasan CSS untuk menghindari bug browser

  • Peretasan @import di Netscape Navigator 4.0 bekerja dengan sengaja memuat CSS yang tidak didukung Netscape lewat @import, sehingga browser tersebut tidak menerapkan gaya tingkat lanjut
    • CSS dasar dimuat dengan <link>, sedangkan CSS yang lebih maju dipisahkan dan dimuat lewat @import
    • CSS Cookbook merangkum bahwa cara ini menghasilkan efek memuat berkas CSS yang tidak berjalan di Netscape
    • Netscape mendorong JSSS, dan setelah W3C memilih CSS, mereka buru-buru mengimplementasikan CSS di Netscape 4 pada musim panas 1997
    • Di Netscape 4, mematikan JavaScript juga menonaktifkan CSS sebagai efek samping
  • Peretasan CSS untuk Internet Explorer 6 menambahkan garis bawah di depan properti seperti _width, sehingga hanya IE6 yang menafsirkan deklarasi tersebut
    • Model kotak W3C menganggap width tidak termasuk border dan padding, tetapi Internet Explorer memperlakukan padding dan border secara berbeda sehingga menimbulkan perbedaan tata letak antar-browser
    • Contohnya berupa deklarasi yang tidak valid dalam CSS standar seperti width: 300px; _width: 320px; padding: 10px;, dipakai sebagai nilai koreksi khusus IE6
    • Ada juga peretasan khusus IE dengan menambahkan satu tanda seru lagi setelah !important agar perilakunya berbeda hanya pada IE7 ke bawah

Memelintir struktur semantik demi tata letak

  • Tata letak tabel HTML adalah peretasan representatif yang menggunakan <table>, yang awalnya dimaksudkan untuk data berbentuk tabel, sebagai alat penataan halaman visual
    • David Siegel mendekati web dengan sudut pandang desainer tradisional, dan mencoba membuat situs yang lebih menarik dengan melawan kebiasaan bahwa browserlah yang menentukan hasil visual HTML
    • Dalam Creating Killer Web Sites, ia membahas cara melewati markup struktural, membuat susunan dua dimensi dengan gambar, lalu memasukkan teks ke dalam kolom saat tabel mulai tersedia
    • Jay Hoffman dari The History of the Web merangkum bahwa para puris HTML/XML menganggap pencampuran desain dan struktur kode sebagai tabu besar
    • Tata letak tabel merusak aksesibilitas dan butuh waktu lama untuk dipulihkan, tetapi juga menunjukkan nilai bahwa pengembang bisa menyusun portal web secara visual
  • Desain responsif, seperti tata letak tabel, menggabungkan teknologi yang ada dengan cara baru, tetapi melakukannya di dalam batas standar web untuk mengubah tata letak sesuai ukuran layar
    • Dalam desain web tahun 2000-an, implementasi “Holy Grail layout” dengan tiga kolom yang memanjang hingga bagian bawah halaman dalam CSS menjadi bahan perdebatan besar
    • Ada berbagai akal-akalan seperti membuat kolom palsu dengan gambar latar, dan kemudian CSS akhirnya mendukung tata letak berbasis grid
    • Ketika smartphone meluas, makna tata letak tiga kolom yang lama melemah, dan muncul situasi di mana perusahaan harus mengeluarkan biaya untuk situs mobile terpisah
    • Ethan Marcotte, dalam artikel responsive web design di A List Apart, mengusulkan penggunaan media query untuk menyesuaikan susunan situs dengan format layar
    • Desain responsif saat itu tampak seperti peretasan yang memanfaatkan media query yang masih asing, tetapi akhirnya mengubah desain web untuk jangka panjang

Akal-akalan gambar dan komentar di era Internet Explorer

  • AlphaImageLoader mengakali masalah Internet Explorer 5 dan 6 yang tidak mendukung transparansi PNG dengan benar melalui filter khusus Microsoft
    • Internet Explorer mendukung PNG sejak versi 4, tetapi gagal merendernya dengan benar dalam berbagai kasus, terutama masalah besar tidak mendukung PNG transparan di IE5/IE6
    • Jeff Starr dari Perishable Press, dalam PNG fix for Internet Explorer, membahas bahwa solusi saat itu menuntut filter transparansi AlphaImageLoader milik Microsoft
    • Contohnya adalah menerapkan filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...) untuk IE, lalu memakai selector [class] untuk memberi gambar latar biasa pada browser non-IE
    • Celah kecil dalam fitur seperti ini membuat pengembang pada akhir 2000-an dan awal 2010-an terus harus mempertimbangkan peretasan per browser
  • Komentar bersyarat (Conditional Comments) adalah ekstensi komentar HTML buatan Microsoft yang memungkinkan IE memutuskan apakah HTML tertentu akan dirender berdasarkan versinya
    • Karena Internet Explorer membutuhkan terlalu banyak peretasan untuk implementasi situs web, Microsoft memperkenalkan peretasan lain untuk mengelola peretasan-peretasan tersebut
    • Komentar HTML, yang awalnya bukan untuk dieksekusi, diubah menjadi struktur yang bekerja menurut kondisi versi IE
    • Fitur ini pertama kali diperkenalkan di Internet Explorer 5, dan dalam desain email kompleks di Microsoft Outlook untuk Windows masih kadang diperlukan
    • Jens Oliver Meiert, dalam tulisan tahun 2007, mengkritik komentar bersyarat karena membuat HTML setiap dokumen atau template harus disesuaikan ulang untuk tiap versi IE, sehingga merusak pemisahan struktur dan presentasi
    • Komentar bersyarat dihapus setelah IE9, dan conditional compilation di JavaScript dapat dipakai sebagai alternatif

Kombinasi nonstandar untuk font, email, dan browser lama

  • sIFR (Scalable Inman Flash Replacement) adalah peretasan berbasis JavaScript yang mengganti teks menjadi embed Flash untuk menampilkan font yang diinginkan tanpa terikat pada font aman web
    • Core Fonts for the Web dari Microsoft pada praktiknya mendorong penggunaan font aman web yang terbatas, lalu kemudian dihentikan
    • Teknik penggantian font awal berangkat dari penggunaan gambar, tetapi punya keterbatasan aksesibilitas dan ekspresi
    • Shaun Inman mencetuskan ide mengganti font yang diinginkan dengan berkas Adobe Flash kecil, dan Mike Davidson melalui sIFR membuat font tersebut dapat diperluas sesuai kebutuhan
    • Dalam tulisan peluncuran sIFR tahun 2004, Davidson menilai masalah pengiriman typeface kustom yang tidak terpasang di komputer pengguna masih belum terselesaikan
    • sIFR merupakan tahap peralihan menuju solusi web font yang sesungguhnya, dan tidak bertahan lama karena Flash gagal menyeberang ke era mobile
  • Peretasan teks preheader memasukkan karakter tersembunyi dan karakter spasi untuk mencegah klien email menyambungkan teks isi berikutnya yang tidak diinginkan ke baris pratinjau
    • Preheader adalah teks pendek yang terlihat setelah subjek di kotak masuk email, dan berfungsi seperti subjudul email
    • Karena klien email kadang menarik tag HTML atau isi tubuh yang tidak relevan ke pratinjau, pengirim memaksa penyisipan jarak antara preheader yang diinginkan dan teks berikutnya
    • Contoh yang direkomendasikan Litmus berupa area dengan display: none, max-height: 0px, dan overflow: hidden, berisi pengulangan karakter seperti ͏, ‌,  ,  , dan ­
  • Google Chrome Frame adalah plugin browser yang memungkinkan Internet Explorer memakai mesin rendering Chrome, sehingga lingkungan yang masih bergantung pada IE6 dapat menggunakan fitur web modern
    • Sejumlah perusahaan sulit beralih ke browser modern karena departemen TI yang kuat dan ketergantungan teknologi berbasis IE6
    • Google membuat Chrome Frame pada 2009 untuk menyediakan mesin modern bagi Internet Explorer lama, agar pengembang tidak perlu membuat banyak versi atau menyerah pada fitur baru
    • Menurut tulisan pensiun Chrome Frame, saat itu banyak pengguna masih memakai browser yang tertinggal dari fitur terbaru
    • Alat seperti Google Wave dan YouTube membutuhkan fitur HTML5, dan dukungan IE6 menjadi batasan bagi Google
    • Chrome Frame bertahan di pasar selama 5 tahun, dan setelah masa itu Chrome menjadi browser yang sangat dominan

Penanganan khusus Safari/WebKit dan evolusi nyata web

  • Peretasan selector khusus WebKit menggunakan dukungan CSS khusus browser tertentu seperti @supports (-webkit-appearance:none) {} untuk menerapkan CSS hanya pada browser keluarga WebKit
    • Safari saat pertama kali muncul memakai mesin yang berakar pada komunitas open source, dan pada awalnya kuat dalam dukungan standar HTML/CSS
    • Apple Mail menggunakan WebKit, sehingga dalam pengodean email umumnya dianggap sebagai lingkungan yang bekerja dengan baik
    • Seiring waktu, jadwal rilis Safari terikat pada jadwal Mac dan iOS, sehingga tertinggal dibanding industri
    • Para pengembang mengkritik Apple karena dianggap mengabaikan bug atau menunda fitur yang tidak menguntungkan secara kompetitif
    • Seorang pengguna Reddit dalam keluhan tentang pengembangan Safari menulis bahwa sekalipun API diimplementasikan, bug-nya banyak atau kemudian rusak lagi
    • Peretasan ini juga bekerja pada versi awal Chrome yang masih berbasis WebKit
  • Niat awal HTML dan cara web benar-benar digunakan sangat berbeda, dan desainer serta pakar UI membangun ekspresi visual di atas internet meski dengan kode yang aneh
    • Seperti dijelaskan David Siegel, badan standardisasi ingin HTML bekerja seperti RSS, lebih menekankan pengguna dan struktur daripada desain akhir
    • Protokol seperti Gopher yang muncul pada masa yang sama juga bekerja dengan cara yang tidak banyak dipengaruhi desain
    • Namun, karena kreativitas pengguna internet dan ketergantungan internet komersial pada bahasa visual, filosofi itu tidak pernah menjadi arus utama
    • Dalam HTML email, bahkan gradien transparan sederhana pun sulit ditangani dengan HTML/CSS standar, dan akal-akalan seperti glitch tabel HTML dalam komentar StackOverflow lama kadang masih bisa menjadi solusi

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-03
Komentar Hacker News

  • Menggunakan tabel untuk layout cukup bisa dimengerti
    Namun selama beberapa tahun setelah tabel tersingkir dari tren, membuat layout dengan float adalah segalanya. Masa itu benar-benar liar, jadi cukup mengejutkan ini tidak masuk daftar
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    “Properti float, yang awalnya dimaksudkan untuk mengapungkan gambar di dalam blok teks, menjadi salah satu alat paling umum untuk membuat layout multi-kolom di halaman web. Dengan hadirnya flexbox dan grid, kini ia kembali ke tujuan awalnya”

    • Saat float baru muncul, saya mengembangkan seluruh situs perbaikan komputer di FF
      Menjelang selesai, saya membukanya di IE dan seluruh desainnya hancur; karena pelanggan target hampir pasti akan memakai IE, akhirnya saya harus menulis ulang dengan basis tabel. Hari yang menyedihkan
    • Sejak awal, menyebut layout berbasis tabel sebagai hack saja sudah terasa tidak menyenangkan
      Setelah tabel tersingkir, saya melihat banyak tim frontend membuang waktu berbulan-bulan secara kumulatif bermain-main dengan float demi menjaga keyakinan para “puris”, sambil membuat halaman web yang jauh lebih sulit dipahami, dan dari situ saya mendapat pelajaran penting
      Joel Spolsky dalam sebuah tulisan bagus menyebut developer seperti itu Architecture Astronauts: tipe yang lupa bahwa pekerjaan mereka adalah benar-benar membuat software yang berjalan baik dengan usaha minimal. Saya rasa kekonyolan spesifikasi EJB pertama atau AbstractFactoryBuilderConstructor ala Java yang sering jadi bahan ejekan juga lahir dari kelompok seperti itu
      Seiring waktu saya jadi pandai mengenali kecenderungan seperti ini dan menjauhinya
    • “Selama bertahun-tahun membuat layout dengan float” disebut faux columns, dan bahkan layout dasar 3 kolom pun begitu sulit sampai disebut “cawan suci” layout
      https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
    • Seperti nama yang masih dipakai W3Schools, ini adalah hack clearfix yang baru dan modern
      .clearfix::after { content: ""; clear: both; display: table; }
      [1] https://www.w3schools.com/howto/howto_css_clearfix.asp
    • Era di antara tabel dan flexbox/grid memang berat
      float itu rumit dan sulit disetel dengan benar, dan banyak orang kembali saja ke tabel; jujur saja, saya tidak bisa menyalahkan mereka

  • Apakah spacer.gif tidak layak dihormati?
    Tentu saja masih ada di HN, dan disertakan di setiap permintaan halaman
    https://news.ycombinator.com/s.gif

    • Cerita layout berbasis tabel tidak lengkap tanpa gambar spacer

  • Ada beberapa hal yang saya sukai
    Faux columns membuat sidebar tampak memanjang secara visual sehingga terlihat sepanjang konten utama: https://alistapart.com/article/fauxcolumns/
    Lebih jauh lagi, dengan 9-patch dan 9 div atau tabel 3x3, kita bisa meniru border sendiri dengan mengulang background di tiap sumbu. Hadirnya border-image di CSS3 sedikit membantu, tetapi gaya border seperti ini sekarang tidak terlalu populer
    Border membulat juga bisa dibuat dengan 9-patch, dan banyak orang memakai generator untuk membuat beberapa elemen dan menghasilkan HTML yang menyimulasikan border membulat. Artikel ini menjelaskannya: http://benogle.com/2009/04/29/css-round-corners.html Biasanya markup tambahan lebih besar dalam byte dibanding gambar, tetapi mengurangi request bolak-balik dan dianggap cukup mudah dilakukan

    • Tim kami terlalu sering memakai metode 3x3, sampai kami membuat komponen khusus untuk itu
      Ini lebih dekat ke sisi ActionScript, tetapi ide styling-nya sama, jadi saya juga menulis artikel: https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...
      Hal lain yang saya sukai adalah penggunaan cicada principle untuk pola style background yang tidak berulang
    • Saya membuka A List Apart dan cukup kaget melihat header-nya rusak di mobile
      Meski begitu, setelah sekian lama berlalu, tampilannya tetap rapi
    • Teknik sliding doors untuk sudut membulat juga layak disebut: https://alistapart.com/article/slidingdoors/
    • Faux columns masih hidup di situs web utama kami. Selalu tidak ada waktu untuk menggantinya dengan sesuatu yang lebih modern ;)

  • Saya suka bahwa HN sampai sekarang masih memakai salah satunya: menyusun layout dengan tabel HTML
    Kalau dilihat lebih serius, daftar ini menunjukkan dengan baik bahwa ketika mengembangkan tanpa standar, informasi kontrol akan dienkode ke berbagai jalur samping yang “masih cukup bisa ditoleransi”
    Kekacauan dan potensi benturan seperti ini membuat kita melihat ulang cibiran yang kadang diterima proses W3C saat ini. Proses ini menggabungkan evolusi teknologi web yang digerakkan standar dengan inovasi yang digerakkan browser, dan membiarkan keduanya bergantian memimpin atau berjalan berdampingan
    Meski sering diejek, ini juga bisa ditafsirkan sebagai cara yang lebih berkelanjutan dan stabil dibanding cara sebelumnya
    Saya penasaran berapa banyak orang yang mengecam norma W3C-vendor baru ini benar-benar ingin kembali ke masa penuh semangat yang diingatkan oleh “10 hack aneh” ini

    • Itu lebih dekat ke ketiadaan fitur yang diperlukan daripada ketiadaan standar
      Kalau hal yang ingin dilakukan tidak tercakup sebagai fitur, orang akan melakukannya secara kreatif dengan cara apa pun. Jika standar belum cukup matang untuk menangkap semua kebutuhan potensial, standar justru menciptakan kekakuan dan melahirkan situasi seperti ini. Terutama ketika terikat pada standar yang mungkin cocok atau tidak dengan kebutuhan, seperti di web
      Di bidang lain biasanya ada cukup banyak pilihan, dan salah satunya cukup fleksibel untuk melakukan hal yang dibutuhkan sehingga tinggal memilihnya
      Kalau lama bekerja di dunia riset, mengejutkan betapa sering hal yang ingin dilakukan menuntut pendekatan teknis yang hacky. Sebab banyak standar dan kumpulan fitur terbentuk di sekitar interaksi bisnis/konsumen yang banyak uangnya serta sistem di sekitarnya
    • Sayangnya, sekarang W3C dan TC39 sepenuhnya didominasi Google, dan mereka mendorong banyak standar sambil hanya nyaris secara formal memperhatikan prosedur
      Banyak pemain yang bergantung pada fitur browser, misalnya vendor TV yang menjalankan aplikasi di dalam versi WebKit atau Chromium, benar-benar diam di komite standar. Jadi pada praktiknya bahkan tidak sampai menjadi tarik-menarik tiga pihak antara Google, Apple, dan Mozilla
    • Lucu bahwa tabel katanya “menghilang”, lalu secara luas digantikan oleh Bootstrap
      Pada akhirnya kita mendapat tabel yang dimasukkan ke dalam div. Hanya saja terdiri dari 12 kolom
    • WHATWG tidak pernah mengembangkan web untuk siapa pun selain kepentingan komersial
      Karena saya belajar dengan HTML 3.2, saya tahu betul omong kosong Bizantium macam apa yang diperlukan gara-gara IE dan Netscape. Tapi itu adalah pilihan MS dan Netscape, dan sekalipun kehadiran W3C lebih besar, tidak ada jaminan atau indikasi bahwa MS dan Netscape akan mengikuti standar baru
      Tetap saja, masa itu lebih baik daripada keadaan sampah seperti sekarang, ketika satu perusahaan besar menginginkannya maka seluruh web lain harus menanggungnya
      Benar-benar jauh lebih baik, bagus sekali /s

  • Hack “favorit” saya tidak ada. Caranya menaruh judul untuk aksesibilitas di posisi -10000 supaya tidak dirender di layar, tetapi tetap dibaca screen reader

    • Variasi yang mirip dengan cara ini masih cukup umum. Karena dalam semua kasus, masih belum ada opsi yang benar-benar bagus untuk menangani teks yang tidak terlihat tetapi dapat diakses screen reader
      Hal seperti aria-label sudah menggantikan sebagian penggunaan pola ini, tetapi belum semuanya
    • Apakah itu masih berfungsi? Atau harus memakai ARIA?

  • Tidak ada cerita tentang html5 shiv yang dipasang sebelum semua CSS untuk menghilangkan quirks browser
    https://paulirish.com/2011/the-history-of-the-html5-shiv/

    • reset, normalize, dan semacamnya juga tidak ada

  • Saya ingat masa lalu indah GIF transparan 1×1 piksel yang dipakai agar sel tabel tetap patuh

    • “Masa lalu indah”? Halaman yang sedang kamu lihat sekarang juga memakainya ;)
      https://news.ycombinator.com/item?id=38485665
    • Dulu gambar besar sering dipotong menjadi pola kisi lalu ditahan dengan tabel
      Saya bahkan tidak ingat kenapa begitu. Apakah supaya loading lebih cepat?

  • Satu lagi dari masa awal: ada penggunaan luas entitas karakter spasi tanpa pemisah baris  
    Itu dipakai untuk mendorong teks ke kanan atau kiri di dalam kontainer, dan seingat saya juga dipakai seperti GIF spacer 1x1 agar sel tabel tetap patuh. Di beberapa halaman ada ratusan  , dan itu hampir menjadi sarana serbaguna untuk menambahkan margin atau padding

  • Kadang saya tidak tahu apakah developer web modern jadi manja karena ada CSS Grid dan IE sudah mati, atau justru kami yang dulu manja karena tidak perlu menghadapi kompleksitas framework modern dan proses build saat ini

    • Mungkin keduanya
      Namun sepertinya sekarang memang lebih mudah. Secara teknis kita tidak wajib memakai framework modern dan proses build modern, karena dengan CSS dan JavaScript modern saja kita bisa dengan mudah membuat situs dan aplikasi yang dulu rumit
    • Pengembangan web punya nuansa yang unik dibanding bidang lain tempat saya pernah bekerja
      Industri ini punya kebiasaan terus menciptakan ulang roda dengan cara yang lebih rumit
      Dugaan yang paling masuk akal adalah ini efek samping karena web adalah bidang yang lebih sering dipilih developer baru atau developer yang kurang berpengalaman

  • Apakah desain responsif benar-benar hack? Media query itu bagus
    Menaruh logika kondisional di CSS alih-alih JavaScript adalah kemenangan besar. Terutama ketika ingin server-side rendering

    • Menggunakan media query untuk mendukung berbagai media yang berbeda tampak seperti use case yang benar-benar tepat
    • Kalau yang ditanyakan bukan hal yang sebenarnya ingin diketahui, melainkan sesuatu yang kebetulan berkorelasi dengan kebutuhan, itu menjadi hack
    • Bukan hack
      Kita bisa menanyakan berbagai karakteristik user agent dan menyajikan CSS berbeda berdasarkan hasilnya. Menyebut ini hack adalah ketidaktahuan, dan ini bagian yang diperlukan untuk membuat desain responsif