This is my German translation of an article by Eric Meyer. The original article is at http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html . --Matthias Gutfeldt, August 2000

Dies ist meine deutsche Übersetzung eines Artikels von Eric Meyer. Der Originalartikel ist hier: http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html . --Matthias Gutfeldt, August 2000


Kochbuch für CSS-Anarchisten

by Eric Meyer
07/21/2000

Ich habe versucht zu widerstehen. Ehrlich. Normen sind eine gute Sache, und sie sollten zum Vorteil des Web benutzt werden. Ich weiss das. Aber ich war gerade bei der Lektüre von Tap the Power of Mozilla's User Stylesheets (Andrew Wooldridge, Netscape), als ich dieses merkwürdige Kitzeln im Nacken verspürte. Es war zwar meine Frau, aber trotzdem kamen mir gewisse... Gedanken. Ideen. Schlechte Ideen. Und nachdem es einmal angefangen hatte, konnte ich es nicht mehr aufhalten. Oh, ich habe es versucht. Ich habe mir immer wieder gesagt, dass CSS nicht für das Böse missbraucht werden darf. Dass es in den falschen Händen Unheil bringen würde über das Web, wie wir es kennen.

Dann dachte ich mir, was soll's, es ist ja nicht so dass man mit CSS einen Server hacken kann. Also gab ich auf und wechselte zur dunklen Seite der Macht. Nachdem das geschehen war, fühlte ich das Bedürfnis, andere in dieselbe Falle zu locken. Sicher, es ist böse, aber was kann man tun?

Also komme ich heute mit Nachrichten über Waffen von grosser Zerstörungskraft zu euch. Mit gewöhnlichen Browsern und ein bisschen Geschick können wir look-and-feel zerstören. Das Web wird nie wieder dasselbe sein. Wie können wir diese unheimliche Macht entfesseln? Mit einfachen Benutzer- Formatvorlagen. Diese scheinbar harmlosen Dateien können für folgendes benutzt werden:

...und so viel mehr.

Das Arsenal

Bist Du bereit, Unheil anzurichten? 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 4.0, vorzugsweise letzteres. Ich empfehle diese Versionen, weil sie alle Benutzer-Formatvorlagen unterstützen, was unerlässlich ist, und ausserdem weil sie alle bis zu einem gewissen Grad CSS2 unterstützen. Ausserdem benötigst Du Software um CSS zu schreiben, sei das ein Texteditor wie BBEdit oder etwas mit mehr point-and-click, wie Style Master oder TopStyle.

Die meisten Beispiele in diesem Artikel werden Mozilla M16 benutzen. Dies deshalb, weil er unter den drei erwähnten Browsern die am meisten Standards-fähige rendering engine besitzt, und üblicherweise schnell heruntergeladen ist. Ausserdem hat er dieselbe Bezeichnung wie eine bekannte militärische Waffe; diese Nähe gibt ihm einen Bonus bezüglich Gewalt und Chaos. 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. Aber sein Name klingt nicht annähernd so gewalttätig, es sei denn Du hast empfindliche Ohren. Oder hasst Pavarotti.

Mit der Waffe Deiner Wahl zur Hand, musst Du nur noch eine Benutzer-Formatvorlage erstellen, die einen oder mehrere der in der Folge vorgestellten schmutzigen Tricks enthält. Wenn Du nicht weisst wie man Benutzer-Formatvorlagen erstellt oder benutzt, lies die Hilfedateien Deines Browsers bevor Du hier weiterliest.

Ziel: FONT

Zuerst werfen wir einen Blick auf das FONT Element. Der Gebrauch des FONT Elements ist auf dem Web so üblich, dass Du diesen Trick fast nicht benutzen kannst ohne jede Seite die Du besuchst zu beeinflussen. Da FONT unnötiges präsentatives HTML ist und gar nicht existieren sollte, brauchen wir keinerlei Bedenken zu haben, es zu attackieren.

Für diejenigen, welche den FONT Inhalt zwar immer noch sehen aber ihn unwirksam machen wollen, hat mir unser Freund der Revolution Darin McGrew folgendes vorgeschlagen:

FONT { color: inherit !important;

  background: inherit !important;

 font-family: inherit !important;

   font-size: inherit !important; }
Since FONT is deprecated, why not wipe out any use of it?

Da FONT ohnehin nicht empfohlen ist, weshalb sollte man jeglichen Gebrauch nicht gleich auslöschen? (Klick für volle Grösse)

Dank den Werten von inherit wird das FONT Element von seinem parent element die Werte für color, background, die font-family, und font-size erben.

Leser mit bösartigerem Temperament und keinerlei Bedenken, manche Teile einer Webseite komplett auszuradieren, können diesen viel einfacheren Ausdruck benutzen:

FONT {display: none !important;}

Dies wird alle FONT Elemente und ihren gesamten Inhalt dazu bringen, überhaupt nicht dargestellt zu werden, so als hätten sie nie exisitert. Ist das nicht so, wie es ohnehin sein sollte?

Tabellen zerstören

Das FONT Element ist vielleicht fast überall, aber Tabellen sind noch viel schlimmer. Eine Seite zu finden die nicht Tabellen für's Layout benutzt ist eine ganz besondere Aufgabe. Die meisten Tabellen sind versteckt und benutzen Zellen ohne Ränder, Polsterung, oder Abstände zwischen Zellen, aber sie sind trotzdem da. Designer geben sich viel Mühe Tabellen genau so zu erstellen, wie sie es wollen. Wäre es nicht besonders lustig, diese sorfgältig optimierten Tabellen-Layouts komplett durcheinander zu bringen?

Der einfachste Weg ist, einfach den Inhalt der Zellen aufzublasen. Zum warm werden fangen wir hiermit an:

TH, TD {padding: 1em !important;}

Das sollte dasselbe bewirken als hätten alle Tabellen ein cellpadding von 1em, was in der Praxis etwas zwischen 10 und 15 Pixel bedeutet. Natürlich wird diese Polsterung mit der font-size jeder einzelnen Zelle variieren. Wenn Du etwas gleichmässigeres willst, kannst Du die Polsterung z.B. auf 10px setzen. Hey, mach was Du willst. Das ist einer der Vorzüge des Bösen.

Wenn Du leere Seiten magst, könntest Du das hier probieren:

TD, TH {color: white !important; background: white !important;}

Weisser Text auf weissem Hintergrund... immer ein lustiges Leseerlebnis. Das lässt nur noch die Bilder zurück, die aussehen als würden sie einfach so im leeren Raum hängen, was ein interessanter Effekt sein kann. Wenn Du auch sie wegblasen willst, wirst Du so etwas vorziehen:

TABLE {display: none !important;}

Und damit wären mindestens 95% des Web erledigt.

Obwohl diese bösartige Zerstörung Spass macht, gibt es noch heimtückischere Wege, ein Tabellen-Layout aufzumischen ohne den Inhalt unlesbar zu machen. Zum Beispiel benutzen viele Tabellen eine Ausrichtung nach links, um zerschnittene Bilder als ganz erscheinen zu lassen, oder um einen bestimmten Look zu kreieren. Das kann man auch leicht überwinden:

TD, TH {text-align: center !important;}

Alles innerhalb einer Tabelle wird jetzt zentriert sein. Du könntest die Ausrichtung nach links oder rechts verändern, und sehr verschiedene (aber dennoch störende) Resultate erhalten. Macht das nicht Spass?

Seiten: 1, 2

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