This is the German translation of an article by Eric Meyer. The URL of the original article is given as an appropriate LINK element in the head of this document. For the benefit of browsers that don't support the LINK element, here is the URL: http://www.oreillynet.com/pub/a/300

Dies ist die deutsche Übersetzung eines Artikels von Eric Meyer. Die URL des Originalartikels ist als LINK Element in Kopfteil dieses Dokumentes angegeben. Für Browser, welche das LINK Element nicht unterstützen, steht hier noch einmal die URL: http://www.oreillynet.com/pub/a/300


Published on July 21, 2000
Übersetzt im Januar 2001

CSS als Diagnose-Werkzeug

by Eric Meyer
07/21/2000

Artikel zum Thema:
Kochbuch für CSS-Anarchisten (deutsch).

What Makes CSS So Great?
(oreillynet, englisch)

Trotz all der point-and-click Editoren da draussen schreiben viele von uns den Quelltext noch von Hand, und noch häufiger müssen wir das bearbeiten, was andere Autoren (oder der point-and-click Editor) geschrieben haben. Die Schwachstellen und die Struktur einer Seite herauszufinden ist oft eine der zeitaufwendigsten Arbeiten, die ein Webmaster zu bewältigen hat. Und seien wir ehrlich, Spass macht's auch nicht gerade.

Was würdest Du davon halten wenn ich Dir sage, dass Du Deine eigenen Diagnose- Werkzeuge herstellen kannst, mit nicht viel mehr als allgemein verfügbarer Software, die Du übers Internet herunterladen kannst, und ein bisschen einfachem CSS? Vermutlich würdest Du sagen, ich sei verrückt. Vielleicht hast Du recht; ich aber auch. Du kannst mit der richtigen Kombination von Browser und recht einfachem CSS wirklich viel Zeit und Kopfschmerzen sparen.

Wie geht das? Wie wir sehen werden, kann man einfache Benutzer-Stylesheets verwenden um

Die Inspiration für diesen Ansatz kam mir nach der Lektüre des ausgezeichneten Artikels Tap the Power of Mozilla's User Stylesheets von Andrew Wooldridge von, Netscape. Nachdem mir Andrew erst einmal gezeigt hatte wie, entwickelte sich der Rest von selbst.

Die Werkzeugkiste auffüllen

Zunächst einmal brauchst Du einen oder mehrere der folgenden Browser: Mozilla, vorzugsweise M16 oder neuer, Microsoft Internet Explorer 5.0 oder neuer für Windows oder Macintosh, vorzugsweise die aktuellste verfügbare Version; und Opera 3.6 oder neuer, vorzugsweise 4.0 oder die aktuellste verfügbare Version. Ich benutze diese Versionen, weil sie alle Benutzer-Formatvorlagen unterstützen, was praktisch ist, und ausserdem weil sie alle bis zu einem gewissen Grad CSS2 unterstützen. Du benötigst ausserdem noch Software um CSS zu schreiben, entweder einen Texteditor wie BBEdit oder etwas eher point-and-click-artiges, wie Style Master oder TopStyle.

Die meisten Beispiele in diesem Artikel werden Mozilla M16 benutzen. Der Grund dafür ist, dass er von allen drei erwähnten Browsern die Normen am besten unterstützt, und schnell heruntergeladen ist. Opera 4 ist vergleichbar, wenn nicht sogar besser als Mozilla in Bezug auf Downloadgrösse und Standardtreue, und ist sicherlich eine lohnende Ausgabe, wenn Du für einen standardfähigen Browser Geld ausgeben willst. In jedem Abschnitt, nachdem ich Dir gezeigt habe wie man eine bestimmte Diagnose vornimmt, werde ich erwähnen ob der Code den ich benutze in anderen Browsern nicht funktionieren wird, oder wie man ihn verändern muss, damit er funtioniert.

Tabellenstruktur enthüllen

Dieser hier ist ziemlich einfach, und er funktioniert mit allen Browsern in deinem Werkzeugkasten. Es wird mir auch die Gelegenheit geben, auf die Gründe für manche Konventionen für diese Werkzeuge einzugehen.

Wolltest Du jemals sehen, wie eine Tabelle strukturiert ist? Vielleicht hast Du für den Moment einen Rahmen um die Tabelle gelegt um besser zu sehen, wie die Tabelle aufgebaut ist. Das funktioniert natürlich für lokale Dateien, aber es hilft nicht dabei, Dateien auf einem anderen Server zu erforschen. Wäre es nicht toll, wenn Du eine Art "Anzeigefilter" hättest, welcher die Struktur von Tabellen auf jeder Seite die Du siehst anzeigst? Nun, dieser Code lässt Dich das tun:


TABLE {border: 2px solid purple !important;
margin: 5px !important; border-collapse:
separate !important; border-spacing: 1px !important;
empty-cells: show !important;}
TH {border: 1px solid blue !important;
padding: 3px !important;}
TD {border: 1px solid red !important;
padding: 3px !important;}

Natürlich kannst Du die Farben und Rahmenformatierungen ganz nach Deinem Geschmack ändern.

Figure 1. You can view the table structure without having edit access to the HTML file.
Abbildung 1. Du kannst die Tabellenstruktur ohne Schreibzugriff auf die HTML-Datei sehen.(Klick für grössere Ansicht).

Wie wir in Abbildung 1 sehen, ist die Tabellenstruktur zu unserem Gebrauch jetzt sichtbar gemacht.. Manchmal machen es verschachtelte Tabellen schwierig, die Details zu erkennen, deshalb haben wir einen fünf Pixel breiten Zwischenraum um Tabellen gelegt.

Okay, und wie funktioniert das? Zunächst einmal musst Du eine externe Formatvorlage mit den obigen Regeln erstellen. Speichere es in einer Datei mit dem Namen TableOutline.css oder ähnlich, und richte dann dieses File als Deine benutzerdefinierte Formatvorlage ein. (Das erledigt man meistens in den Browser-Einstellungen; lies das Helpfile Deines Browsers für mehr Details).

Wir haben also TABLE Elemente so eingestellt, dass sie einen zwei Pixel breiten Rahmen haben, und einen Zwischenraum von fünf Pixeln um sie herum. Tabellen-Kopfzeilen erhalten einen ein Pixel breiten blauen Rahmen, und normale Tabellenzellen erhalten einen ein Pixel breiten roten Rahmen. Was sollen eigentlich die "!important" Regeln? Diese stellen sicher, dass die benutzerdefinierten Formatvorlagen berücksichtigt werden. In CSS2 haben solche wichtigen Leserformatierungen immer Vorrang vor allem anderen, auch vor wichtigen Autorenvorlagen.

Möglicherweise sind diese Rahmen in manchen Situationen etwas schwierig zu sehen. In dem Fall könnten wir einfach die Hintergrundfarben festlegen, etwa so:

TABLE {background: purple !important;
margin: 5px !important; border-collapse:
separate !important; border-spacing: 1px
!important; empty-cells: show !important;}
TR {background-color: gray !important;}
TH {background-color: purple !important;}
TD {background-color: red !important;}
TR, TD, TH {padding: 5px;}

Diese Vorlage könnten wir zum Beispiel "TableCellback.css" nennen. Und wie üblich liegt es an Dir, die Farben Deinen Vorliegen anzupassen. Ich habe sie mehr oder weniger zufällig ausgewählt.

Seiten: 1, 2


Copyright © 2000 O'Reilly and Associates, Inc. All Rights Reserved.