Warum CSS?

Seit der Veröffentlichung von Dreamweaver MX 2004 hatte ich verschiedene Gelegenheiten, bisherigen und neuen Benutzern von Dreamweaver die neuen Funktionen und die Leistungsfähigkeit des Programms vorzustellen. Wie immer dauerte es meist nicht lange, bevor ich die neuen Funktionen von Dreamweaver MX 2004 zum Entwerfen und Darstellen von Cascading Style Sheets CSS lobte.

Vor kurzem stellte mir ein Einsteiger jedoch eine Frage, auf die ich nicht sofort eine klare Antwort geben konnte. Der Benutzer fragte mich einfach: „Warum sollte ich CSS verwenden?“. Mir wurde in diesem Moment klar, dass für diejenigen von uns, die täglich mit HTML und CSS arbeiten, die Vorteile auf der Hand liegen, für viele von Ihnen jedoch nicht. Oder zumindest sind Ihnen vielleicht noch nicht alle Vorteile von CSS bewusst. Dieser Artikel ist meine Antwort auf die Frage dieses Benutzers.

Die Anfänge von CSS

Bevor ich einige Vorteile von CSS vorstelle, zuerst einiges zur Geschichte dieser Technologie. Das zuständige Gremium für das Web, das W3C-Konsortium, empfahl im Dezember 1996 mit der Ratifizierung der CSS Level 1-Spezifikation erstmals die Verwendung von CSS. CSS Level 1 beschrieb Attribute für die Verwendung in HTML-Seiten. Diese Attribute waren als Ersatz für die herkömmlichen font-Tags und andere reine Formatierungstags, zum Beispiel für Textfarben und Ränder, gedacht. Im Mai 1998 ratifizierte das W3C-Konsortium die CSS Level 2-Spezifikation, mit der neue Funktionen eingeführt wurden, beispielsweise Attribute für die Positionierung von Elementen. Diese Attribute sollten die weit verbreitete und inkorrekte Verbreitung des table-Tags für die Anordnung von Seitenelementen ersetzen. Die aktuellste Version von CSS ist CSS 2.1. In dieser Version wurden einige Attribute neu definiert und andere entfernt, die in aktuellen Browsern nur begrenzt oder gar nicht einsetzbar waren.

Wie leider oft bei neuen Technologien hat es lange gedauert, bis CSS größere Verbreitung fand. Das lag zum einen an den Eigenheiten bestimmter Browser und zum anderen an den Entwicklern, die Websites speziell auf diese Browser abstimmten. Als die erste Version von CSS ratifiziert wurde, war Netscape Navigator NN noch der vorherrschende Browser. Dieses Programm unterstützte damals CSS so gut wie überhaupt nicht. Microsoft fügte dem Internet Explorer mit Version 3 begrenzte CSS-Unterstützung hinzu, aber die meisten Webentwickler den Autor eingeschlossen entwickelten Webseiten immer noch mit NN als Referenzplattform.

Im Lauf der Jahre haben die Browserhersteller mit jeder neuen Version die CSS-Unterstützung erweitert. Heute unterstützen Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera und Safari alle vollständig CSS. Das heißt aber nicht, dass unsere Arbeit als Webdesigner und Entwickler jetzt völlig ohne Probleme wäre. Während alle eben erwähnten Browser CSS Level 2 unterstützen, unterscheiden sie sich doch in Bezug auf die Einhaltung der relevanten Standards. Und in einigen Fällen können die Probleme bei der Verwendung bestimmter Attribute immer noch frustrierend sein. Anders gesagt, gilt immer noch der alte Spruch: „testen, testen und nochmals testen“. Wenn Sie sich jedoch auf die grundlegenden Attribute der CSS-Spezifikationen beschränken, werden die von Ihnen erstellten Seiten in modernen Browsern korrekt angezeigt.

Aber warum hielt es das W3C-Konsortium überhaupt für nötig, die CSS-Spezifikation zu erstellen? Und was für Auswirkungen hat das auf die Erstellung HTML-basierter Websites und Applikationen? Meiner Meinung nach sind es vor allem drei Gebiete, auf denen die Notwendigkeit von CSS und die daraus resultierenden Vorteile deutlich werden: Flexibilität, Darstellung und Barrierefreiheit.

Flexibilität

Ich bin sicher, dass fast jeder Webdesigner und Entwickler schon mal den panischen Moment erlebt hat, wenn ein Kunde – nach der sorgfältigen Ausarbeitung eines Layouts mit mehreren verschachtelten Tabellen – eine „kleine“ Änderung wünscht. Das könnte etwas so einfaches sein wie „Ich hätte dieses Bild gern etwas weiter links“ oder etwas so dramatisches wie „Ich bin nicht besonders zufrieden mit diesen Kopfzeilen, könnten Sie die Schrift größer machen – und wo Sie schon mal dabei sind, auch gleich die Farbe ändern?“. Wenn es nur um wenige Seiten geht, atmen Sie tief durch und kämpfen sich vielleicht eine Stunde lang durch diese ärgerlichen Änderungen. Bei den heute üblichen größeren Sites ist eine „einfache“ Änderung jedoch plötzlich alles andere als einfach.

