X-Ray Stylesheets
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!
- 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 derid- undclass-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:
- Voraussetzung zum Durchleuchten mit CSS ist Firefox oder Mozilla.
- Außerdem ist die fantastische Web Developer Extension notwendig.
- Die Datei xray-markup.css oder xray-accessibility.css auf Festplatte abspeichern.
- In der Web Developer Toolbar den Menüpunkt CSS > Add User Style Sheet anklicken und ein X-Ray CSS auswählen.
- 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.
The Amazing Spider-Man #7. Die Rückkehr des Geier (1963)
