Ich bin jedenfalls erst mal erstaunt was Microsoft dem neuen Browser alles beigebracht hat. Rechnen musste man nicht damit.

In den letzten beiden Ausgaben des Webstandards Magazin war ein sehr interessanter Artikel darüber. Damit auch die wenigen unter euch die dieses hervorragende Magazin nicht regelmäßig lesen, und damit auch ich im Zweifelsfall weiß wo ich noch mal nachlesen kann, schreibe ich das mal hier in Kurzform zusammen.

Die Ausführungsreihenfolge der CSS Eigenschaften läuft in 4 Stufen ab.

Stufe 1: Die Gewichtung
Stufe 2: Der Ursprung
Stufe 3: Die Spezifität der Selektoren
Stufe 4: Die Reihenfolge der Selektoren

Den Ursprung kann man kurz folgendermaßen zusammen fassen:
Das Browser-Stylesheet bestimmt als erstes wie eine Seite aussehen soll. Allerdings nur rudimentär mit Anweisungen zu Schriftgrößen, Farben, Links, Formularen usw.
Neuere Browser gestatten es dem Benutzer aber auch eigene Browser-Stylesheets anzulegen. So genannte Benutzer-Stylesheets.
Als drittes gibt es dann noch die Autoren-Stylesheets. Das sind alle CSS-Anweisungen die von uns Webworkern definiert werden.

Daraus ergibt sich schon mal folgende Reihenfolge für die Gewichtung der einzelnen Stylesheets.

1. Benutzer-Stylesheet mit !important
2. Autoren-Stylesheet mit !important
3. Autoren-Stylesheet
4. Benutzer-Stylesheet
5. Browser-Stylesheet

Manch einen wird es wundern wieso das Benutzer-Stylesheet mit der !important Anweisung aus Platz 1 liegt und damit die höchste Priorität hat, aber das gibt den Benutzern mit körperlichen Beeinträchtigungen die Möglichkeit, in letzter Instanz, zu bestimmen wie eine Seite aussehen soll.

Nachdem nun klar ist welche Stylesheets wann angewendet werden geht es um die so genannte Spezifität.

Zur Ermittlung der Spezifität wird ein Punktesystem mit vier kommagetrennten Zahlen verwendet. Wobei die erste Zahl die höchste Wertigkeit hat und die letzte die Niedrigste.

Anweisungen die immer Auswirkungen vor allen andern Anweisungen haben, mit Ausnahme derer mit !important, sind diejenigen die mittels style="" definiert werden. Aber da wir ja alle moderne Webworkern sind und brav unser Layout vom Content trennen, kommt das für uns natürlich nicht in Frage.
Hätten in unserem Punktesystem aber einen Wert von 1000 oder (1,0,0,0)