Was verursacht die Panik in diesen Situationen? Der Code, der das Aussehen der Seiten bestimmt, ist Teil der Seiten selbst. Schauen Sie sich doch mal eine beliebige Seite aus einer Ihrer Sites an, und zählen Sie die Anzahl der font- und table-Tags. Wenn Sie diese Codeelemente irgendwie aus dem Code der eigentlichen Seite entfernen könnten, oder noch besser, extern speichern könnten, könnten Sie diese Änderungen an einer einzigen zentralen Stelle vornehmen. Hmm, klingt wie eine passende Aufgabe für CSS.

Wenn Sie Seiten mit einem oder sogar mehreren externen Stylesheets erstellen, können Sie diese Änderungen an einer Site umsetzen, indem Sie einfach das Stylesheet ändern und dann die geänderte Version hochladen.

Stellen Sie sich einmal vor, wie schwierig es in einem herkömmlichen, tabellenbasierten Layout wäre, die Sitenavigation von der linken Seite auf die rechte Seite zu verschieben. Dafür wären Stunden eintöniger und anstrengender Arbeit nötig. Wenn Sie sich jedoch entschlossen hätten, die Positionierungsattribute von CSS für den Entwurf Ihrer Seiten zu verwenden besser bekannt als CSS-P , könnten Sie die Seite einfach ändern, indem Sie im externen Stylesheet das float- oder position-Attribut ändern. Ein weiterer Vorteil: Sie hätten gleichzeitig jede Seite in der Site aktualisiert, in der dieses Stylesheet verwendet wird!

Darstellung

Seit der zunehmenden Verbreitung von Breitbandanschlüssen denken viele Entwickler nicht mehr darüber nach, wie lange es dauert, eine Seite im Browser auszugeben. Sie sollten jedoch bedenken, dass es immer noch viele Benutzer in Ihrer Zielgruppe gibt, die sich über ein Modem ins Internet einwählen. Einer der Hauptgründe für langsam ausgegebene Seiten sind die herkömmlichen, tabellenbasierten Layouts. Dies liegt daran, dass der Browser beim Empfang der Seite zuerst die komplex verschachtelte Tabellenstruktur analysieren muss. Zuerst muss dabei das am tiefsten verschachtelte Inhaltselement gefunden werden. Dann werden nach und nach alle weiter „außen“ liegenden Ebenen bis zum obersten Container, dem body-Tag, durchlaufen. Erst nach Abschluss dieses Vorgangs kann der Browser mit der Darstellung des Inhalts auf dem Bildschirm beginnen.

Wenn Sie hingegen CSS verwenden, kann der Browser sofort bei Erhalt der Seite mit der Darstellung beginnen, da wenig oder kein Layout- und Formatierungscode in der Seite enthalten ist.

Externe Stylesheets bieten aber noch einen weiteren Vorteil. Bei der herkömmlichen, tabellenbasierten Herangehensweise muss der Browser jede Seite einzeln abrufen, analysieren und ausgeben. Anders gesagt, muss der Browser für die 30. Seite in einer Site genauso hart arbeiten wie bei der ersten Seite.

Wenn die Site hingegen externe Stylesheets für die Darstellung verwendet, kann der Browser schon bei der ersten Seite die verknüpften Stylesheet-Dateien zwischenspeichern. Das heißt, alle folgenden Seiten, bei denen dieselben Stylesheets verwendet werden, werden schneller geladen, da der Browser die Stylesheets zwischengespeichert hat.

Der letzte Vorteil bei der Ausgabe und Darstellung von Webseiten erinnert mich an den Film „Amadeus“. Mozart fragt in diesem Film den Kaiser, was dieser von einer seiner Opern hält. Der Kaiser erwidert, dass sie gut sei, aber ermüdend. Als Mozart nach dem Grund fragt, erklärt der Kaiser, das Problem liege einfach darin, dass es „zu viele Noten“ gebe. In Bezug auf Webdesign kann dies ebenfalls ein Problem darstellen – wobei die Noten der eigentliche HTML-Code sind. Je mehr Code eine Seite enthält, desto länger benötigt der Browser, um die Seite zu analysieren.

Sie haben bestimmt gehört, dass einige Office-Anwendungen bekannt dafür sind, schlechten Code zu produzieren, voller überflüssiger Informationen, die keinen Bezug zur Darstellung der Seite haben. Und obwohl dieses Problem Sie als Dreamweaver-Anwender nicht betrifft, haben Sie vielleicht bisher auch „zu viele Noten“ verwendet. Das typische tabellenbasierte Layout ist ein gutes Beispiel für dieses Problem.

