Einstieg in CSS - Webseiten gestalten mit HTML und CSS

1.5Zurück in die Zukunft – die Browser bestimmen

Eine kleine historische Rückblende soll verdeutlichen, wie sich das Gestalten von Webseiten in den letzten 20 Jahren verändert hat. Gleichzeitig wird durch diesen Rückblick deutlich, wohin die Reise geht und wie man in Zukunft mit diesen Veränderungen umgehen sollte.

1.5.1Die ersten grafischen Browser – Mosaic und Netscape Navigator

Das Web ist Anfang der 1990er Jahre von Wissenschaftlern für Wissenschaftler erfunden worden, und Wissenschaftler interessieren sich oft mehr für den Inhalt als für das Aussehen von Dokumenten. Webseiten waren damals fast alle gleich: grauer Hintergrund, schwarze Schrift und blaue Hyperlinks, die lila wurden, wenn sie auf eine bereits besuchte Seite zeigten.

1993 erschien ein neuer Webbrowser namens Mosaic mit bahnbrechenden Bedienkonzepten, wie zum Beispiel Buttons für Zurück, Vorwärts und Home, die man noch heute in vielen Browsern findet. Vor allem aber konnte Mosaic erstmals Grafiken zusammen mit dem Text auf einer Seite im selben Browserfenster darstellen. Dazu hatten sich die Programmierer einfach ein neues HTML-Element namens img (kurz für image) ausgedacht und es eingebaut.

Der ehemalige Mosaic-Programmierer Marc Andreessen gründete eine eigene Firma und brachte ein Jahr später einen Browser namens Netscape Navigator auf den Markt, der maßgeblich zum Boom des World Wide Web beitrug. »Netscape« bedeutet soviel wie »Netz-Landschaft«, und der Browser sollte dem Benutzer helfen, als Navigator durch das gerade entstehende Web zu navigieren. Das Maskottchen des Netscape Navigator war übrigens ein kleiner grüner Drache namens »Mozilla«. Der Name war eine Mischung aus »Godzilla« und »Mosaic Killer« und wurde Jahre später Namensgeber für den Nachfolger des Navigator.

Im Browser-Emulator auf http://dejavu.org können Sie sich Nachbauten dieser alten Browser übrigens live anschauen. Abbildung 1.6 zeigt Spiegel Online vom 12. Mai 2011 im Netscape Navigator 1.0 aus dem Jahre 1995.

Abbildung 1.6 Spiegel Online von 2011 im Netscape Navigator von 1995

1.5.2Notwehr in den 1990ern – Tabellen und <font>

Nach dem Erscheinen des Netscape Navigator begann das Web zu boomen, und der Ruf nach Gestaltung der doch eher schlichten Webseiten wurde immer lauter. Das W3C arbeitete bereits an CSS, einer Sprache für die ansprechende Gestaltung von HTML-Elementen. Aber die Welt wollte bunte Seiten, und zwar sofort. Irgendeine tolle neue Sprache, die irgendwann mal fertig sein würde, war ihr egal.

So baute Netscape kurzerhand neue Möglichkeiten wie font zur Gestaltung von Schriften und table zur Darstellung von Tabellen in seinen Navigator ein. Diese Elemente waren zwar nicht im vom W3C definierten HTML-Standard enthalten, aber (fast) alle waren begeistert von den neuen Gestaltungsmöglichkeiten, und die anderen Browserhersteller folgten bald.

In der zweiten Hälfte der 1990er waren demzufolge zwei Webdesign-Techniken sehr weit verbreitet:

• Schriftgestaltung mit font
• Positionierung mit unsichtbaren HTML-Tabellen

Der Quelltext dieser Seiten war für Menschen so gut wie unlesbar, und nachträgliche Änderungen am Layout wurden schnell zum Albtraum. Es war mehr Quäl-Text als Quelltext.

In gewisser Weise bedeutete diese Art der Gestaltung einen Schritt zurück in die vertraute Welt des Papierdenkens. Visuelle Editoren wie Frontpage oder Dreamweaver versteckten den Quelltext vor dem Benutzer und verstärkten die Papiermetapher, indem sie so taten, als seien sie eine ganz normale Textverarbeitung wie Word. Zahllose Homepagebastler wundern sich noch heute darüber, dass ihre Webseite zu Hause im Editor anders aussieht als beim Nachbarn im Browser.

