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

 (tedium.co)
2 Punkte von GN⁺ 2023-12-03 | 1 Kommentare | Auf WhatsApp teilen
  • Frühe Webentwickler hatten es mit unterschiedlichen Standard-Implementierungen und Fehlern je nach Browser zu tun, sodass sich gewünschtes Layout und Verhalten nur mit gültigem HTML/CSS kaum zuverlässig garantieren ließen
  • Umgebungen wie Netscape 4, Internet Explorer 5/6/7, Safari/WebKit und Outlook führten zu browser-spezifischem Workaround-Code für CSS, PNG-Transparenz, Kommentare, Selektoren und E-Mail-Vorschauen
  • HTML-Tabellenlayouts, sIFR, Chrome Frame und Responsive Design waren Beispiele dafür, mit anders als ursprünglich gedachten Kombinationen Designbeschränkungen und Probleme alter Browser zu überwinden
  • Diese Hacks hatten Grenzen wie schlechtere Barrierefreiheit, nicht standardkonformen Code und die Abhängigkeit von Flash oder Plugins, waren damals aber ein pragmatisches Mittel, um Kompatibilität und visuelle Darstellung sicherzustellen
  • Das Ideal der Webstandards und die tatsächliche Nutzung gerieten immer wieder aneinander, und die wiederholten Umgehungen durch Entwickler und Designer prägten Webdesign, E-Mail-HTML und mobile Anpassungsstrategien langfristig

CSS-Hacks zur Umgehung von Browserfehlern

  • Der @import-Hack für Netscape Navigator 4.0 funktionierte so, dass CSS, das Netscape nicht unterstützen konnte, absichtlich per @import geladen wurde, damit der Browser fortgeschrittene Styles nicht anwendete
    • Die Grund-CSS wurde per <link> geladen, weiterentwickelte CSS dagegen getrennt per @import
    • Das CSS Cookbook fasst zusammen, dass diese Methode den Effekt hatte, zusammen mit CSS-Dateien auch solche zu laden, die in Netscape nicht funktionierten
    • Netscape setzte statt auf CSS auf JSSS, und nachdem das W3C CSS auswählte, implementierte Netscape CSS im Sommer 1997 hastig in Netscape 4
    • In Netscape 4 hatte das den Nebeneffekt, dass beim Deaktivieren von JavaScript auch CSS deaktiviert wurde
  • CSS-Hacks für Internet Explorer 6 funktionierten etwa, indem man vor Eigenschaften wie _width einen Unterstrich setzte, sodass nur IE6 die jeweilige Deklaration interpretierte
    • Nach dem Box-Modell des W3C schließt width Border und Padding aus, Internet Explorer behandelte Padding und Border jedoch anders, was zu Layout-Unterschieden zwischen Browsern führte
    • Ein Beispiel war die Verwendung von für Standard-CSS ungültigen Deklarationen wie width: 300px; _width: 320px; padding: 10px; als Korrekturwert für IE6
    • Es gab auch IE-spezifische Hacks, bei denen nach !important noch ein zusätzliches Ausrufezeichen gesetzt wurde, damit sich das Verhalten nur in IE7 und älter unterschied

