Ein Rückblick auf die Geschichte von CSS

Wenn Sie an HTML und CSS denken, stellen Sie sich wahrscheinlich ein Komplettpaket vor. Aber jahrelang, nachdem Tim Berners-Lee 1989 das World Wide Web erfunden hatte, gab es so etwas wie CSS nicht. Der ursprüngliche Plan für das Web bot keinerlei Möglichkeit, eine Website zu gestalten.

Es gibt einen jetzt berüchtigten Beitrag, der in den Archiven der WWW-Mailingliste vergraben ist. Er wurde 1994 von Marc Andreessen geschrieben, der später sowohl die Mosaic- als auch die Netscape-Browser mitentwickelte. In dem Beitrag bemerkte Andreessen, dass er Webentwicklern, wenn sie nach visuellem Design gefragt wurden, nur sagen konnte: „sorry you’re screwed.“, da es keine Möglichkeit gab, eine Website mit HTML zu gestalten.

10 Jahre später war CSS auf dem Weg zur vollständigen Akzeptanz durch eine neu begeisterte Web-Community. *W**as geschah auf dem Weg dorthin?*

Die Suche nach einer Styling-Sprache

Es gab viele Ideen, wie das Web theoretisch gestaltet werden könnte. Es war jedoch für Berners-Lee keine Priorität, da seine Arbeitgeber am CERN am meisten an dem Web als digitalem Mitarbeiterverzeichnis interessiert waren. Stattdessen erhielten wir von Entwicklern aus der Community, insbesondere von Pei-Yuan Wei, Andreesen und Håkon Wium Lie, einige konkurrierende Sprachen für die Gestaltung von Webseiten.

Nehmen wir Pei-Yuan Wei, der 1991 den grafischen ViolaWWW Browser entwickelte. Er integrierte seine eigene Stylesheet-Sprache direkt in seinen Browser, mit dem Ziel, diese Sprache zu einem offiziellen Standard für das Web zu machen. Dies erreichte er nie ganz, aber er lieferte wichtige Inspirationen für andere potenzielle Spezifikationen.

In der Zwischenzeit verfolgte Andreessen in seinem eigenen Browser, Netscape Navigator, einen anderen Ansatz. Anstatt eine eigenständige Sprache für den Stil einer Website zu entwickeln, erweiterte er einfach HTML um präsentationsorientierte, nicht standardisierte HTML-Tags, mit denen Webseiten gestaltet werden konnten. Leider dauerte es nicht lange, bis Webseiten ihren semantischen Wert verloren und so aussahen

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>

Programmierer erkannten schnell, dass dieser Ansatz nicht lange Bestand haben würde. Es gab viele Ideen für Alternativen. Zum Beispiel RRP, eine Stylesheet-Sprache, die Abkürzungen und Kürze bevorzugte, oder PSL96, eine Sprache, die tatsächlich Funktionen und bedingte Anweisungen erlaubte. Wenn Sie daran interessiert sind, wie diese Sprachen aussahen, hat Zach Bloom einen ausgezeichneten Deep Dive in mehrere konkurrierende Vorschläge geschrieben.

Aber die Idee, die die Aufmerksamkeit aller auf sich zog, wurde erstmals im Oktober 1994 von Håkon Wium Lie vorgeschlagen. Sie hieß Cascading Style Sheets, oder kurz CSS.

Warum wir CSS verwenden

CSS stach hervor, weil es einfach war, besonders im Vergleich zu einigen seiner frühesten Konkurrenten.

window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%

CSS ist eine deklarative Programmiersprache. Wenn wir CSS schreiben, sagen wir dem Browser nicht genau, wie eine Seite gerendert werden soll. Stattdessen beschreiben wir die Regeln für unser HTML-Dokument eine nach der anderen und überlassen es den Browsern, das Rendering zu übernehmen. Bedenken Sie, dass das Web hauptsächlich von Amateurprogrammierern und ambitionierten Hobbyisten erstellt wurde. CSS folgte einem vorhersehbaren und vielleicht noch wichtiger, einem fehlerverzeihenden Format, und praktisch jeder konnte es lernen. Das ist ein Merkmal, kein Fehler.