Bleiben die Sektoren in unseren externen CSS-Dateien.
Da wäre als erstes die Selektion anhand einer ID (#nav) welche in unserem Punktesystem einen Wert von 100 oder (0,1,0,0) hat.

Der Klassen-Selektor und Pseudoklassen(.level1 oder :first-child) erhalten den Wert 10 oder(0,0,1,0)

Als letztes dann noch der Typ-Selektor und die Pseudoelemente (p oder :first-letter). Sie haben den Wert 1 oder (0,0,0,1)

Der Universalselektor * besitzt keine Spezifität und hat den Wert 0.

Um das ganze etwas zu veranschaulichen, hier noch ein Beispiel ausgehend von folgendem HTML.

<div id="nav">
   <div class="level">
      <p class="info">Ich bin ein Text</p>
   </div>
</div>

Wenn man jetzt folgendes in sein CSS schreibt wundert man sich schnell wieso nicht der gewünschte Erfolg eintritt und der Text in rot dargestellt wird.

#nav p { color: black;}
.info {color: red;}


Die Erklärung ist ganz einfach, die Anweisung #nav p hat laut unserem Punktesystems die Spezifität 101 oder (0,1,0,1).
Die Anweisung .info aber nur 10 (0,0,1,0).
Somit gewinnt die Klasse mit dem höherem Wert. In diesem Fall #nav p

Um den gewünschten Effekt zu erzielen muss man die Wertigkeit der Anweisung erhöhen.
Das geschieht entweder über die !important Regel, welche einer Anweisung auf die höchste Priorität setzt. Oder aber man selektiert ein wenig anders.
#nav .info {color: red;} setzt die Wertigkeit auf auf 110 oder (0,1,1,0)

Direkt gegenüber gestellt haben wir folgende Situation:
#nav p = 101
#nav .info = 110

Gerade wenn Stylesheets auf mehre Dateien verteilt sind oder einige 100 Zeilen umfassen kann man sich sehr leicht unbewusst einzelne Anweisungen überschreiben. Ich versuche die !important Regel so selten wie möglich zu verwenden da sie nur schwer überschrieben werden kann. Manchmal möchte man aber ganz bewusst Ausnahmen schaffen.

Der letzte und 4. Punkt bei der Ausführung ist die Reihenfolge.
Bei einer gleichen Wertigkeit gewinnt die Regel die als letztes im Code vorkommt.
Um in unserem Beispiel die letzte Anweisung gewinnen zu lassen, indem wir für eine gleiche Wertigkeit sorgen, müssten wir folgende Anweisungen schreiben.

p.info {color: black}
.level p { color: red;}

Beide Anweisungen haben den Wert 11 oder ( 0,0,1,1)

So das soll es gewesen sein. Wer es noch genauer wissen möchte, dem empfehle ich die Artikel im Webstandards Magazin. Dort wird dann unter anderem erklärt in welchen Fällen der Universalselektor doch eine Wertigkeit bekommen kann und vieles mehr.
Mir bleibt nur noch zu sagen, dass niemand behauptet hat das CSS leicht sei

… Deshalb empfiehlt das BSI, bis zum Vorliegen eine Patches von Microsoft auf einen alternativen Browser umzusteigen.

Uns Webworkern kann diese Empfehlung nur freuen und sollte für alle User auf Dauer eine Empfehlung sein.
Ich mag gar nicht davon zu träumen wie viel leichter mein Job würde wenn niemand mehr das Werkzeug des Teufels benutzen würde.

Schade dass es da draußen so viele Unverbesserliche und ewig Gestrige gibt. Es wird wohl ein Traum bleiben.
Lass mich niemals daraus aufwachen.

• Wolfgang Schmidetzki findet passende Worte zu den Javascript Fehlermeldungen im IE:
• Internet Explorer sucks, findet Dieter Welzel.

Wie ihr seht ist es kein persönlicher Rachefeldzug von mir. Leute tut euch selber und uns Webworkern den Gefallen und nutzt endlich einen modernen Browser. Denn wie sagte Dieter Welzel es so schön, “Internet Exporer sucks”.
oder um es mit Wolfgang Schmidetzkis Worten zu sagen “IE is NULL AND not a browser”.

Das einzige Problem für mich war, mich für die richtigen Sessions zu entscheiden.

Den ersten Vortrag den ich mir ausgesucht hatte, trug die Überschrift “Screenreder unter Linux im Praxiseinsatz“. Es interessierte mich generell einmal assistive Geräte im Einsatz zu sehen.
Leider entschied sich Sebastian Andres kurzfristig das Thema zu ändern. Er referierte stattdessen über Barrierefreies Web 2.0. Nicht uninteressant aber ich war mit einer anderen Vorstellung hin gegangen

Der anschließende Vortrag von Jan Eric Hellbusch unter der Überschrift “WCAG 2.0 und BITV2 für Einsteiger” war für mich sehr interessant und gab mir eine gute Einführung in die Anforderungen für zugängliche Webseiten.

Leider musste ich mich aufgrund dieser Vorträge gegen die Session von Timo Wirth entscheiden. Das Thema “Formulare sind Gespräche: Mitmachbarrieren im Web 2.0 abbauen” war wohl sehr spannend, wie mir Teilnehmer berichteten. Aber man kann halt nicht alles haben.

Nach der Kaffeepause folgte ein Vortrag von David Maciejewski und Dirk Jesse, mit dem Titel “Performance Optimierung: Barrierefreiheit beginnt mit Ladezeiten“. Die beiden gaben sehr interessante Einblicke in die Möglichkeiten Webseiten zu optimieren. Für mich mit der interessanteste Vortrag an diesem Tag. Da gibt es einiges für mich zu testen.

Die anschließende Mittagspause bescherte uns ein reichhaltiges Buffett und mir zudem interessante Gespräche.

Jens Meiert referierte anschließend über “HTML 5: Barrierefreiheit, Performance, Wartbarkeit“.
Er gab uns einen informativen Ãœberblick über die Änderungen in der kommendem HTML 5 Empfehlung.

Nach leckerem Kuchen in der Kaffeepause besuchte ich zum Abschluss den Vortrag von Kerstin Probiesch welcher unter dem Titel “Barrierefreiheit zum Selbertesten: Webdeveloper Toolbar & Co.” stand. Sie stellte uns Prüfwerkzeuge und Prüfschritte vor um Webseiten auf Zugänglichkeit zu testen.

Um 17:00 Uhr lagen dann alle Sessions hinter uns und es folgte ein Get-Together bei einem oder mehreren Glas Bier und der Gelegenheit zu spannenden Diskussionen und informativen Gesprächen. Ich war ja zum Glück mit der Bahn angereist. Bei der angekündigten Verlosung gewann ich dann sogar noch ein Buch „Die Kunst des IT-Projektmamagements“. Dabei habe ich noch niemals etwas gewonnen.

Abschließend muss ich sagen dass es ein sehr interessanter Tag an dem ich viele neue Einblicke gewonnen, und interessante Menschen kennen gelernt habe.

Wenn, zum Beispiel, ein Dienstleister auf seiner Webseite mit Slogans wie “Wir machen Ihre Website rollstuhltauglich” anbietet barrierefreie zugängliche Webseiten zu erstellen, sollte nicht der Auftritt dieses Anbieters ansatzweise barrierearm sein?

Auf der Webseite www.reiermann.de wird genau diese Leistung angeboten. Schaut man sich allerdings einmal den Quelltext der Seite an, bekommt man sicherlich Zweifel. So geht es mir zumindest. Dort findet sich HTML Code das an die tiefsten 90er Jahre erinnert. Saubereres Tabellen Layout mit Platzhaltergrafiken. CSS wird wohl als exotisch angesehen und sehr sehr sparsam eingesetzt. Ich möchte stark bezweifeln das assistive Geräte wie Sreenreader hieraus verständliche Inhalte für den User generieren können.

Leider werden aber potentielle Kunden selten unter die Haube schauen bzw. es auch nicht verstehen. Er verlässt sich darauf dass die angebotenen Leistungen kompetent für ihn umgesetzt werden. Mag ja auch sein das es so sein wird, aber ein gute Werbung finde ich, ist das nicht.

Manchmal macht es mir allerdings etwas Angst wie mächtig, unser aller Datenkrake, Google mittlerweile geworden ist.