Semantische Struktur fürs Layout verbiegen

  • Das HTML-Tabellenlayout war ein typischer Hack, bei dem <table>, eigentlich für tabellarische Daten, als Werkzeug für das visuelle Seitenlayout verwendet wurde
    • David Siegel näherte sich dem Web aus der Perspektive eines klassischen Designers und wollte attraktivere Websites schaffen, indem er sich gegen die Konvention stellte, dass der Browser das visuelle Ergebnis von HTML bestimmt
    • In Creating Killer Web Sites beschreibt er das Umgehen strukturellen Markups, den Einsatz von Bildern für zweidimensionale Anordnung und später die Nutzung von Tabellen, um Text in Spalten zu setzen
    • Jay Hoffman von The History of the Web fasst zusammen, dass HTML/XML-Puristen die Vermischung von Design und Codestruktur als großes Tabu betrachteten
    • Tabellenlayouts verschlechterten die Barrierefreiheit und ihre Korrektur dauerte lange, zeigten aber den Wert davon, dass Entwickler Webportale visuell gestalten konnten
  • Responsive Design kombinierte bestehende Techniken ähnlich wie Tabellenlayouts neu, war aber eine Methode innerhalb der Webstandards, Layouts an unterschiedliche Bildschirmgrößen anzupassen
    • Im Webdesign der 2000er war die Umsetzung des „Holy Grail layout“ mit drei bis zum Seitenende reichenden Spalten in CSS ein großes Streitthema
    • Es gab verschiedene Workarounds wie gefälschte Spalten per Hintergrundbild, später unterstützte CSS dann grid-basierte Layouts
    • Mit der Verbreitung von Smartphones verlor das bisherige Drei-Spalten-Layout an Bedeutung, und es entstand die Situation, für separate mobile Websites Geld ausgeben zu müssen
    • Ethan Marcotte schlug in seinem Artikel zu responsive web design bei A List Apart vor, Media Queries zu verwenden, um Website-Layouts an das jeweilige Bildschirmformat anzupassen
    • Responsive Design wirkte damals wie ein Hack mit den noch ungewohnten Media Queries, veränderte das Webdesign aber langfristig

Workarounds für Bilder und Kommentare im Internet-Explorer-Zeitalter

  • AlphaImageLoader umging das Problem, dass Internet Explorer 5 und 6 PNG-Transparenz nicht korrekt unterstützten, mithilfe eines Microsoft-spezifischen Filters
    • Internet Explorer unterstützte PNG zwar seit Version 4, renderte es aber in vielen Fällen nicht korrekt; besonders die fehlende Unterstützung transparenter PNGs in IE5/IE6 war ein großes Problem
    • Jeff Starr von Perishable Press beschreibt in PNG fix for Internet Explorer, dass damalige Lösungen den proprietären Transparenzfilter AlphaImageLoader von Microsoft erforderten
    • Ein Beispiel war, in IE filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...) anzuwenden und in Nicht-IE-Browsern per [class]-Selektor ein normales Hintergrundbild zu setzen
    • Solche kleinen Funktionslücken sorgten dafür, dass Entwickler auch in den späten 2000ern und frühen 2010ern weiterhin browser-spezifische Hacks mitdenken mussten
  • Bedingte Kommentare (Conditional Comments) waren eine Erweiterung von HTML-Kommentaren, mit der Microsoft IE je nach Version entscheiden ließ, ob bestimmtes HTML gerendert werden sollte
    • Weil Internet Explorer bei der Umsetzung von Websites zu viele Hacks erforderte, führte Microsoft einen weiteren Hack ein, um genau diese Hacks zu verwalten
    • Aus eigentlich nicht ausführbaren HTML-Kommentaren wurde eine Struktur, die abhängig von der IE-Version funktionierte
    • Sie wurden erstmals in Internet Explorer 5 eingeführt und sind für komplexe E-Mail-Designs in Microsoft Outlook für Windows teils noch immer nötig
    • Jens Oliver Meiert kritisierte in einem Beitrag von 2007, dass bedingte Kommentare bei der Unterstützung verschiedener IE-Versionen dazu zwangen, das HTML einzelner Dokumente oder Templates erneut anzupassen, was die Trennung von Struktur und Darstellung beschädigte
    • Bedingte Kommentare wurden ab IE9 entfernt, und Conditional Compilation in JavaScript konnte als Ersatz dienen