CSS war jedoch auf eine besondere Weise einzigartig. Es ermöglichte das Kaskadieren von Stilen. Es steckt schon im Namen: Cascading Style Sheets (Kaskadierende Stilblätter). Die Kaskade bedeutet, dass Stile andere Stile, die zuvor deklariert wurden, erben und überschreiben können, wobei einer ziemlich komplizierten Hierarchie, die als Spezifität bekannt ist, gefolgt wird. Der Durchbruch war jedoch, dass es mehrere Stylesheets auf derselben Seite ermöglichte.

Sehen Sie den obigen Prozentwert? Das ist tatsächlich ein ziemlich wichtiger Punkt. Lie glaubte, dass sowohl Benutzer als auch Designer Stile in separaten Stylesheets definieren würden. Der Browser könnte dann als eine Art Vermittler zwischen beiden fungieren und die Unterschiede aushandeln, um eine Seite zu rendern. Dieser Prozentsatz gibt an, wie viel Verantwortung dieses Stylesheet für eine Eigenschaft übernimmt. Je weniger Verantwortung, desto wahrscheinlicher war es, dass es von Benutzern überschrieben wurde. Als Lie CSS zum ersten Mal vorführte, zeigte er sogar einen Schieberegler, mit dem er zwischen benutzerdefinierten und entwicklerdefinierten Stilen im Browser wechseln konnte.

Dies war in den frühen Tagen von CSS eine ziemlich große Debatte. Einige glaubten, dass Entwickler die volle Kontrolle haben sollten. Andere, dass der Benutzer die Kontrolle haben sollte. Am Ende wurden die Prozentsätze zugunsten klar definierter Regeln entfernt, welche CSS-Definitionen andere überschreiben würden. Jedenfalls ist das der Grund, warum wir Spezifität haben.

Kurz nach der Veröffentlichung seines ursprünglichen Vorschlags fand Lie einen Partner in Bert Bos. Bos hatte den Argo-Browser entwickelt und dabei seine eigene Stylesheet-Sprache geschaffen, von der Teile schließlich in CSS einflossen. Die beiden begannen, eine detailliertere Spezifikation auszuarbeiten und wandten sich schließlich an die neu geschaffene HTML-Arbeitsgruppe des W3C, um Hilfe zu erhalten.

Es dauerte einige Jahre, aber bis Ende 1996 hatte sich das obige Beispiel verändert.

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h1 {
  font-size: 24px;
}

CSS war da.

Das Problem mit Browsern

Während CSS noch ein Entwurf war, hatte Netscape mit präsentationsorientierten HTML-Elementen wie multicol, layer und dem gefürchteten blink-Tag weitergemacht. Internet Explorer hingegen hatte begonnen, Teile von CSS zu integrieren. Aber ihre Unterstützung war lückenhaft und manchmal fehlerhaft. Das bedeutete, dass selbst fünf Jahre nach der offiziellen Empfehlung von CSS Anfang der 2000er Jahre immer noch keine Browser volle CSS-Unterstützung hatten.

Das kam von einer seltsamen Stelle.

Als Tantek Çelik 1997 zu Internet Explorer für Macintosh kam, war sein Team ziemlich klein. Ein Jahr später wurde er zum leitenden Entwickler der Rendering-Engine ernannt, während sein Team halbiert wurde. Der Fokus von Microsoft lag (aus offensichtlichen Gründen) auf der Windows-Version von Internet Explorer, und das Macintosh-Team wurde weitgehend sich selbst überlassen. Also Ab der Entwicklung von Version 5 im Jahr 2000 beschlossen Çelik und sein Team, ihren Fokus dorthin zu legen, wo niemand sonst war: auf CSS-Unterstützung.

Das Team brauchte zwei Jahre, um Version 5 fertigzustellen. Während dieser Zeit sprach Çelik häufig mit Mitgliedern des W3C und Webdesignern, die seinen Browser nutzten. Mit jedem Schritt, der passte, verifizierte das IE-für-Mac-Team an allen Fronten, dass sie alles richtig machten. Schließlich, im März 2002, lieferten sie Internet Explorer 5 für Macintosh aus. Der erste Browser mit voller Unterstützung für CSS Level 1.

