İnterneti Şekillendiren HTML Hack Teknikleri

HTML hack'lerinin yaratıcılığı

• HTML hack'lerine neden ihtiyaç duyulduğu: Bazen HTML kodunun başarısız olması ya da tarayıcı uygulamalarının yetersiz kalması nedeniyle beklenen sonucu elde etmek için zarif olmayan kodlar yazmak gerekebiliyordu. Bu hack'ler kimi zaman yaratıcıydı ve hatırlanmaya değerdi.
• Netscape Navigator 4.0 @import hack'i: Netscape'in desteklemediği CSS stillerini engellemeyi sağlıyordu. Netscape, CSS yerine JSSS'i savunuyordu; ancak W3C CSS'i seçince Netscape 4'ün CSS uygulaması aceleye getirildi ve bu yüzden sonraki tarayıcılara kıyasla zayıf kaldı.
• HTML tablolarını yerleşim için kullanmak: Daha deneysel düzenleri mümkün kılıyordu. HTML tablolarını bir yerleşim aracı olarak kullanmak hack tanımına tam uyuyordu ve e-posta dünyasında hâlâ kullanılıyor.
• CSS stillerinin önüne alt çizgi koymak: Belirli stilleri yalnızca IE6'ya uygulamayı sağlıyordu. Bu, IE'nin özel karakterleri ayrıştırmadaki sınırlamalarından yararlanıyordu.
• PNG saydamlığı için AlphaImageLoader kullanmak: IE6'nın desteklemediği PNG dosyalarındaki saydamlığı render ediyordu. Görsel, bir filtre üzerinden işleniyordu.
• Koşullu yorumlar: Belirli numaraları yalnızca belirli IE sürümlerinde kullanmayı mümkün kılıyordu. HTML yorum özelliği hack'lenerek kod çalıştırabilir hâle getiriliyordu.
• Scalable Inman Flash Replacement (sIFR): Web-safe olmayan yazı tiplerinin kullanılmasını sağlıyordu. Metni Flash gömüsüne dönüştüren bir JavaScript hack'i kullanıyordu.
• Preheader metni hack'i: E-postalarda fazladan metnin açıklama satırına sızmasını engelliyordu. Standart dışı veya alışılmadık boşluk karakteri dizileri kullanıyordu.
• Google Chrome Frame: IE6'yı bir Chrome penceresiyle değiştiriyordu. Bu, bir tarayıcı eklentisi üzerinden uygulanıyordu.
• Yalnızca Webkit'e özel seçici hack'i: CSS kodunu yalnızca Webkit tarayıcılarında uyguluyordu. Belirli tarayıcıya özgü CSS kodunun desteklenip desteklenmediğini algılıyordu.
• Duyarlı tasarım: Özellikle tablet ve mobil gibi farklı ortamlarda bilgiyi etkili biçimde yerleştirmeyi sağlıyordu. Çoğu durumda cihaz türüne göre yerleşim yapmak için media query'ler kullanılıyordu.

GN⁺ görüşü

• En önemli nokta, HTML ve CSS standartlarının dışına çıkarak yaratıcı çözümler bulan geliştiricilerin çabası.
• Bu yazı, web geliştiricilerinin tarayıcı sınırlarını aşmak ve kullanıcı deneyimini iyileştirmek için nasıl yaratıcı hack'ler kullandığını göstermesi bakımından ilgi çekici ve etkileyici.
• Bu hack'ler, web standartlarının gelişimini ve daha iyi web tasarımı için geliştiricilerin bitmeyen çabasını yansıtıyor.

[GN⁺]

Hacker News yorumları

• Tabloların düzen için kullanılmasını anlayabiliyorum.

  Tablolar gözden düştükten sonra, birkaç yıl boyunca düzen için float kullanmak baskın yaklaşımdı. Bunun listede olmamasına şaşırdım. MDN dokümanına göre float özelliği başlangıçta metin blokları içindeki görselleri kaydırmak için kullanılıyordu, ancak web sayfalarında çok sütunlu düzenler oluşturmak için de sıkça kullanıldı. Artık flexbox ve grid ile birlikte asıl amacına geri döndü.

• spacer.gif'e hiç saygı gösterilmemiş.

  HN'de hâlâ kullanılıyor ve tüm sayfa isteklerine dahil ediliyor: s.gif

• En sevdiğim teknikler:

  • Kenar çubuğunun içerik kadar uzun görünmesini sağlamak için kullanılan 'Faux columns'
  • Dokuz dilim ve 9 div ya da 3x3 tablo kullanarak kenarlıkları hack'lemek ve arka planı bazı eksenlerde tekrarlamak. CSS3 ile bunu destekleyen border-image geldi. Ama bu tür kenarlık stilleri artık tercih edilmiyor.
  • Yuvarlatılmış kenarlıklar için dokuz dilim kullanılabiliyordu, ancak birçok kişi yuvarlatılmış kenarlıkları taklit etmek için HTML üreten jeneratörler kullanıyordu. Makalede anlatıldığı gibi, ek markup'ın bir görselden daha fazla bayt tutacağı yönünde geleneksel bir kanı vardı, ama daha az roundtrip gerektiriyordu ve uygulanması daha kolaydı.

• HN bugün bile bu tekniklerden birini kullanıyor:

  • Düzen için HTML tabloları kullanıyor
  • Bu liste, standardsız geliştirmenin kontrol bilgisini kabul edilebilir çeşitli yan kanallara nasıl kodladığını vurguluyor.
  • Bunun yarattığı potansiyel karışıklıklar ve çakışmalar, bazen standart tabanlı web teknolojisi evrimini tarayıcı odaklı yenilikle birleştiren W3C sürecine yönelik hissedilen küçümsemeyi öne çıkarıyor. Bazen biri diğerini yönlendiriyor, bazen de eşzamanlı ilerliyorlar.
  • Sık sık eleştirilse de, bu süreç öncekine göre daha sürdürülebilir ve daha istikrarlı olarak yorumlanabilir.
  • Yeni W3C-vendor normlarını eleştirenlerden kaçının bu 10 tuhaf hack'i hatırlayıp o günlere geri dönmek isteyeceğini merak ediyorum.

• Erişilebilirlik için başlıkları ekranda görünmeyecek şekilde -10000 konumuna yerleştirmekten bahsetmiyor.

• HTML5 shiv'in CSS'ten önce eklenerek tüm tarayıcı tuhaflıklarını ortadan kaldırmasına dair bir referans yok.

  HTML5 shiv'in tarihi

• Tablo hücrelerini kontrol etmek için şeffaf 1×1 piksel gif kullandığımız o eski güzel günleri hatırlıyorum.

• Erken dönemde yaygın kullanılan  , yani bölünemez boşluk karakter varlığı için ek bir not:

  Metni kapsayıcı içinde sağa ya da sola itmek için kullanılırdı. Ya da tablo hücrelerinin düzgün çalışmasını sağlamak için, 1x1 spacer gif'e benzer şekilde kullanılırdı. Bazı sayfalarda yüzlerce   bulunurdu. Genelde margin veya padding ekleme yöntemi olarak kullanılırdı.

• Bazen modern web geliştiricilerinin CSS Grid ve IE'nin sonu yüzünden mi şımardığını, yoksa o dönemde karmaşık modern framework'ler ve build süreçleriyle uğraşmadıkları için mi şımardıklarını ayırt edemiyorum.

• Responsive design'ın gerçekten bir hack olup olmadığı sorgulanıyor:

  Media query'ler gerçekten etkileyici. Koşullu mantığı JavaScript yerine CSS'e koymak, server-side rendering istediğinizde büyük avantaj sağlıyor.