Nicht standardkonforme Kombinationen für Schriften, E-Mail und alte Browser

  • sIFR (Scalable Inman Flash Replacement) war ein JavaScript-basierter Hack, der Text in Flash-Einbettungen verwandelte, um gewünschte Schriften anzuzeigen, ohne auf Web-safe-Fonts beschränkt zu sein
    • Microsofts Core Fonts for the Web empfahlen faktisch nur eine begrenzte Auswahl Web-safe-Fonts und wurden später eingestellt
    • Frühe Techniken zum Font-Ersatz begannen mit Bildern, hatten aber Grenzen bei Barrierefreiheit und Darstellung
    • Shaun Inman entwickelte die Idee, gewünschte Schriften durch kleine Adobe-Flash-Dateien zu ersetzen, und Mike Davidson sorgte mit sIFR dafür, dass sich Schriften bei Bedarf skalieren ließen
    • Davidson schrieb in seinem sIFR-Post von 2004, dass das Problem, benutzerdefinierte Schriften an Nutzer auszuliefern, die sie nicht installiert hatten, noch ungelöst sei
    • sIFR war ein Zwischenschritt auf dem Weg zu echten Webfont-Lösungen und hielt nicht lange durch, weil Flash den Übergang in die mobile Welt nicht schaffte
  • Der Preheader-Text-Hack fügt versteckte Zeichen und Leerraumzeichen ein, um zu verhindern, dass in der Vorschauzeile von E-Mail-Clients unerwünschter nachfolgender Fließtext an den Preheader angehängt wird
    • Der Preheader ist der kurze Text, der im Posteingang nach der Betreffzeile erscheint und wie ein Untertitel der E-Mail funktioniert
    • Weil E-Mail-Clients manchmal HTML-Tags oder irrelevanten Body-Text in die Vorschau ziehen, wird zwischen dem gewünschten Preheader und dem folgenden Text erzwungener Abstand eingefügt
    • Das von Litmus empfohlene Beispiel bestand aus einem Bereich mit display: none, max-height: 0px, overflow: hidden, in den Zeichen wie ͏, ‌,  ,   und ­ wiederholt eingefügt wurden
  • Google Chrome Frame war ein Browser-Plugin, das innerhalb des Internet Explorer die Chrome-Rendering-Engine nutzbar machte, um selbst in von IE6 abhängigen Umgebungen moderne Webfunktionen verwenden zu können
    • Manche Unternehmen konnten wegen strenger IT-Abteilungen und auf IE6 basierender Technik-Abhängigkeiten nur schwer auf moderne Browser umsteigen
    • Google entwickelte 2009 Chrome Frame, um altem Internet Explorer eine moderne Engine zu geben, damit Entwickler nicht mehrere Versionen bauen oder auf neue Funktionen verzichten mussten
    • Laut dem Beitrag zum Ende von Chrome Frame nutzten damals viele Anwender Browser, die bei modernen Funktionen deutlich zurücklagen
    • Werkzeuge wie Google Wave und YouTube benötigten HTML5-Funktionen, und die Unterstützung von IE6 war für Google eine Einschränkung
    • Chrome Frame blieb fünf Jahre am Markt; danach war Chrome ein sehr dominanter Browser geworden