Doctype Switching

Aber denken Sie daran, die Windows-Version von Internet Explorer hatte CSS mit mehr als ein paar Fehlern und einem fehlerhaften Box-Modell in ihren Browser integriert, das beschreibt, wie Elemente berechnet und dann gerendert werden. Internet Explorer enthielt Attribute wie border und padding innerhalb der Gesamtbreite und -höhe eines Elements. Aber IE5 für Mac und die offizielle CSS-Spezifikation forderten, dass diese Werte zur Breite und Höhe hinzugefügt werden. Wenn Sie jemals mit box-sizing herumgespielt haben, wissen Sie genau, was der Unterschied ist.

Çelik wusste, dass diese Unterschiede beigelegt werden mussten, damit CSS funktionieren konnte. Seine Lösung kam nach einem Gespräch mit dem Standard-Befürworter Todd Fahrner. Es nennt sich Doctype Switching und funktioniert so.

Wir alle kennen Doctype. Sie stehen ganz oben in unseren HTML-Dokumenten.

<!DOCTYPE html>

Aber früher sahen sie so aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Das ist ein Beispiel für einen standardkonformen Doctype. Das //W3C//DTD HTML 4.0//EN ist der entscheidende Teil. Wenn ein Webdesigner dies zu seiner Seite hinzufügte, wusste der Browser, dass er die Seite im „Standards-Modus“ rendern sollte, und CSS würde der Spezifikation entsprechen. Wenn der Doctype fehlte oder ein veralteter verwendet wurde, wechselte der Browser in den „Quirks-Modus“ und rendert die Dinge gemäß dem alten Box-Modell und mit alten Fehlern. Einige Designer entschieden sich sogar bewusst dafür, ihre Seite in den Quirks-Modus zu versetzen, um das ältere (und falsche) Box-Modell zurückzubekommen.

Eric Meyer, der manchmal als Pate von CSS bezeichnet wird, hat erklärt, dass Doctype Switching CSS gerettet hat. Er hat wahrscheinlich Recht. Wir würden immer noch Browser verwenden, die mit alten CSS-Fehlern vollgestopft sind, wenn es diesen einen, einfachen Trick nicht gäbe.

Der Box-Model-Hack

Es gab noch eine letzte Sache zu klären. Doctype Switching funktionierte in modernen Browsern bei älteren Websites gut, aber das Box-Modell war in älteren Browsern (insbesondere Internet Explorer) für neuere Websites immer noch unzuverlässig. Hier kommt der Box Model Hack ins Spiel, ein cleverer Trick von Çelik, der ein wenig genutztes CSS-Attribut namens voice-family ausnutzte, um Browser zu täuschen und mehrere Breiten und Höhen in derselben Klasse zu ermöglichen. Çelik wies Autoren an, ihre alte Box-Model-Breite zuerst einzugeben, dann den Tag in einem kleinen Hack mit voice-family zu schließen, gefolgt von ihrer neuen Box-Model-Breite. So etwa

div.content { 
  width: 400px; 
  voice-family: ""}""; 
  voice-family: inherit;
  width: 300px;
}

Voice-family wurde in älteren Browsern nicht erkannt, akzeptierte aber einen String als Definition. Durch Hinzufügen eines zusätzlichen } schlossen ältere Browser die CSS-Regel einfach ab, bevor sie überhaupt zur zweiten Breite gelangten. Es war einfach und effektiv und ermöglichte vielen Designern, schnell mit neuen Standards zu experimentieren.

Die Pioniere des standardbasierten Designs

Internet Explorer 6 wurde 2001 veröffentlicht. Er wurde schließlich zu einem großen Dorn im Auge für Webentwickler auf der ganzen Welt, aber er wurde mit ziemlich beeindruckender CSS- und Standardunterstützung ausgeliefert. Nicht zu vergessen sein Marktanteil von rund 80 %.

