Schlecht codierte Websites nehmt euch in Acht! Böse Markup-Fehler und fiese Zugangsbarrieren werden mit dem Röntgenblick entlarvt. Die gnadenlosen Visoren stehen zum sofortigen Download bereit. Schärfe deinen Blick mit dem X-Ray CSS!

Das unglaubliche, alles durchdringende Super-Stylesheet! Nichts kann seinem Blick standhalten!

X-Ray Markup
Ist das HTML-Dokument gut strukturiert? Werden semantische HTML-Elemente verwendet? Benutzt die Website h-Elemente für Überschriften und wie sind diese hierarchisch organisiert? Sind Textabschnitte über <p> strukturiert? Werden Zitate markiert und Navigationsmenüs als Listen ausgezeichnet? u.v.a.m.
Download: xray-markup.css
X-Ray Accessibility
Ist der Fenstertitel verständlich und präzise getextet? Werden Accesskeys zur Schnellnavigation angeboten? Sind die Formularfelder barrierefrei? Werden Sprachwechsel und Abkürzungen markiert? Gibt es nicht-barrierefreie Javascript-Links? u.v.a.m.
Download: xray-accessibility.css
X-Ray div-Struktur (neu)
Wie sieht die Grundstruktur der HTML-Seite aus? Ist diese klar und übersichtlich? Haben die Haupt-Bausteine ein <id>-Attribut? Werden die <div>s sparsam eingesetzt oder gibt es Anzeichen für Divitis? Sind die Namen der id- und class-Selektoren semantisch sinnvoll? u.v.a.m.
Download: xray-div.css

Ausstattung für Standards-Helden

Okay, bereit? Das X-Ray Stylesheet wird über den Browser als zusätzliches Benutzer-Stylesheet geladen. Alles, was zu tun ist, steht hier:

  1. Voraussetzung zum Durchleuchten mit CSS ist Firefox oder Mozilla.
  2. Außerdem ist die fantastische Web Developer Extension notwendig.
  3. Die Datei xray-markup.css oder xray-accessibility.css auf Festplatte abspeichern.
  4. In der Web Developer Toolbar den Menüpunkt CSS > Add User Style Sheet anklicken und ein X-Ray CSS auswählen.
  5. Damit der Röntgenblick beim Surfen nicht verloren geht, in der Toolbar Options > Persist Styles abhaken.

Neu: Bookmarklets

Zum schnellen Durchleuchten die folgenden Links in die Bookmark-Leiste ziehen:

(Thanks to User Style Bookmarklet Maker by Jesse Ruderman)


Mögliche Gefahren und Fallen: Es gibt HTML-Elemente, die sich im nicht-sichtbaren Bereich verstecken. Doch der gnadenlose Visor kommt auch solchen Schurkentricks auf die Schliche. In der Web Developer Toolbar Disable > Disable Styles wählen oder Strg+Shift+D drücken. Andere HTML-Elemente werden per fiesem Javascript gegen spritzige Flash-Dateien ausgetauscht. Moment, keine Beleidigungen: Es validiert, ist barrierefrei und erhöht den Blutdruck. Das Ding ist jedoch so heiß, dass man vor dem Durchleuchten Javascript deaktivieren sollte (Disable > Disable Javascript). Keine Fragen.

Die fantastische Verwandlung

Die X-Ray Stylesheets können frei kombiniert, verändert und ergänzt werden. Sei verwegen und mach deinen eigenen unschlagbaren Remix. Glaub mir, die Markup-Schurken haben keine Chance. Nicht die geringste.

Okay, Kumpel, hier steige ich ab, den Rest schaffst du alleine, oder?
The Amazing Spider-Man #7. Die Rückkehr des Geier (1963)

Bei Vorsprung durch Webstandards weiterlesen

Creative Commons-LizenzvertragDieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert. (Feel free to steal, but think and quote.)