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
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.
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.
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.
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