Die Bühne war bereitet, die Teile waren vorhanden. CSS war bereit für die Produktion. Jetzt mussten die Leute es nur noch benutzen.

In den 10 Jahren, in denen das Web ohne eine kohärente oder standardisierte Styling-Sprache auf dem Weg zur Allgegenwärtigkeit war, hatten Designer nicht aufgehört zu designen. Überhaupt nicht. Stattdessen verließen sie sich auf einen Rückstand an Browser-Hacks, tabellenbasierten Layouts und eingebetteten Flash-Dateien, um etwas Stil hinzuzufügen, wenn HTML es nicht konnte. Standardkonformes, CSS-basiertes Design war Neuland. Was das Web brauchte, waren Pioniere, die einen Weg ebnen.

Was sie bekamen, waren zwei größere Neugestaltungen nur wenige Monate auseinander. Die erste von Wired, bald gefolgt von ESPN.

Douglas Bowman war für das Webdesign-Team des Magazins Wired verantwortlich. Im Jahr 2002 schauten sich Bowman und sein Team um und sahen, dass keine großen Websites CSS in ihren Designs verwendeten. Bowman fühlte sich fast verpflichtet gegenüber einer Web-Community, die von Wired als Beispiel für Best Practices angesehen wurde, ihre Website mit dem neuesten, standardkonformen HTML und CSS neu zu gestalten. Er drängte sein Team, alles abzureißen und es von Grund auf neu zu gestalten. Im September 2002 schafften sie es und starteten ihre Neugestaltung. Die Seite validierte sogar.

ESPN veröffentlichte seine Website wenige Monate später und verwendete viele der gleichen Techniken in noch größerem Umfang. Diese Websites setzten stark auf CSS, eine Technologie, von der einige dachten, sie würde vielleicht nicht einmal überleben. Aber es zahlte sich in großem Stil aus. Wenn Sie einen der Entwickler, die an diesen Neugestaltungen arbeiteten, beiseite genommen hätten, hätten sie Ihnen eine lange Liste von Hauptvorteilen genannt. Leistungsfähiger, schnellere Designänderungen, einfacher zu teilen und vor allem gut für das Web. Wired hat anfangs sogar tägliche Farbwechsel durchgeführt.

Graben Sie im Code dieser Neugestaltungen, und Sie würden sicher einige Hacks finden. Das Web existierte noch nur auf wenigen verschiedenen Monitorgrößen, daher werden Sie vielleicht feststellen, dass beide Websites eine Kombination aus Spalten mit fester Breite und relativer und absoluter Positionierung verwendeten, um ein Raster einzufügen. Bilder wurden anstelle von Text verwendet. Aber diese Websites legten den Grundstein für das, was als nächstes kam.

CSS Zen Garden und das semantische Web

Im folgenden Jahr, 2003, veröffentlichte Jeffrey Zeldman sein Buch Designing with Web Standards, das zu einer Art Handbuch für Webdesigner wurde, die auf standardbasiertes Design umsteigen wollten. Es löste eine Flut von CSS-Techniken und -Tricks aus, die Webdesignern halfen, sich vorzustellen, was CSS leisten könnte. Ein Jahr später startete Dave Shea die CSS Zen Garden, die Designer ermutigte, eine einfache HTML-Seite zu nehmen und sie nur mit CSS anders zu gestalten. Die Seite wurde zu einer Leistungsschau der neuesten Tipps und Tricks und überzeugte viele davon, dass es Zeit für Standards war.

Langsam, aber sicher baute sich die Dynamik auf. CSS entwickelte sich weiter und fügte neue Attribute hinzu. Browser rissen sich darum, die neuesten Standards zu implementieren, und Designer und Entwickler fügten ihrem Repertoire neue Tricks hinzu. Und schließlich wurde CSS zur Norm. Als wäre es schon immer da gewesen.

Mögen Sie die Geschichte des Webs? Jay Hoffmann hat einen wöchentlichen Newsletter namens The History of the Web, für den Sie sich hier anmelden können.