CSS-Hacks anno 2006

Das Jahr 2016 neigt sich langsam aber sicher dem Ende entgegen. Grund genug, einen Moment inne zu halten und zurückzublicken: Was war eigentlich vor 10 Jahren im Web los?

Das legendäre StudiVZ ging damals durch die Decke, die ersten Smartphones fanden Ihren Weg in den Handel und Webstandards waren vor allem für den damals weitverbreiteten Internet Explorer 6 noch ein Fremdwort. Umso schwieriger gestaltete sich damit die Umsetzung anspruchsvoller Webdesigns. Nachfolgend die damals - zumindest meines Erachtens und Erinnerungsvermögens - bekanntesten Herausforderungen und teilweise überaus aufwändige und anspruchvolle Lösungen, mit denen fast jeder Frontend-Entwickler Wohl oder Übel mal in Berührung gekommen ist.

Sliding Doors

Total en vogue waren damals horizontale Tabnavigationen. Im Optimalfall mit flexibler Laufweite, Hintergrundbildern und abgerundeten Ecken, die ohne die CSS-3-Property border-radius eine wirkliche Herausforderung darstellten. Wer das nochmal nachbauen möchte, bitteschön!

Abgerundete Ecken

Apropos Rundungen: Weil Websites im Grunde eckig waren, wollten sich Webdesigns mit abgerundeten Ecken vom kantigen Gros optisch absetzen. Was bei einem horizontal und vertikal skalierbaren Inhaltscontainer dazu alles von Nöten war, erfährt man in diesem Artikel. Das geht schon etwas in Richtung Modellbau eines Viermasters von Revell.

Internet Explorer 6

<!–[if IE 6]>
<link rel=“stylesheet” type=“text/css” href=“ie6.css” />
<![endif]–>

Darf man den Internet Explodierer als Browser bezeichnen? Das Fallback-Stylesheet war oftmals genauso groß wie das eigentliche Stylesheet. Egal ob Ausrichtungen von Containern, Innen- und Außenabstände: Dieser Browser intepretierte – wie ein Kleinkind in der Trotzphase – einfach alles grundsätzlich anders. Float away, IE6. Masochisten finden den hier den Browser zum Download.

Webtypografie

Schöne, individuelle Webtypografie steckte damals noch in den Kinderschuhen und beschränkte sich in der Regel auf die Nutzung von websicheren Schriften wie Arial, Helvetica oder Times New Roman: Um trotzdem Custom-Fonts für ein konsequentes Corporate Design im Web zu nutzen, gab es beispielsweise abenteuerlich Abhilfe mit sIFR ( Scalable Inman Flash Replacement), die mittels Javascript und dem damals weitverbreiteten Flash die Darstellung von Text in einer gewünschten Schriftart ermöglichte. Die Technik half im Grunde nur der Optik, aus heutiger Sicht bezüglich SEO-Konformität eine mittelgroße Katastrophe.

Floats

Das Jahr stand auch für den Umbruch von Tabellen-basierten Layouts zum sogenannten Boxmodel. Statt verschachtelter Tabellen wurde Container verwendet, deren Ausrichtung mittels Floats formatiert wurde. Das Prinzip ist auch heute noch ein bewährtes Verfahren zur Umsetzung von Weblayouts. Damals hatte aber besonders der gefürchtete Internet Explorer 6 damit seine Probleme, die für häufiges Haareraufen bei Entwicklern sorgten. Ein Patentrezept für das korrekte Floating im besagten Browser gab es kaum und so war es eher eine Try-&-Error-Vorgehensweise, um die Technik Browser-übergreifend nutzen zu können.

Slices

In Photoshop gemalte Websites wurden damals oft per Slices in ein HTML-Tabellenlayout mit unzähligen Bildern exportiert. Diese Struktur wurde dann im Optimalfall ins Boxmodel übertragen. Wenn dann noch eine Integration des Frontends in ein CMS wie das damals beliebte – heute weitesgehend unbeliebte - Joomla gewünscht war, kann man sich grob vorstellen, dass der Aufwand bei der Umsetzung einer komplexen Website dem Bau eines Hauses gleichkam.

Fazit

Wenn man sich damalige Vorgehensweisen vor Augen führt, kann man eigentlich nur schwer verstehen, warum man auch 2006 schon Spaß am Webdesign und der Frontend-Entwicklung hatte. Glücklicherweise haben sich die Gestaltungsmöglichkeiten und Workflows in den letzten 10 Jahren in fast allen Belangen grundlegend verbessert und lassen einen optimistisch auf 2017 blicken.

Zurück