Teknik hacking HTML yang membentuk internet

 (tedium.co)
2 poin oleh GN⁺ 2023-12-03 | 1 komentar | Bagikan ke WhatsApp

Kecerdikan hacking HTML

  • Kebutuhan akan hacking HTML: Karena kegagalan kode HTML atau implementasi browser yang kurang matang, terkadang kita harus menulis kode yang tidak elegan untuk mendapatkan hasil yang diharapkan. Hacking semacam ini kadang kreatif dan layak diingat.
  • Hacking @import di Netscape Navigator 4.0: Memungkinkan pemblokiran style CSS yang tidak didukung Netscape. Netscape mendukung JSSS alih-alih CSS, tetapi ketika W3C memilih CSS, implementasi CSS di Netscape 4 dibuat terburu-buru. Akibatnya, performanya lebih buruk dibanding browser-browser setelahnya.
  • Menggunakan tabel HTML untuk layout: Memungkinkan layout yang lebih eksperimental. Menggunakan tabel HTML sebagai alat layout adalah definisi dari hacking, dan di dunia email hal ini masih digunakan.
  • Menggunakan garis bawah sebelum style CSS: Memungkinkan style tertentu diterapkan hanya ke IE6. Ini memanfaatkan keterbatasan IE dalam mem-parsing karakter khusus.
  • Menggunakan AlphaImageLoader untuk menghadirkan transparansi PNG: Merender transparansi file PNG yang tidak didukung IE6. Gambar diproses melalui filter.
  • Komentar kondisional: Memungkinkan trik tertentu digunakan hanya pada versi IE tertentu. Ini meretas fitur komentar HTML agar dapat menjalankan kode.
  • Scalable Inman Flash Replacement (sIFR): Memungkinkan penggunaan font yang bukan web-safe. Ini menggunakan hacking JavaScript yang mengganti teks dengan embed Flash.
  • Hacking teks preheader: Mencegah teks tambahan di email bocor ke baris deskripsi. Ini menggunakan susunan karakter spasi yang nonstandar atau tidak biasa.
  • Google Chrome Frame: Menggantikan IE6 dengan jendela Chrome. Ini diimplementasikan melalui plugin browser.
  • Hacking selector khusus Webkit: Menerapkan kode CSS hanya ke browser Webkit. Ini mendeteksi apakah browser tertentu mendukung kode CSS tertentu yang spesifik.
  • Desain responsif: Menata informasi secara efektif dalam berbagai pengaturan, khususnya di tablet dan perangkat mobile. Dalam kebanyakan kasus, ini menggunakan media query untuk menata informasi sesuai perangkat.

Opini GN⁺

  • Yang paling penting adalah upaya para pengembang untuk menemukan solusi kreatif di luar standar HTML dan CSS.
  • Tulisan ini menarik dan memikat karena menunjukkan bagaimana para pengembang web menggunakan hacking kreatif untuk mengatasi keterbatasan browser dan meningkatkan pengalaman pengguna.
  • Hacking semacam ini mencerminkan perkembangan standar web dan upaya tanpa henti para pengembang demi desain web yang lebih baik.

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-03
Komentar Hacker News

  • Bisa dipahami kenapa tabel digunakan untuk layout.

    Saat tabel mulai tidak lagi populer, selama beberapa tahun penggunaan float untuk layout menjadi arus utama. Saya heran metode ini tidak masuk daftar. Menurut dokumentasi MDN, properti float awalnya digunakan untuk membuat gambar mengambang di dalam blok teks, tetapi sering dipakai untuk membuat layout halaman web multi-kolom. Kini, dengan hadirnya flexbox dan grid, ia kembali ke tujuan awalnya.

  • Tidak ada penghormatan untuk spacer.gif.

    Masih dipakai di HN, dan disertakan dalam setiap permintaan halaman: s.gif

  • Teknik favorit:

    • 'Faux columns' agar sidebar tampak sepanjang kontennya
    • Meretas border dengan nine-patch dan 9 div atau tabel 3x3, lalu mengulang background pada sumbu tertentu. Di CSS3, border-image hadir untuk membantu ini. Namun, gaya border seperti ini sudah tidak lagi disukai.
    • Nine-patch bisa dipakai untuk membuat border membulat, tetapi banyak orang memakai generator yang menghasilkan HTML untuk mensimulasikan border membulat. Seperti dijelaskan dalam artikel, dulu ada anggapan umum bahwa markup tambahan akan memakan lebih banyak byte daripada gambar, tetapi jumlah round-trip lebih sedikit dan lebih mudah dijalankan.

  • HN masih memakai salah satu teknik ini sampai sekarang:

    • Menggunakan tabel HTML untuk layout
    • Daftar ini menekankan bagaimana pengembangan tanpa standar mengodekan informasi kontrol ke dalam berbagai side channel yang bisa ditoleransi.
    • Potensi kebingungan dan konflik akibat hal ini kadang menyoroti rasa muak terhadap proses W3C. Proses ini menggabungkan evolusi teknologi web berbasis standar dengan inovasi yang dipimpin browser. Kadang saling memimpin, kadang berjalan bersamaan.
    • Meski sering dikritik, proses ini bisa ditafsirkan lebih berkelanjutan dan stabil daripada yang sebelumnya.
    • Saya penasaran berapa banyak orang yang mengkritik norma baru W3C-vendor sambil mengingat 10+ hack aneh ini lalu ingin kembali ke masa itu.

  • Tidak mencantumkan trik untuk aksesibilitas dengan menaruh judul di posisi -10000 agar tidak terlihat di layar.

  • Tidak ada penyebutan tentang memasang HTML5 shiv sebelum CSS untuk menghilangkan keanehan di semua browser.

    Sejarah HTML5 shiv

  • Saya ingat masa-masa indah saat gif transparan 1×1 piksel dipakai untuk mengontrol sel tabel.

  • Tambahan tentang  , yaitu entitas karakter spasi tak terputus, yang dulu banyak dipakai:

    Dipakai untuk menggeser teks ke kanan atau kiri di dalam kontainer. Atau digunakan mirip spacer gif 1x1 agar sel tabel berfungsi dengan benar. Beberapa halaman memakai ratusan  . Umumnya dipakai sebagai cara menambahkan margin atau padding.

  • Kadang saya tidak bisa membedakan apakah developer web modern jadi terlalu dimanjakan oleh CSS Grid dan berakhirnya IE, atau justru dulu kitalah yang terlalu dimanjakan karena belum harus menghadapi framework modern yang rumit dan proses build.

  • Pertanyaan apakah responsive design benar-benar sebuah hack:

    Media query itu luar biasa. Menaruh logika kondisional di CSS alih-alih di JavaScript memberi keuntungan besar saat Anda ingin server-side rendering.