Safari/WebKit-spezifische Anpassungen und die tatsächliche Evolution des Webs

  • WebKit-spezifische Selektor-Hacks nutzten CSS-Unterstützung wie in @supports (-webkit-appearance:none) {}, um CSS nur auf WebKit-basierte Browser anzuwenden
    • Safari basierte bei seinem Start auf einer Engine mit Wurzeln in der Open-Source-Community und bot anfangs starke Unterstützung für HTML/CSS-Standards
    • Apple Mail nutzt WebKit und galt beim E-Mail-Coding meist als Umgebung, die weitgehend gut funktionierte
    • Mit der Zeit entstand das Problem, dass der Veröffentlichungsrhythmus von Safari an die Zeitpläne von Mac und iOS gekoppelt war und dadurch hinter der Branche zurückfiel
    • Entwickler kritisierten, Apple ignoriere Bugs oder verzögere Funktionen, die im Wettbewerb nachteilig sein könnten
    • Ein Reddit-Nutzer schrieb in einem Beschwerde-Post zur Safari-Entwicklung, dass APIs zwar implementiert würden, aber voller Bugs seien oder später wieder kaputtgingen
    • Dieser Hack funktionierte auch in frühen Chrome-Versionen, die noch auf WebKit basierten
  • Die Absicht von HTML und die tatsächliche Nutzung des Webs entwickelten sich stark auseinander, und Designer sowie UI-Spezialisten bauten trotz seltsamem Code visuelle Ausdrucksformen auf dem Internet auf
    • Wie David Siegel erklärte, wollten Standardisierungsgremien, dass HTML ähnlich wie RSS eher nutzer- und strukturorientiert funktioniert als auf finales Design ausgerichtet zu sein
    • Auch Protokolle wie das damals aufkommende Gopher funktionierten auf eine Weise, bei der Design wenig Einfluss hatte
    • Wegen der Kreativität der Internetnutzer und der Abhängigkeit des kommerziellen Internets von visueller Sprache setzte sich diese Philosophie jedoch nicht im Mainstream durch
    • Im E-Mail-HTML sind selbst einfache transparente Verläufe mit Standard-HTML/CSS nur schwer umzusetzen, und Workarounds wie HTML-Tabellen-Glitches aus alten StackOverflow-Kommentaren können noch immer eine Lösung sein

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-12-03
Meinungen auf Hacker News

  • Tabellen für Layouts zu verwenden, ist ziemlich nachvollziehbar.
    Aber nachdem Tabellen aus der Mode gekommen waren, bestand Layouten für ein paar Jahre praktisch nur daraus, alles mit float zu bauen. Das waren wirklich wilde Zeiten; überraschend, dass das in der Liste fehlt.
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    „Die float-Eigenschaft, die ursprünglich dafür gedacht war, Bilder innerhalb von Textblöcken schweben zu lassen, wurde zu einem der am häufigsten verwendeten Werkzeuge, um mehrspaltige Layouts auf Webseiten zu erstellen. Mit dem Aufkommen von flexbox und grid ist sie inzwischen wieder zu ihrem ursprünglichen Zweck zurückgekehrt.“

    • Als float gerade aufgekommen war, habe ich eine Website für Computerreparaturen komplett in FF entwickelt.
      Als ich sie gegen Ende in IE öffnete, war das gesamte Design kaputt, und da die Zielkunden fast sicher IE-Nutzer waren, musste ich am Ende alles wieder tabellenbasiert neu schreiben. Das war ein trauriger Tag.
    • Schon die Bezeichnung tabellenbasierte Layouts als Hack fand ich von Anfang an ärgerlich.
      Nachdem Tabellen verdrängt worden waren, habe ich gesehen, wie unzählige Frontend-Teams zusammengerechnet Monate mit float-Gefrickel verschwendeten, nur um die Überzeugungen von „Puristen“ zu wahren, und dabei deutlich weniger leicht verständliche Webseiten bauten. Daraus habe ich eine wichtige Lektion gelernt.
      Joel Spolsky nannte solche Entwickler in einem hervorragenden Artikel Architecture Astronauts: Leute, die vergessen, dass es ihre Aufgabe ist, mit minimalem Aufwand tatsächlich gut funktionierende Software zu bauen. Ich denke, auch die Lächerlichkeit der ersten EJB-Spezifikation oder Java-Gespötte wie AbstractFactoryBuilderConstructor stammen aus dieser Ecke.
      Mit der Zeit bin ich ziemlich gut darin geworden, diese Haltung zu erkennen und Abstand davon zu halten.
    • „Ein paar Jahre lang Layouts mit float bauen“ nannte man faux columns, und selbst ein einfaches dreispaltiges Layout war so schwierig, dass es als „heiliger Gral“ des Layouts bezeichnet wurde.
      https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
    • Der neue, moderne clearfix-Hack, wie W3Schools ihn bis heute nennt.
      .clearfix::after { content: ""; clear: both; display: table; }
      [1] https://www.w3schools.com/howto/howto_css_clearfix.asp
    • Die Zeit zwischen Tabellen und flexbox/grid war hart.
      float war knifflig und schwer richtig hinzubekommen, und viele sind einfach zu Tabellen zurückgekehrt; ehrlich gesagt kann man es ihnen nicht verübeln.

  • Bekommt spacer.gif keinen Respekt?
    Auf HN gibt es sie natürlich noch, und sie ist in jeder Seitenanfrage enthalten.
    https://news.ycombinator.com/s.gif

    • Die Geschichte tabellenbasierter Layouts ist ohne Spacer-Bilder nicht vollständig.

  • Es gab ein paar Dinge, die ich mochte.
    Faux columns ließen Sidebars visuell so wirken, als wären sie genauso lang wie der Inhalt: https://alistapart.com/article/fauxcolumns/
    Noch weitergehend konnte man mit 9-patch und neun divs oder einer 3x3-Tabelle Hintergründe pro Achse wiederholen und so eigene Rahmen nachbilden. CSS3 brachte mit border-image etwas Hilfe, aber solche Rahmenstile sind heute nicht mehr besonders angesagt.
    Abgerundete Rahmen konnte man ebenfalls mit 9-patch bauen, und viele nutzten Generatoren, um mehrere Elemente zu erzeugen und HTML zu erstellen, das abgerundete Rahmen simulierte. Dieser Artikel erklärt es: http://benogle.com/2009/04/29/css-round-corners.html Meist war das zusätzliche Markup in Bytes größer als ein Bild, aber es verringerte die Roundtrips und galt als recht einfach umzusetzen.

    • Unser Team nutzte den 3x3-Ansatz so häufig, dass wir eigens dafür eine Komponente gebaut haben.
      Es war eher in Richtung ActionScript, aber die Styling-Idee war dieselbe, also haben wir auch darüber geschrieben: https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...
      Eine weitere schöne Sache war, das cicada principle für sich nicht wiederholende Hintergrund-Pattern zu verwenden.
    • Ich habe auf A List Apart geklickt und war ziemlich schockiert, dass der Header auf Mobilgeräten kaputt ist.
      Trotzdem sieht es nach all den Jahren immer noch aufgeräumt aus.
    • Erwähnenswert ist auch die Sliding-Doors-Technik für abgerundete Ecken: https://alistapart.com/article/slidingdoors/
    • Faux columns leben auf unserer Hauptwebsite immer noch weiter. Es ist einfach nie Zeit, sie durch etwas Moderneres zu ersetzen ;)

  • Mir gefällt, dass HN bis heute eines davon verwendet: Layout mit HTML-Tabellen
    Etwas ernster betrachtet zeigt diese Liste sehr gut, dass beim Entwickeln ohne Standards Steuerinformationen in verschiedene „halbwegs erträgliche“ Nebenkanäle codiert werden
    Dieses Chaos und die Möglichkeit von Konflikten lassen einen den Spott, den der heutige W3C-Prozess manchmal abbekommt, neu betrachten. Dieser Prozess kombiniert standardgetriebene Weiterentwicklung von Web-Technologien mit browsergetriebener Innovation und lässt beide abwechselnd vorangehen oder parallel laufen
    Auch wenn er oft verspottet wird, kann man ihn als nachhaltiger und stabiler interpretieren als die frühere Vorgehensweise
    Ich frage mich, wie viele der Kritiker der neuen W3C-Vendor-Normen wirklich in jene aufregenden Zeiten zurückwollen, an die diese „10 seltsamen Hacks“ erinnern

    • Das war weniger das Fehlen von Standards als vielmehr das Fehlen benötigter Funktionen
      Wenn das, was man tun will, nicht als Feature abgedeckt ist, wird man irgendwie kreativ. Standards erzeugen, wenn sie nicht reif genug sind, um alle potenziellen Anforderungen zu erfassen, eher Starrheit und bringen genau solche Situationen hervor. Besonders dann, wenn man wie im Web an Standards gebunden ist, die zu den eigenen Bedürfnissen passen können oder auch nicht
      In anderen Bereichen gibt es meist genug Auswahl, sodass eine der Optionen flexibel genug ist, um das Nötige zu tun, und man diese wählen kann
      Wenn man lange in der Forschung arbeitet, kommt es überraschend oft vor, dass das, was man tun möchte, einen hackigen technischen Ansatz erfordert. Viele Standards und Funktionssammlungen entstehen nämlich rund um Business-/Consumer-Interaktionen, in die Geld fließt, und die Systeme in deren Umfeld
    • Leider werden W3C und TC39 heute vollständig von Google dominiert, und viele Standards werden durchgedrückt, während man sich um Verfahren fast nur formal kümmert
      Viele Akteure, die von Browser-Funktionen abhängen, etwa TV-Hersteller, die Apps innerhalb einer WebKit- oder Chromium-Version ausführen, sind in den Standardisierungsgremien völlig still. Es ist also faktisch nicht einmal ein Dreikampf zwischen Google, Apple und Mozilla
    • Interessant, dass Tabellen angeblich „verschwunden“ sind und dann weithin durch Bootstrap ersetzt wurden
      Am Ende bekommt man Tabellen in divs. Nur eben mit 12 Spalten
    • WHATWG hat das Web nie für irgendjemanden weiterentwickelt außer für kommerzielle Interessen
      Ich habe mit HTML 3.2 gelernt und weiß daher sehr gut, welcher byzantinische Unsinn wegen IE und Netscape nötig war. Aber das waren Entscheidungen von MS und Netscape, und selbst bei stärkerer Präsenz des W3C gab es keine Garantie und keinen Hinweis darauf, dass MS und Netscape neue Standards befolgt hätten
      Trotzdem war es damals besser als die heutige beschissene Situation, in der der Rest des Webs ausbaden muss, was ein Großkonzern will
      Wirklich so viel besser, toll /s

  • Mein „liebster“ Hack fehlt. Überschriften für Barrierefreiheit auf Position -10000 zu setzen, sodass sie nicht auf dem Bildschirm gerendert werden, Screenreader sie aber lesen

    • Nahe Varianten davon sind immer noch recht verbreitet. Denn es gibt nach wie vor nicht in allen Fällen eine gute Option für unsichtbaren, aber für Screenreader zugänglichen Text
      Dinge wie aria-label haben einige Einsatzbereiche dieses Musters ersetzt, aber nicht alle
    • Funktioniert das noch? Oder muss man ARIA verwenden?

  • Keine Erwähnung von html5 shiv, das vor allem CSS eingebunden wurde, um Browser-Quirks zu beseitigen
    https://paulirish.com/2011/the-history-of-the-html5-shiv/

    • reset und normalize fehlen auch

  • Ich erinnere mich an die gute alte Zeit der transparenten 1×1-Pixel-GIFs, mit denen man Tabellenzellen gefügig hielt

    • „Gute alte Zeit“? Die Seite, die du gerade ansiehst, verwendet sie auch ;)
      https://news.ycombinator.com/item?id=38485665
    • Früher hat man große Bilder in ein Rastermuster zerschnitten und mit Tabellen zusammengehalten
      Ich weiß nicht einmal mehr, warum. Damit sie schneller luden?

  • Aus der Frühzeit käme noch die weitverbreitete Nutzung der geschützten Leerzeichen-Entity   hinzu
    Man verwendete sie, um Text innerhalb eines Containers nach rechts oder links zu schieben, und meiner Erinnerung nach auch wie 1x1-Spacer-GIFs, um Tabellenzellen gefügig zu machen. Auf manchen Seiten gab es Hunderte von  ; sie waren fast ein Allzweckmittel für Abstände oder Padding

  • Manchmal weiß ich nicht, ob moderne Webentwickler durch CSS Grid und den Tod des IE verwöhnt sind, oder ob wir damals verwöhnt waren, weil wir uns nicht mit der Komplexität moderner Frameworks und Build-Prozesse herumschlagen mussten

    • Wahrscheinlich beides
      Allerdings dürfte es heute einfacher sein. Technisch muss man moderne Frameworks und Build-Prozesse nicht zwingend verwenden, und mit modernem CSS und JavaScript kann man Websites und Apps, die früher kompliziert gewesen wären, leicht bauen
    • Webentwicklung hat im Vergleich zu anderen Bereichen, in denen ich gearbeitet habe, eine besondere Nuance
      Die Branche hat sich angewöhnt, das Rad immer wieder auf kompliziertere Weise neu zu erfinden
      Die plausibelste Vermutung ist, dass das Web ein Bereich ist, den neue oder weniger erfahrene Entwickler häufiger wählen, und dass dies ein Nebeneffekt davon ist

  • Ist Responsive Design wirklich ein Hack? Media Queries sind großartig
    Bedingungslogik in CSS statt in JavaScript zu platzieren, ist ein großer Gewinn. Besonders dann, wenn man serverseitiges Rendering möchte

    • Media Queries zu verwenden, um unterschiedliche Medien zu unterstützen, wirkt wie genau der richtige Anwendungsfall
    • Wenn man nicht das abfragt, was man tatsächlich wissen möchte, sondern etwas, das zufällig mit dem Benötigten korreliert, wird es zum Hack
    • Kein Hack
      Man kann verschiedene Eigenschaften des User Agents abfragen und je nach Ergebnis anderes CSS ausliefern. Das als Hack zu bezeichnen, ist Unwissenheit und ein notwendiger Teil beim Erstellen von Responsive Design