HTML-Hacking-Techniken, die das Internet geprägt haben

Der Einfallsreichtum von HTML-Hacks

• Warum HTML-Hacks nötig waren: Wegen Fehlern im HTML-Code oder unvollständigen Browser-Implementierungen musste man manchmal unschönen Code schreiben, um das gewünschte Ergebnis zu erzielen. Solche Hacks waren mitunter kreativ und bleiben erinnerungswürdig.
• Der @import-Hack in Netscape Navigator 4.0: Er machte es möglich, von Netscape nicht unterstützte CSS-Stile auszublenden. Netscape setzte statt auf CSS auf JSSS, doch nachdem das W3C CSS auswählte, wurde die CSS-Implementierung in Netscape 4 überhastet fertiggestellt und war deshalb schwächer als die späterer Browser.
• HTML-Tabellen für Layouts verwenden: Dadurch wurden experimentellere Layouts möglich. HTML-Tabellen als Layout-Werkzeug zu verwenden, entspricht geradezu der Definition eines Hacks und wird in der E-Mail-Welt noch immer eingesetzt.
• Unterstriche vor CSS-Styles verwenden: Dadurch konnten bestimmte Styles nur auf IE6 angewendet werden. Ausgenutzt wurde dabei die Grenze des IE beim Parsen von Sonderzeichen.
• PNG-Transparenz mit AlphaImageLoader bereitstellen: Damit ließ sich die von IE6 nicht unterstützte Transparenz von PNG-Dateien rendern. Das Bild wurde dabei durch einen Filter geleitet.
• Bedingte Kommentare: Damit konnten bestimmte Tricks nur in bestimmten IE-Versionen verwendet werden. Die HTML-Kommentarfunktion wurde so umfunktioniert, dass Code ausgeführt werden konnte.
• Scalable Inman Flash Replacement (sIFR): Damit konnten nicht websichere Schriftarten verwendet werden. Dafür kam ein JavaScript-Hack zum Einsatz, der Text durch ein Flash-Embed ersetzte.
• Preheader-Text-Hack: Er verhindert bei E-Mails, dass zusätzlicher Text in die Beschreibungszeile überläuft. Verwendet wird dabei eine nicht standardisierte oder ungewöhnliche Folge von Leerraumzeichen.
• Google Chrome Frame: Er ersetzte IE6 durch ein Chrome-Fenster. Umgesetzt wurde dies über ein Browser-Plugin.
• Webkit-spezifischer Selektor-Hack: Damit wurde CSS-Code nur auf Webkit-Browser angewendet. Dabei wird erkannt, ob ein bestimmter Browser bestimmten CSS-Code unterstützt.
• Responsive Design: Damit lassen sich Informationen in verschiedenen Umgebungen, besonders auf Tablets und Mobilgeräten, effektiv anordnen. In den meisten Fällen werden dafür Media Queries verwendet, um Inhalte je nach Gerät zu platzieren.

Meinung von GN⁺

• Am wichtigsten ist der Einsatz der Entwickler, die kreative Lösungen jenseits der Standards von HTML und CSS gefunden haben.
• Der Artikel ist interessant und fesselnd, weil er zeigt, wie Webentwickler kreative Hacks nutzten, um die Grenzen von Browsern zu überwinden und die Nutzererfahrung zu verbessern.
• Diese Hacks spiegeln die Weiterentwicklung der Webstandards und die unermüdlichen Bemühungen der Entwickler für besseres Webdesign wider.

[GN⁺]

Hacker-News-Kommentare

• Dass Tabellen für das Layout verwendet wurden, kann ich nachvollziehen.

  Nachdem Tabellen aus der Mode kamen, war für einige Jahre die Verwendung von float für Layouts der Standard. Ich bin überrascht, dass diese Methode in der Liste fehlt. Laut der MDN-Dokumentation wurde die Eigenschaft float ursprünglich verwendet, um Bilder innerhalb von Textblöcken schweben zu lassen, wurde aber häufig genutzt, um mehrspaltige Layouts für Webseiten zu erstellen. Mit dem Aufkommen von Flexbox und Grid ist sie nun zu ihrem ursprünglichen Zweck zurückgekehrt.

• Kein Respekt für spacer.gif.

  Wird auf HN immer noch verwendet und ist in jeder Seitenanfrage enthalten: s.gif

• Meine Lieblingstechniken:

  • „Faux columns“, damit die Seitenleiste so aussieht, als wäre sie genauso lang wie der Inhalt
  • Nine-Patch und neun divs oder eine 3x3-Tabelle, um Rahmen zu hacken, während der Hintergrund auf einigen Achsen wiederholt wird. In CSS3 kam dafür border-image hinzu. Solche Rahmenstile sind heute aber nicht mehr beliebt.
  • Man konnte auch Nine-Patch für abgerundete Rahmen verwenden, aber viele Leute nutzten Generatoren, die HTML erzeugten, um runde Ecken zu simulieren. Wie im Artikel beschrieben, lautete die herkömmliche Weisheit, dass zusätzliches Markup mehr Bytes kosten würde als Bilder, aber es erforderte weniger Roundtrips und war leichter einzusetzen.

• HN verwendet auch heute noch eine dieser Techniken:

  • HTML-Tabellen für das Layout
  • Diese Liste zeigt, wie Entwicklung ohne Standards Kontrollinformationen in verschiedene tolerierbare Nebenzugkanäle kodiert.
  • Die daraus entstehende potenzielle Verwirrung und Kollision unterstreicht mitunter die Verachtung, die man gegenüber dem W3C-Prozess empfindet. Dieser verbindet die standardbasierte Weiterentwicklung von Webtechnologien mit browsergetriebener Innovation. Manchmal führt das eine das andere an, manchmal laufen beide parallel.
  • Oft wird dieser Prozess kritisiert, aber er lässt sich als nachhaltiger und stabiler interpretieren als der vorherige.
  • Ich frage mich, wie viele derjenigen, die die neue W3C-Vendor-Norm kritisieren, sich an diese mehr als zehn seltsamen Hacks erinnern und wirklich in diese Zeit zurückwollen.

• Es fehlt der Trick, Überschriften für die Barrierefreiheit bei Position -10000 zu platzieren, damit sie auf dem Bildschirm nicht sichtbar sind.

• Keine Erwähnung davon, HTML5 shiv vor CSS einzubinden, um die Eigenheiten aller Browser zu beseitigen.

  Die Geschichte von HTML5 shiv

• Ich erinnere mich an die guten alten Zeiten, als transparente 1×1-Pixel-GIFs verwendet wurden, um Tabellenzellen zu steuern.

• Zusätzliche Erwähnung des früh weit verbreiteten  , also der geschützten Leerzeichen-Entität:

  Wurde verwendet, um Text innerhalb eines Containers nach rechts oder links zu verschieben. Oder ähnlich wie ein 1x1-spacer.gif, damit Tabellenzellen korrekt funktionieren. Manche Seiten enthielten Hunderte von  . Im Allgemeinen wurde es verwendet, um Abstände oder Padding hinzuzufügen.

• Ich kann manchmal nicht sagen, ob moderne Webentwickler durch CSS Grid und das Ende des IE verweichlicht wurden oder ob wir damals verweichlicht waren, weil wir uns nicht mit komplexen modernen Frameworks und Build-Prozessen herumschlagen mussten.

• Die Frage, ob Responsive Design wirklich ein Hack ist:

  Media Queries sind erstaunlich. Bedingte Logik in CSS statt in JavaScript zu packen, ist ein großer Vorteil, wenn man Server-Side Rendering nutzen möchte.