CSS als Diagnose-Werkzeug
Eric Meyer | Seiten: 1, 2

Die Ausrichtung enthüllen

Unser nächstes Werkzeug wird die Ausrichtung jeder Tabellenzelle sichtbar machen. Dieser Ansatz benötigt die Unterstützung von Attribut-Selektoren, weshalb er nur mit Mozilla und Opera 4 funktioniert. Wir wählen Tabellenzeilen und -kopfzeilen aus, welche nach rechts oder links ausgerichtet sind (also align="left" oder align="right"), und plazieren einen entsprechend ausgerichteten Pfeil im Hintergrund dieser Zellen. Hier das CSS:


TD[align="left"], TH[align="left"]
   {background: url(left-arrow.gif) center 
   left no-repeat !important;}
TD[align="right"], TH[align="right"]
   {background: url(right-arrow.gif) center 
   right no-repeat !important;}

Speichere diese Regeln in einer Datei namens AlignTool.css und, verwende diese als Deine benutzerdefinierte Formatvorlage. Das Endresultat wird sein, dass jede Tabellenzelle mit einer Ausrichtung einen Pfeil als Hintergrund erhält. Tabellenzellen ohne Ausrichtung erhalten keinen Hintergrund. Da es jedoch manchmal wünschenswert ist zu sehen, welche Zellen nicht ausgerichtet wurden, fügen wir folgendes am Anfang unseres Stylesheets hinzu:

TD, TH {background: url(no-align.gif) center no-repeat !important;}

Wir können sogar noch weiter gehen und sowohl die horizontale als auch die vertikale Ausrichtung von Tabellenzeilen sehen. Die folgenden Regeln werden benötigt:

 

TD, TH {background: url(no-align.gif) center no-repeat !important;}
TD IMG, TH IMG {opacity: 25% !important;}
TD[align="left"], TH[align="left"]
{background: url(left-arrow.gif) center left no-repeat !important;} TD[align="right"], TH[align="right"]
{background: url(right-arrow.gif) center right no-repeat !important;} TD[valign="top"], TH[valign="top"]
{background: url(top-arrow.gif) top center no-repeat !important;} TD[valign="bottom"], TH[valign="bottom"]
{background: url(bottom-arrow.gif) bottom center no-repeat !important;} TD[align="left"][valign="top"], TH[align="left"][valign="top"]
{background: url(topleft-arrow.gif) top left no-repeat !important;} TD[align="right"][valign="top"], TH[align="right"][valign="top"]
{background: url(topright-arrow.gif) top right no-repeat !important;} TD[align="left"][valign="bottom"], TH[align="left"][valign="bottom"]
{background: url(bottomleft-arrow.gif) bottom left no-repeat !important;} TD[align="right"][valign="bottom"], TH[align="left"][valign="bottom"]
{background: url(rightleft-arrow.gif) bottom right no-repeat !important;}

Wir sehen das Resultat in Abbildung 2. Denk daran dass dieses Werkzeug die Unterstützung von Attribut-Selektoren benögt um zu funktionieren.

Figure 2. Showing the alignment of each cell in a table.
Abbildung 2. Anzeige der Ausrichtung jeder Zelle in einer Tabelle (Klick für grössere Ansicht).

Die opacity Regel macht Bilder "durchscheinend", so dass Du die Ausrichtungs-Pfeile hinter Bildern in Tabellen sehen kannst. Zugegeben, ich habe diesen Effekt ausgewählt weil wir so mit opacity spielen können, was ziemlich cool aber auch nützlich ist. Ohne diesen Effekt würden Bilder einige der Pfeile völlig überschreiben.

Offensichtlich bedingt dieses Stylesheet, dass die Bilder erstellt werden und im gleichen Verzeichnis wie das Stylesheet untergebracht sind. Das ist aber okay, weil ich sie für Dich erstellt habe. Sie sind Bestandteil der Archivdatei, welche ich für den Download erstellt habe; sie enthält alle Bilder und Stylesheets dieses Artikels

Aber das kommt später! Zuerst müssen wir noch mehr Werkzeuge vorbereiten.

ALT Tester

Die meisten Webseiten benuzten bis zu einem gewissen Grad Bilder, und deshalb ist es wichtig, alternativen Text für jedes Bild anzugeben, einfach für den Fall dass ein Besucher Deiner Site blind ist und einen Sprachbrowser benutzt, oder einen textbasierten Browser wie Lynx, oder eines der Web-fähigen Handys.

Wenn Du Mozilla benutzt, kannst Du mit der opacity der Bilder spielen um zu sehen, welche keinen ALT Text haben. Probier diese Regeln aus in einem Benutzerstylesheet namens "TransAlt.css":

IMG {opacity: 0.33 !important;}
IMG[alt] {opacity: 1.0 !important;}

Dies setzt alle Bilder auf eine opacity von 33% (in anderen Worten, sie lassen 66% ihres Hintergrunds durchscheinen), und alle Bilder ohne ALT Attribut auf volle opacity. So werden Bilder mit ALT Text normal erscheinen, und diejenigen ohne werden durchscheinend.

Falls Du einen Browser benutzt der opacity nicht unterstützt, gibt es immer noch andere Wege, Bilder so zu formatieren dass diejenigen ohne ALT herausstechen. Zum Beispiel können wir Bilder verstecken oder darstellen lassen, ohne auf opacity zurückgreifen zu müssen:

IMG {visibility: hidden !important;}
IMG[alt] {visibility: visible !important;}

... oder vielleicht könnten wir Bilder ohne ALT wirklich auffallen lassen:

