HomeKontaktImpressum
Sie sind hier: Home

Integration von Stylesheets

Direkt mit der Internetseite ausgeliefert, reduziert eingebetteter CSS-Code die Latenzzeit von Seitenanfragen. Auch kann die Seite umgehend korrekt gerendert werden – vorbei ist das Zucken und Ruckeln beim Ladevorgang. In gewissen Fällen spricht einiges für die Einbettung von Cascading Stylesheets. Aber längst nicht immer sollte diese Technik angewandt werden.

Neben dem Einbetten von JavaScript-Code bringt auch die Integration von Cascading Stylesheets (CSS) in eine Internetseite Vorteile mit sich. Gerade bei relativ spartanisch gestalteten Internetseiten, die mit wenigen Anweisungen zur optischen Gestaltung auskommen, sind die Stylesheet-Angaben nicht sonderlich groß. In solchen Fällen, bei denen eine extern eingebundene CSS-Datei lediglich einige hundert Bytes umfasst, sollte eine Einbettung erfolgen.

Einen positiven Effekt auf die Usability erreicht man durch die Integration allemal. Schließlich wird – für den Fall, dass die CSS-Angaben bereits im Header der Internetseite enthalten sind – der Browser noch vor Auslieferung des Seiteninhalts über die Formatierung, Position und Ausrichtung von Seitenelementen informiert. Hierdurch lässt sich das störende Hin- und Herspringen von Seitenelementen, welches während des Ladevorgangs bei vielen Websites auftritt, verhindern.

Da viele Homepage-Layouts nur unter Angabe zahlreicher Extrawürste – in Form von CSS-Hacks – auf allen Browsern zu einer korrekten Darstellung führen, findet man häufig Internetseiten, bei denen gleich eine ganze Reihe von externen CSS-Dateien eingebaut wurden. Die dort abgelegten Angaben zur Formatierung der Websites enthalten dann etwa je Datei unterschiedliche Formatierungsanweisungen für bestimmte Browseranwendungen. Zur Vermeidung unnötiger HTTP-Requests, die sich bekanntlich negativ auf die Latenzzeit auswirken, sollte aber nach Möglichkeit nur eine Stylesheet-Datei eingebunden werden. Diese kann alle für das Layout unter den unterschiedlichen Browseranwendungen nötigen Informationen vereinen.

Auch werden oft für unterschiedliche Ausgabegeräte – z.B. zur Ausgabe auf dem Monitor oder dem Drucker – separate Stylesheet-Dateien angeboten. Diese Vorgehensweise führt wiederum dazu, dass alle enthaltenen Stylesheet-Dateien heruntergeladen werden, was auch hier wieder bedeutet, dass weitere Requests an den Webserver geschickt werden. Dabei können auch in diesem Fall sämtliche Informationen zum Layout auf unterschiedlichen Medien in einer Datei untergebracht werden.

Grundsätzlich sollte im Zuge des Webdesign darauf geachtet werden, dass die Angaben zur Formatierung und zum Layout einer Website möglichst kompakt gehalten werden. Hierzu sollte ein grundlegendes Design auch ohne Verwendung von Stylesheet-Hacks auf den meisten Browsern – vorzugsweise solchen, die sich relativ stark an den gegebenen Standards orientieren – funktionieren. Auf Basis dieses Designs müssen dann nur noch wenige Ausnahmen als browserspezifische Hacks eingefügt werden.

In diesem Zusammenhang spielt auch die Struktur der zugrunde liegenden HTML-Dateien eine wichtige Rolle. Es ist immer erstrebenswert, dass möglichst wenige Seitenelemente in der ausgelieferten HTML-Seite enthalten sind. Je weniger Elemente eine Internetseite enthält, desto geringer ist auch die Zahl der Vorschriften bezüglich des Layouts in den CSS-Angaben.

Während der Erstellung eines grundlegenden Designs für eine Website fördert eine strukturierte Formatierung der CSS-Quelldateien die Übersichtlichkeit und erleichtert deren Wartung. Darüber hinaus helfen enthaltene Kommentare innerhalb der Formatierungsvorschriften bei der späteren Anpassung des Layouts. Auf dem Produktivsystem sollten derartige Informationen – die schnell mehr Speicherplatz benötigen als die eigentlichen Angaben zu Formatierung – allerdings nicht landen. Wie bei Script-Dateien sollten auch bei Cascading Stylesheets alle Kommentare und unnötigen Leerzeichen oder Tabulatoren entfernt werden.

Weitere Informationen zum Thema finden sich unter Kontra CSS-Einbettung, wo es um Anwendungsfälle geht, die gegen eine Einbettung sprechen.

  
© 2009-2017 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website