Durch die Implementierung von CSS in Ihren Designs können Sie die Menge an Code reduzieren, die der Client herunterladen muss. Allein schon das Entfernen aller font-Tags aus einer Seite kann die Menge an Code drastisch reduzieren. Und wenn Sie nur noch mit CSS-P-Layouts arbeiten, können Sie den Code in vielen Fällen um 50 % oder mehr reduzieren! Weniger Code bedeutet schnelleres Herunterladen der Seiten.

Barrierefreiheit

Heutzutage taucht immer wieder der Begriff „Barrierefreiheit“ auf. Die meisten Entwickler wissen, dass sie langsam über Lösungen für barrierefreies Webdesign nachdenken sollten. Zum größten Teil mussten bisher jedoch nur die Entwickler, die Sites für Behörden oder Bildungseinrichtungen entwerfen, tatsächlich barrierefreie Lösungen erarbeiten. Viele Entwickler gehen davon aus, dass Barrierefreiheit sich im Wesentlichen darauf beschränkt, Bildern alt-Attribute hinzuzufügen. Tatsächlich gehört aber viel mehr zu einer barrierefreien Website, und der Einsatz von CSS kann den Entwurf barrierefreier Sites erheblich vereinfachen.

Eine der wichtigsten Fragen im Zusammenhang mit Barrierefreiheit liegt darin, wie eine Bedienhilfe, beispielsweise ein Bildschirmleser, eine Seite „liest“ – und hier kann die Verwendung von CSS wirklich einen Unterschied machen. Bei herkömmlichen, tabellenbasierten Layouts ist es für einen Bildschirmleser unglaublich schwer, eine Seite zu lesen. Stellen Sie sich einmal vor, wie verwirrend eine mehrfach verschachtelte Tabelle für den Bildschirmleser sein muss – soll der Inhalt gelesen oder besser übersprungen werden? Und wenn die Tabelle übersprungen wird, wie kann der Inhalt später ausgelesen werden?

Beim Aufrufen einer Seite können Sie schnell die Stelle auf der Seite finden, die Sie interessiert, wobei Sie die Navigation oder andere Inhalte am oberen Rand der Seite ignorieren. Für einen sehbehinderten Menschen ist dies ungleich schwerer. Er muss warten, bis der Bildschirmleser alle überflüssigen Informationen zwischen dem oberen Rand der Seite und den eigentlich wichtigen Inhalten verarbeitet hat.

Natürlich gibt es Methoden, um den Bildschirmleser zu veranlassen, Navigationselemente zu überspringen, aber dafür ist es im Allgemeinen nötig, Bildern in der Menüleiste oder anderen Inhalten Hyperlinks hinzuzufügen. Obwohl diese Methoden funktionieren, können Sie den Benutzer auch verwirren; zudem können sehende Benutzer diese Hyperlinks ebenfalls sehen. Mithilfe von CSS können Sie vollständig unsichtbare Elemente auf der Seite definieren – Elemente, die andere Benutzer nicht sehen und auf die der Mauszeiger nicht reagiert. Ein Bildschirmleser kann mit diesen Elementen jedoch schnell und effektiv durch das Dokument navigieren.

Da beim Einsatz von CSS kaum noch Code für die Darstellung in einer Seite enthalten ist, muss der Bildschirmleser nur noch „echte“ Inhalte verarbeiten. Darüber hinaus konzentrieren Sie sich beim Einsatz von CSS-P zunehmend auf den tatsächlichen „Fluss“ der Inhalte. Sie werden mehr und mehr auf die logische Anordnung von Inhalten achten.

Beim Lesen dieses Dokuments sind Sie dem „Fluss“ der Informationen gefolgt. Bei dem Beispiel mit den verschachtelten Tabellen könnte dieser Absatz ohne weiteres auch in der oberen rechten Ecke der Seite stehen. In diesem Fall hätte der Bildschirmleser keine Möglichkeit zu ermitteln, dass dieser Teil erst am Ende des Artikels gelesen werden soll.

Mit CSS-P könnte der Browser diesen Teil ebenfalls in der oberen rechten Ecke des Browserfensters anzeigen, die tatsächliche Position des Absatzes im HTML-Code wäre jedoch weiterhin am Ende des Dokuments. Auf diese Weise können Sie den Zugang zu Ihren Sites erheblich verbessern und vereinfachen.

Abschließende Gedanken und nächste Schritte

So, das war meine Antwort. Ich hoffe, ich konnte Ihnen einige der einzigartigen Vorteile von CSS näher bringen. Es gibt sicher viel zu lernen. Sehen Sie sich doch mal die anderen großartigen Artikel zum Thema CSS hier im Macromedia Developer Center an, mit denen Sie Ihr Verständnis von CSS weiter vertiefen können und in denen die Implementierung von CSS in Ihren Designs genau erläutert wird. In den kommenden Wochen und Monaten werde ich Ihnen weitere CSS-Tutorials präsentieren. Bis dahin – viel Spaß beim Ausprobieren von CSS!