X-Ray Stylesheets

von heike / 17. Februar 2005 /

Amazing X-Ray VisionSchlecht 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.

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

Suche

About

"Vorsprung durch Webstandards" ist ein Webzine zu Webstandards, Barrierefreiheit und Usability. In loser Folge erscheinen hier theoretische Texte, praktische Tipps und hilfreiche Links zum Thema.

Twitter

Follow Vorsprung on Twitter

Classics

Falling in love with CSS

I love CSS

alle Interviews

Updates

Feed Neue Texte als RSS-Feed

Autoren

Heike Edinger, heike.edinger at gmail.com

Timo Wirth, timo.wirth at gmail.com