Tipps und Tricks Info und CSS

Die Beispiele in diesem Kapitel sollen Ihnen helfen, robuste und trotzdem flexible Stylesheets zu schreiben. Sie finden hier eine Reihe von Lösungen, die Ihnen die tägliche Arbeit mit CSS erleichtern sollen. Zu Beginn befassen wir uns mit der Suche nach und Vermeidung von Fehlern sowie mit den verschiedenen Möglichkeiten, Ihr Design mit möglichst vielen Browsern und...

Überprüfen, ob ein Stylesheet gültig ist

Sie möchten wissen, ob Ihre Stylesheet-Regeln der CSS 2.1- bzw. CSS3-Spezifikation entsprechen, um Syntax- und andere Fehler von vornherein ausschließen zu können. Zunächst sollten Sie Ihre CSS-Regeln prinzipiell validieren. Das gilt auch, wenn das Stylesheet scheinbar korrekt funktioniert. Das World Wide Web Consortium stellt extra zu diesem Zweck einen Online-Validator...

Ein Design auf mehreren Plattformen testen

Sie möchten Ihr Webdesign auf möglichst vielen Browser- und Systemplattformen testen. Die aktuellen Browserversionen können Sie sich meist von den Webseiten der Hersteller herunterladen. Verwenden Sie eine Screenshot-Website wie beispielsweise Browsershots. Hier können Sie Ihre Website mit einer Vielzahl von Kombinationen aus Betriebssystem und Browser aufrufen...

Browser-Erweiterungen zur Fehlersuche

Sie möchten wissen, welche Browsererweiterungen es für die Fehlersuche gibt. Die meisten gängigen Browser bringen inzwischen eigene Entwicklerwerkzeuge mit, die teilweise aber noch aktiviert werden müssen. Mit diesen Programmerweiterungen können Sie den HTML-Quellcode, Stylesheets, das DOM, JavaScript-Programme, Ladezeiten und andere Dinge inspizieren. Teilweise lassen...

Bekannte Browser-Bugs und CSS-Probleme

Sie möchten wissen, welcher Browser ab welcher Version eine bestimmte CSS-Eigenschaft unterstützt. Außerdem wollen Sie herausfinden, welche Probleme bestimmte Browser mit der Interpretation von CSS haben und wie diese erkannt und bestenfalls gelöst werden können. Schauen Sie in die Tabellen auf den einschlägigen Websites, um sich die nötigen Informationen zu...

Websites mit einem Textbrowser testen

Eine Website soll mit einem textbasierten Browser getestet werden. Verwenden Sie ein Onlinewerkzeug wie zum Beispiel Lynx Viewer. Damit das Werkzeug korrekt funktioniert, müssen Sie im Wurzelverzeichnis Ihres Webservers eine Datei mit dem Namen delorie.htm anlegen. Damit teilen Sie der Applikation Ihr Einverständnis zur Abfrage und Darstellung Ihrer Site mit. Danach...

Die richtige Zeichenkodierung UTF-8 angeben

Sie möchten wissen, welche Textkodierung Sie für Ihre Stylesheets (und HTML-Dateien) verwenden sollen. Nehmen Sie nach Möglichkeit die Textkodierung UTF-8. Auf diese Weise haben Sie die größtmögliche Sicherheit, dass die in Ihren Dokumenten verwendeten Zeichen auch tatsächlich korrekt dargestellt werden. Die meisten Text- und Codeeditorprogramme bieten...

Inhalte mit CSS erzeugen

Sie möchten Inhalte in eine Webseite einfügen, ohne hierfür den HTML-Quelltext verändern zu müssen. Das können beispielsweise Icons sein, die den Inhalt einer Seite erläutern, die Ausgabe von URIs in einem Stylesheet für Ausdrucke oder auch Zähler für nummerierte Listen. Benutzen Sie die Pseudoelemente :before und :after, um mittels der Eigenschaft content verschiedene...

Das Boxmodell anpassen mit CSS

Sie möchten selbst festlegen, ob sich Höhe und Breite eines Elements auf dessen Inhaltsbereich beziehen oder auf die Border Box. Verwenden Sie die CSS3-Eigenschaft box-sizing mit den Werten content-box bzw. border-box, wie hier gezeigt. Wie Sie sehen, erhalten zunächst alle div-Elemente die gleiche Breite und Höhe. Allerdings wird in den folgenden Regeln ein unterschiedliches...