This is the second part of 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?page=2 .
--Matthias Gutfeldt, August 2000

Dies ist der zweite Teil 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?page=2 .
--Matthias Gutfeldt, August 2000


Kochbuch für CSS-Anarchisten

Eric Meyer | Seiten: 1, 2

Werbebanner eliminieren

Hast Du genug von blinkenden, animierten, nervigen Werbebannern? Willst Du gegen die kapitalistische Hegemonie protestieren? Bist einfach nur schlecht drauf? Hier ist Deine Chance zurückzuschlagen, indem Du die normierten Werbebanner, welche Du auf so vielen Seiten siehst, einfach wegfilterst.

Zunächst einmal müssen wir wissen, dass die meisten dieser Banner eine bestimmte Grösse haben: 60 Pixel hoch mal 468 Pixel breit. Das sind die idealen Voraussetzungen, um sie zu eliminieren. So geht's:

IMG[height="60"][width="468"], IMG[height="60px"][width="468px"]

   {display: none !important;}

Um uns abzusichern, haben wir Selektoren für beide Attributwerte gesetzt ("60" und "60px"). Damit wird eine grosse Anzahl von Bannern einfach verschwinden. Denk daran, dass diese Regel nur die Anzeige der Bilder verhindert. Sie werden immer noch vom Browser herunter geladen; Du sparst deshalb keine Bandbreite ein.

Wenn Du die Bilder einfach im Hintergrund verschwinden lassen willst, kannst Du ihre Deckkraft vermindern:

IMG[height="60"][width="468"], IMG[height="60px"][width="468px"]

   {opacity: 0.1 !important;}
Probier mal den disappearing ad Trick.

Probier mal den "disappearing ad" Trick (klick für volle Grösse)

Sie werden immer noch sichtbar sein, aber nur ganz schwach. Wenn Du willst, kannst Du immer noch feststellen, wessen Werbung das ist, aber sie ansonsten einfach ignorieren. Da dieser Ansatz opacity benutzt funktioniert er allerdings nur in Mozilla. Da der ganze Ansatz Attribut-Selektoren verwendet, kannst Du ihn in MSIE5 oder Opera 3.6 ohnehin nicht verwenden.

Man muss daran denken, dass diese Regel alle Bilder der angegebenen Grösse beeinflusst, egal ob Werbebanner oder nicht. Wenn also ein Titelbild zufälligerweise 468x60 Pixel gross ist, wird es auch verschwinden. Das heisst bei uns "Kollateralschaden". Es ist hart, aber es ist der Preis, den wir für unsere Gegenanattacke auf die Speichellecker des Kapitalismus, die das Web überrannt haben, bezahlen müssen. (Ich weiss ja nicht wie es Dir geht, aber irgendwie vermisse ich die sowjetische Rhetorik der alten Schule).

Verlinkte Bilder blossstellen

Designer verbringen auch viel Zeit damit, die Rahmen um verlinkte Bilder zu entfernen. Das kann es schwer machen, sie zu finden. Die Designer sagen uns, dass der sich verändernde Mauszeiger uns sagen wird welche Bilder Links sind, aber das ist offensichtlich nur weil sie wollen, dass wir den Mauszeiger über all ihre Bilder bewegen und so mehr Zeit damit verbringen, ihr Werk zu betrachten. Lass diese Bilder herausstechen:

A:link IMG, A:visited IMG {border: 2px solid blue !important;}

A:hover IMG {border: 2px solid red !important;}

Die erste Regel setzt einen Rahmen um jedes Bild, welches in einem Hyperlink enthalten ist, ob besucht oder nicht, und die zweite Regel ändert die Rahmenfarbe jedes Bildes in Rot, wenn Du mit dem Mauszeiger darüber fährst.

Ein anderer Ansatz, welcher Attribut-Selektoren benutzt, ist dieser hier:

IMG[border="0"] {border: 2px solid blue !important;}

Dies wird allerdings jedes Bild mit einer Rahmenbreite von 0 betreffen, egeal ob es Teil eines Links ist oder nicht. Das kann ein bisschen verwirrend sein wenn Du den Rahmen dazu benutzt um festzustellen, ob Du draufklicken kannst, aber es ist lustig wenn Du einfach nur Rahmen über eine Seite streuen willst.

Bilder verkleinern

Du könntest auch einen Schritt weiter gehen und jedes Bild das Dir auf dem Web begegnet verkleinern . Dazu musst Du nur die Höhe und Breite der Bilder verändern, etwa so:

IMG {height: 40px !important; width: 40px !important;}
Make all images the same size for some interesting effects.

Mach alle Bilder gleich klein (klick für volle Grösse).

Damit wird jedes Bild auf einer Seite 40 Pixel hoch und breit. Eine interessante Nebenwirkung dieser Regel ist, dass 1-Pixel GIFs zu 40-Pixel GIFs werden, was eine ganze Menge von Seitendesigns ruinieren wird. Woooo! Wenn Du die Bilder auch in ihrer normalen Grösse sehen willst, dann benutze den folgenden Trick, welchen Andrew Woolridge in seinem Artikel erläutert:

IMG:hover {height: 100% !important; width: 100% !important;}

Um Bilder in ihrer normalen Grösse zu sehen, musst Du jetzt nur den Mauszeiger drüber bewegen. Bewege den Mauszeiger weg, und die Bilder schrumpfen wieder zu einem Hundertstel ihrer Grösse.

Bloss die Eröffnungssalve

Ah, die dunkle Seite. Es macht so viel Spass, und noch besser, Du brauchst hier nicht aufzuhören. Die Tricks welche ich heute diskutiert habe sind bloss der Anfang dessen, was man einer Webseite antun kann. Alles was Du brauchst ist eine subversive Einstellung und einige Experimente mit CSS. Lass mich also wissen was Du Dir hast einfallen lassen, und ich werde es in die Liste von CSS Terroristen-Rezepten aufnehmen. Zerstörung hat noch nie soviel Spass gemacht!

Eric Meyer ist ein Mitglied der CSS&FP Working Group und der Autor von Cascading Style Sheets: The Definitive Guide.


Artikel zu diesem Thema

CSS als Diagnose-Werkzeug (deutsch)

What Makes CSS So Great? (englisch, bei oreillynet.com)


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