Die Schriftgestaltung per CSS hat sich Ende der 1990er Jahre relativ schnell durchgesetzt. Bei guter Planung war das eine echte Arbeitserleichterung, denn ein Stylesheet kann beliebig viele Webseiten gestalten. Es ist quasi eine Formatierung per Fernsteuerung. Die Browser sprachen damals aber noch so wenig CSS, dass der Versuch der Positionierung von Objekten auf einer Webseite mit CSS zu nicht vorhersehbaren Ergebnissen führte. Mehrspaltige Layouts wurden also weiterhin mit Tabellen realisiert.

1.5.3Das neue Jahrtausend – tabellenfreie Layouts mit CSS

Inzwischen ist das anders. Die Browserwelt ist vielfältiger denn je. Neben den Veteranen Internet Explorer, Mozilla Firefox und Opera sind in den letzten Jahren noch Apples Safari und Googles Chrome hinzugekommen, und alle diese Browser können so gut CSS, dass es für Webdesigner außer einer gewissen natürlichen Trägheit kaum noch Argumente gibt, Webseiten nicht komplett mit CSS zu gestalten.

Der Unterschied zum traditionellen HTML-Tabellendesign der 1990er Jahre ist gewaltig, und falls Sie bereits Webseiten mit Tabellen gestaltet haben, vergessen Sie am besten alles, was Sie darüber gelernt haben. Webseiten bauen mit CSS ist anders. Ganz anders. Kein Vergleich.

Die Trennung von Inhalt und Gestaltung zum Beispiel ist für viele ein ungewohntes Konzept:

• Sie beginnen mit sinnvoll strukturierten HTML-Dateien.
• Danach gestalten Sie diese Dateien mit CSS-Anweisungen.

Nicht alles war mit CSS einfacher als mit Tabellen, so dass vielen Webdesignern beim Umstieg der Satz »Mit Tabellen ging das alles einfacher« des Öfteren auf der Zunge lag.

1.5.4Die Browser bestimmen, was geht – HTML5 und CSS3

In der noch jungen Geschichte des Webdesigns ist es also schon immer so gewesen, dass die Grenzen des Machbaren von den Möglichkeiten der Browser bestimmt werden. Vor diesem Hintergrund haben sich die großen Browserhersteller wie Mozilla, Apple, Google und Opera mit dem W3C zusammengetan, um die weitere Entwicklung der Webstandards zu koordinieren. Sogar Microsoft ist mit von der Partie.

Mehr oder weniger gemeinsam versuchen sie, die Herausforderungen der Zukunft zu lösen, denn das Web durchdringt unseren Alltag immer weiter. Zeitungen zum Beispiel sind längst nicht mehr nur aus Papier. Die gleichen Inhalte, die Sie am Frühstückstisch im Großformat lesen, müssen auch auf dem Bildschirm eines Smartphones gut aussehen. Und auf Ihrem Desktop-Monitor. Und auf Ihrem Tablet. Sprich: Inhalte müssen flexibel werden. Und die beste Voraussetzung dafür ist nicht nur standardkonformes, sondern deutlich leistungsfähigeres HTML und CSS, und genau deshalb entwickelt das W3C HTML5 und CSS3.

Bei dieser Entwicklung gibt es keine klaren Schnitte, sondern einen langsamen aber beständigen Wandel. Es gibt kein festes Datum, ab dem neue Technologien wie HTML5 und CSS3 problemlos einsetzbar sind. Teile davon können unter bestimmten Bedingungen bereits heute problemlos benutzt werden, und genau das werden Sie mithilfe dieses Buches tun.

Im Grunde genommen ist es genau wie in den 1990ern: Die Browser bestimmen, was geht, und die Grenze des praktisch Möglichen verschiebt sich langsam, aber stetig.

Ein Webworker hat nie ausgelernt, und gerade dann, wenn er glaubt, eine bestimmte Technik im Griff zu haben, gibt es etwas Neues, und er darf wieder umlernen:

»Es ist schlimm genug, rief Eduard, dass man jetzt nichts mehr für sein ganzes Leben lernen kann. Unsere Vorfahren hielten sich an den Unterricht, den sie in ihrer Jugend empfangen; wir aber müssen jetzt alle fünf Jahre umlernen.«

Goethe. Wahlverwandtschaften. 1809. Das einzig Beständige ist der Wandel, und das ist im Web nicht anders. Viel Spaß also beim...