IMG {border: 5px solid red !important;}
IMG[alt] {border-width: 0 !important;}

Die Ergebnisse dieses Stylesheets sind in Abbildung 3 sichtbar. Einmal mehr funktioniert das nur in einem Browser, welcher die Attributselektoren-Syntax unterstützt, deshalb fällt Internet Explorer weg.

Höhe und Breite sicherstellen

Figure 3. Putting a red border around images without ALT tags.
Abbildung 3. Ein roter Rahmen um alle Bilder ohne ALT Attribut (Klick für grössere Ansicht).

Verwandt mit dem vorherigen Werkzeug ist eines das sicherstellt, dass Deine Bilder height und width Attribute haben. Uns kümmern nicht die Werte, nur das Vorhandensein der Attribute. Die Regeln welche dies möglich machen lauten:

 IMG {border: 5px solid red !important;}
 IMG[height][width] {border-width: 0 !important;} 

Einmal mehr werden die bösen Bilder mit einem dicken roten Rahmen ausgezeichnet. Du kannst den Effekt natürlich verändern -- mach diejenigen Bilder welche Hilfe benötigen unsichtbar, oder halb unsichtbar, oder verändere ihre Grösse, oder mach einfach die Rahmen dicker. Was auch immer dabei hilft Deine Aufmerksamkeit zu wecken solltest Du tun.

FONT Elemente hervorheben

Gut, Du bist also daran, Deine Site von all dem "presentational" Markup zu befreien. Du bist sicher, dass Du kein einziges FONT Element übriggelassen hast. Bist Du bereit, diese Überzeugung mit irgendeinem Browser aus Deiner Werkzeugkiste auf die Probe zu stellen?

Falls Du denkst, dass Du dazu bereit bist, erstelle eine Datei namens "FontPop.css", füge die folgenden Regeln ein, und definiere es als Deine Benutzer-Formatvorlage:

FONT, FONT * {font-weight: bold !important; color: yellow !important;
background: red !important; border: 3px solid lime !important;
padding: 0.25em !important;}

Jetzt surfe auf Deiner Website herum und schau, ob Dir irgend etwas ins Auge springt. Oder surfe auf anderer Leute Websites herum und schau was passiert. Denk einfach daran, dass wir diese optisch herausragenden Formatierungen für alle FONT Elemente und alle Nachfahren (descendants) eines FONT Elementes gesetzt haben -- sei das ein Bild, Anker, Formularelement, oder irgend etwas anderes. Bereite Dich also auf einige Hässlichkeiten vor. Nach meiner Erfahrung sind manche Sites ziemlich schwer zu ertragen.

Ein Blick unter die Haube

Aber möglicherweise willst Du ja den Umriss jedes einzelnen Elements auf jeder Website sehen die Du besuchst. Und wenn Du schon so weit gehst, kannst Du die Umrisse auch gleich wirklich offensichtlich machen, also:

* {outline: 1px dotted orange !important;}

Aufgrund der Farbwahl sind natürlich diese Umrisse auf manchen Sites nur schwer zu sehen, z.B. dem Web Standards Project, aber Du kannst die Farbe anpassen damit sie Dir (oder der Site die Du besuchst) besser entspricht.

Ein kompletter Werkzeugkasten

Wie bereits erwähnt, habe ich eine Datei vorbereitet welche alle Hintergrundbildern und Stylesheets aus diesem Artikel enthält. Du kannst aus zwei Formaten auswählen: ZIP und StuffIt (Anm. d. Übers.: Beide Files liegen auf den Servern von oreillynet!). So musst Du Dich nicht damit aufhalten die Stylesheets selbst schreiben, oder die nötigen Bilder selbst zu erstellen.

Für diejenigen, welche diese Werkzeuge in Browsern ohne Unterstützung von Benutzer-Formatvorlagen benutzen wollen, sind die Möglichkeiten etwas stärker eingeschränkt. Du kannst in einzelnen Seiten welche Du schreibst und testest einen LINK auf die Stylesheets machen, aber Du kannst nicht mit gesetztem Stylesheet im Web surfen. Wenn Du aber dasjenige Werkzeug, welches in alten Browsern funktioniert, mit einem LINK einbinden willst, dann kannst Du auf eine Kopie von FontPop.css verweisen, welches auf meiner persönlichen Site verfügbar ist. Es wird hier untergebracht sein:

http://www.meyerweb.com/eric/css/tools/FontPop.css

Die Gross- und Kleinschreibung sind wichtig, achte also darauf dass Du die URL genau so kopiertst wie sie hier steht.

Das ist erst der Anfang

So nützlich wie diese Werkzeuge auch sind, stellen sie erst die Spitze des Eisbergs dar. Wenn es nötig ist herauszufinden wie ein Dokument strukturiert ist, oder welche Elemente wleche Attribute haben, dann können Benutzer-Formatvorlagen hilfreich sein. Ich hoffe, dass Leser mit ihren eigenen Werkzeuge zu einer von mir neu erschaffenen Dienstleistung beitragen: Der Autoren-Werkzeugkasten. Schick mir Deine interessanten und nützlichen Stylesheet-basierten Werkzeuge, und ich werde sie zusammen mit Deinem Namen hinzufügen. Hier ist Deine Chance, Deine Stellenbezeichnung in "Web-Mechaniker" umzuändern -- zeigt mir eure Werkzeuge!

Verwandte Artikel:
Kochbuch für CSS-Anarchisten (deutsch)
What Makes CSS So Great? (englisch, bei O'Reilly)


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