Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Denkanstöße für den täglichen Gebrauch

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Denkanstöße für den täglichen Gebrauch

Immer wieder stolpert man während seiner Arbeit über die gleichen oder ähnlich gelagerten Probleme. Jens Grochtdreis gibt drei vielfach nutzbare Denkanstöße.

Manchmal liegt im Detail das Potential für viel Arbeit und Ärger. Und oft vergißt man die hart erkämpfte, lang gesuchte Lösung eines Problems. Und manchmal kommt man zudem auf die naheliegendste Lösung eines Problems nicht, da man zu sehr in eine Richtung denkt. Sowas kommt bei uns allen vor.

Listenfehler im IE6

Der IE6 ist voller ärgerlicher CSS-Fehler. Es ist schwer, eine Hitliste zu erstellen. Ein sicherlich häufiger vorkommendes Problem hat ausnahmsweise nichts mit Floats zu tun. Wenn man eine vertikale Navigation erstellt, zeigt der IE6 die Abstände zwischen den Navigationseinträgen größer an als sie sein sollten. Dummerweise wurde dieser Fehler im IE7 nicht beseitigt, denn er hängt eng mit der Eigenschaft hasLayout zusammen. Erst ab der Version 8 behelligt uns der IE nicht mehr mit zu großen Lücken zwischen Listenelementen.

Nehmen wir uns folgendes HTML zum Beispiel:

<ul>
    <li><a href="#">Linktext</a></li>
    <li><a href="#">Total toller Linktext</a></li>
    <li><a href="#">Noch ein Linktext</a></li>
</ul>

Und stylen wir es folgendermaßen mit CSS:

ul { list-style-type: none; margin-left: 0; padding-left: 0; }
li { width: 300px; }
ul li a { display: block; }

Wir nehmen erst der Liste die optische Listeneigenschaft und egalisieren die linken Abstände nach innen und aussen. Dann geben wir den Listenelementen eine Breite. Diese wird anschließend vollständig durch die Links in den Listenelementen gefüllt, denen wir die Eigenschaften von Blockelementen zuweisen. Dadurch werden die Links wie Buttons berührbar und nicht nur über dem verlinkten Text. Zur Demonstration der Lücke haben wir den Links eine Hintergrundfarbe gegeben. (siehe liste_mit_luecke.html)

Wir sehen in IE6 und 7 zwischen den Listenelementen Lücken, die in anderen Browsern nicht existieren. Nun kann man dies als nebensächlich abtun, was es im Grunde auch ist. Allerdings kann dieser Fehler ein Layout schon ein wenig stören. Die Behebung des Fehlers ist denkbar simpel. Wir müssen "hasLayout" triggern. Ziel ist dabei das Linkelement. (siehe liste_ohne_luecke.html)

Dies tue ich normalerweise auf zwei Wegen: entweder weise ich height: 1%; zu oder zoom: 1;. Letzteres ist eine IE-spezifische Eigenschaft und würde das CSS invalide machen. Sollte ein spezielles IE-Stylesheet vorliegen, so gehört m.E. der Hack dort rein.

In diesem Falle bietet sich eine andere Lösung an: ich weise den mit display: block; behandelten Links eine Breite von 100% zu. Auch dadurch triggere ich hasLayout und habe zusätzlich den Vorteil, daß nicht nur der verlinkte Text "berührungsempfindlich" ist. Ich bekomme noch einen Buttoneffekt hinzu.

Absolute Positionierung in Dosen

Man kann komplette Webseiten mit absolut positionierten Containern aufbauen. Mit Floats ist man hingegen flexibler – trotz all der IE-Bugs in diesem Zusammenhang. Doch manchmal kann es ganz sinnvoll sein, Elemente absolut zu positionieren. Wichtig ist dabei immer, daß die Elternelemente der absolut zu positionierenden Elemente selber eine relative Positionierung aufweisen.

Positionierung in einer horiztontalen Navigation

Nehmen wir an, es existiert eine horizontale Navigation, die links ausgerichtet ist. Rechts ist wiederum ein kleines Suchformular ausgerichtet. Der erste Impuls zur Lösung dieses Problems mag in der Nutzung zweier Floats liegen. Doch man kann das Problem auch anders lösen.
Während man die Navigation nach links floaten läßt, kann man das Formular nach rechts positionieren. Und da man auch nach rechts ausgerichtet positionieren kann (right: 10px;) würde sich das Element sogar einem fluiden Layout anpassen.
Der Container, der die Navigation und das Formular umfaßt, muss relativ positioniert sein. Das Formular selber wird dann absolut positioniert.

Typisches Teaserproblem

Ein häufig anzutreffendes Element auf Webseiten sind sogenannte Teaser. Es gibt sie in fixierter oder aber in flexibler Höhe. An der rechten unteren Ecke dieser Container soll meist ein Button platziert werden. Ein solcher Anlass schreit geradezu nach absoluter Positionierung. Eine wichtige Sache darf man dabei allerdings nie vergessen: Das Elternelement des zu positionierenden Elements muss selber entweder absolut oder zumindest relativ positioniert sein. Ansonsten richtet sich das zu positionierende Element nach dem nächsten absolut oder relativ positionierten Element in der Hierarchie über sich. Das wären dann die Momente, in denen man Buttons auf der Seite sucht.

Absolute Positionierung zur Steigerung der Zugänglichkeit

Um die Zugänglichkeit einer Seite zu steigern hat es sich eingebürgert, Sprungmarken zu wichtigen Seitenbereichen zu setzen. Die Betonung liegt hierbei auf wichtig, denn es macht wenig Sinn, an den Anfang einer Seite zwanzig Sprunglinks speziell für Screenreader zu setzen, damit diese Nutzer zu jeder kleinsten Ecke einer Webseite springen können.
Ich empfehle, für solche Zwecke eine eigene Klasse zu definieren, die die Sprungmarken für alle visuellen Browser ausblendet, da sie dort nicht benötigt werden. Dies kann man folgendermaßen machen:

.versteckmich {
  position: absolute;
  left: -9999em;
  height: 0;
  width: 0;
  font-size: 0;
}

Die gleiche Klasse kann man auch nutzen, um Inhalte für Druckstylesheets auszublenden, bspw. ein spezielles Logo für den Druck.

Kommentare

Tomas Caspers

Tomas Caspers (Webkraut)
am 02.12.2008 - 09:46

Nur der Vollständigkeit halber – width:0; height:0 führt in älteren Versionen des Screenreaders WindowEyes dazu, dass der Text nicht vorgelesen wird, s. Screen Reader Visibility Test #12 bei Access Matters.
Allerdings geht der Marktanteil von Window Eyes in Deutschland gegen Null.

Permanenter Link

Ole
am 02.12.2008 - 09:56

Da hast Du wirklich die Probleme mit dem IE rausgepickt, welche zwar nicht am häufigsten auftreten, aber eben deshalb schnell wieder vergessen weden.

Eine Anmerkung zu den Teaserboxen mit den absolut positionierten Buttons (rechts unten). Man sollte zusätzlich ein padding-bottom am unteren Rand der Teaserbox in der Höhe des Buttons einfügen. damit der Text nicht unter den Button rutschen kann.

Permanenter Link

Ole
am 02.12.2008 - 09:58

Ach ja, es gibt noch eine weitere Möglichkeit die vertikalen Abstände bei Listen im IE zu fixen. Keine Umbrüche/Whitespace im Quellcode....

Aber das ist natürlich nicht besonders schön...

Permanenter Link

Jens Grochtdreis
am 02.12.2008 - 10:03

Ja, Ole, diese zweite Möglichkeit gibt es. Entweder die Liste in eine Zeile schreiben oder einen (geschützetn?) Leerschritt vor das Listenelementende setzen oder Listenelementende und -anfang in eine Zeile schreiben, egal wie sonst der Umbruch aussieht.

Das ist aber keine tolle Lösung, denn man bekommt insbesondere bei CMSen ernome Probleme, dies zu realisieren. Zudem ist es ein Fehler in der Darstellung, dei sollte man auch versuchen, in der Darstellungsebene zu lösen. Ergo baue ich die Fehlerbereinigung ins CSS.

Und da tut sie ja auch niemandem weh.

Permanenter Link
Sylvia Egger

Sylvia Egger
am 02.12.2008 - 11:38

@Tomas Caspers

Ich habe gerade einen Test mit Windows Eyes 6.1 gemacht und der liest anstandslos width:0 und height:0 vor. :) Die Probleme traten wohl mit älteren Versionen wie 4.5 auf. Und die aktuelle Version von Windows Eyes ist auch schon die 7.

Permanenter Link
Sylvia Egger

Sylvia Egger
am 02.12.2008 - 12:11

Ach so ja, zur Ergänzung - ich habe den von Tomas angegebenen Testcase um die beiden Nullwerte ergänzt und dann durchgetestet.

Permanenter Link

nikosch
am 02.12.2008 - 14:09

Kleine Anmerkung zu den Sprungmarken. Abgesehen vom sympathischen "vesteckmich"-Verschreiber: Viel schöner wäre doch hier gleich auf Semantik zu achten und die Klasse bspw. "Sprungmarke" zu benennen; selbst wenn diese nie jemand zu Gesicht bekäme. Ich würde empfehlen, den Artikel dahingehend zu ändern. Ist nur eine Kleinigkeit aber mit großer Bedeutung.

Ansonsten: Schön, dass der zweite WK-Artikel etwas konkreter ist. :)

Permanenter Link

nikosch
am 02.12.2008 - 14:12

PS:
Habe den letzten Satz überlesen
>Die gleiche Klasse kann man auch nutzen, um Inhalte
>für Druckstylesheets auszublenden, bspw. ein
>spezielles Logo für den Druck.

Gerade das halte ich für falsch. Lieber zwei Klassen benutzen und den Klassen im Stylesheet ein gemeinsames Settiung zuweisen. Man weiß nie, was die Zukunft bringt.. Briefköpfe mit Logos z.B.

Permanenter Link
Peter Rozek

Peter Rozek
am 02.12.2008 - 14:23

@sprungmarker

Die Tücke bei Screenreader Tests ist, das nicht jeder über die aktuelle Version verfügt. Aktuelle Versionen sind halt immer ein Stückchen besser als die vorherigen Versionen.

Auch wenn Vorlesesysteme im Vergleich zur Hardware etwas günstiger sind, werden die Systeme im Regelfall einmal bezuschusst und bei erneuter Beschaffung wird geprüft. Wichtig ist die Krankenkassen bezahlen bisher nur geschlossene Systeme.
Die Höhe des Zuschuss liegt meines Wissens davon ab bei welcher KV man versichert ist und welche Gewährleistungsfristen vereinbart werden.

Daher ist es sinnvoll Screenreader-Tests auch mit älteren Vorlesesystemen zu machen.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 02.12.2008 - 14:40

@nikosch: Habe den Tippfehler korrigiert. Trotzdem ist .versteckmich genauso semantisch wie .sprungmarke, mit dem Vorteil für .versteckmich, dass man es auch bei anderen Elementen verwenden kann, die man verstecken mag.

Und zu deinem PS: Das Logo würde eh eine eigene ID haben (da man die anderen .versteckmichs wahrscheinlich nicht ausdrucken möchte) über die man dann auf das Element zugreifen kann ohne mehrere Klassen mit der selben Funktion zu haben – das ist dann nämlich schwieriger zu warten.

(Natürlich ist vieles nur Geschmacksache, wichtig ist mir, dass Klassen nur innerhalb einer HTML/CSS-Kombination eine vom Autor definierte semantik haben können. Und das ist auch bei .versteckmich gegeben.)

Permanenter Link

nikosch
am 02.12.2008 - 16:11

>Trotzdem ist .versteckmich genauso semantisch
>wie .sprungmarke

Das sehe ich anders. Im Endeffekt führt sich doch hier die Diskussion logische vs. semantische Codeauszeichnung in HTML fort:
".versteckt" könnte man hier gleichsetzen mit einem direktformatierenden Ansatz wie "bold" (<b>-Tag), ".Sprungmarke" mit einem semantischen, wie "strong" (<strong>-Tag). Klassenattribute wie "NonPrint", "Headline" oder "DocumentBaseColor" sind doch weit sinnvoller (und zukunftssicherer als "hidden", "BigBold" oder "LightBrown" ?

Permanenter Link

micha149
am 02.12.2008 - 16:50

Ich habe die VersteckMich-Methode schon einige Male verwendet. Mittlerweile bin ich davon nicht mehr all zu sehr von überzeugt. Durch das veschieben des Textes in das linke Nirwana verschwindet der Text nur aus dem sichtbaren Bereich und nicht komplett. Wenn man so mit einem Link verfährt, wird der Rahmen (welcher den Fokus signalisiert) immer bis zum Linken Rand hinausgezogen und das ist nicht wirklich schön. Momentan gehe ich hin und packe den Inhalt des Links zusätzlich in einen Span, welcher die VersteckMich-Klasse bekommt. Im Stylesheet, bekommt die Klasse die Eigenschaft display:hidden. Ich bin der Meinung das es gut funktioniert und nix dagegen spricht.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 02.12.2008 - 17:15

Nein, das ändert and der Semantik nichts, da HTML keine Semantik für Klasennamen vorschreibt. Unter Wiederverwendbarkeitsgesichtspunkten kann ich dir zwar zustimmen, die Frage bleibt ob eine .versteckt-Klasse nicht schneller aus dem Element gelöscht ist als das suchen im Stylesheet nach einer von den 10 Klassen, die ich jetzt versteckt habe.

Und die Stärke von CSS-Klassen ist ja eben, dass ich mir nicht 100e Selektoren für einen Sachverhalt ausdenken muss sondern eine Klasse wieder verwenden kann. .printonly und .noprint machen da durchaus Sinn.

Letztlich ist mir noch kein Redesign untergekommen, wo nicht auch am HTML gearbeitet werden musste. Wenn dann meine Klassennamen Konsistent sind ist das aus meiner Sicht arbeitserleichternd. YMMV.

Permanenter Link

ChrisB
am 02.12.2008 - 17:16

@nikosch:
Was soll denn an einer Klasse "NonPrint" sinnvoller sein als an "versteckmich"?
Auch "NonPrint" sagt lediglich aus, dass du derzeit ein Element nicht ausdrucken moechtest - aber dieser Wunsch kann sich in Zukunft ebenso gut aendern.

Permanenter Link

Manko10
am 02.12.2008 - 19:05

Es sind keine Semantikregeln für Klassen definiert, das macht sie so flexibel, aber in gleichem Maße macht es sie „gefährlich“.
Ich denke, man sollte mit Klassen genauso verfahren, wie mit dem Markup selbst und durch sie aussagen was sie sind, aber nicht wie sie es sind. Jeder wird mir sofort zustimmen, wenn ich sage, eine Klasse Namens red ist Blödsinn und das ist sie auch. Zum einen, weil der Inhalt morgen schon blau sein kann und zum anderen suggeriert man eine Art physischer Auszeichnung. Natürlich wird sich kein Zugriffsprogramm, ob nun Browser oder Screenreader oder sonstetwas daran reiben, aber ich denke, je mehr man auch auf eine gewisse Semantik der Klassen achtet, umso mehr ist es möglich, Inhalte auch semantisch zu erfassen. Natürlich ist das auch ein großes Stück Ideologie, aber das sind Webstandards derzeit ja (leider) generell noch.
Auf jeden Fall sollte man beachten, dass Klassen keinesfalls CSS-Klassen sind. Klassen sind Klassen und somit auch Teil der Struktur. Dass man sie später per CSS ansprechen kann, ist wieder eine andere Sache. Klassen dienen in erster Linie der Semantik und so werden sie z.B. auch in Microformats genutzt. Wären es wirklich CSS-Klassen, müssten sie eigentlich genauso verpönt sein wie Inline-Styling, aber das sind sie nicht und das zu Recht, da sie von sich aus nichts mit CSS zu tun haben.
Eine Klasse, die versteckt heißt finde ich aber in erster Linie unflexibel. Etwas wie topanchor wäre sinnvoller. Zum einen beschreibt man, um was es sich handelt und zum anderen ist diese Klasse auch aus Sicht des Designs wiederverwendbar. Sie ist also in beiderlei Sicht zukunftsfähig.

Permanenter Link

nikosch
am 02.12.2008 - 19:23

"NonPrint" = bspw. Bereich ausschließlich für die Primärausgabe Bildschirm. "Screen", also ein Positiv-Merkmal, wäre noch besser.
Wie im Druck verfahren wird (Umstellung der Blockstruktur oder Ausblenden oder Wechsel der Schriftart und -größe oder Skalieren aller Bilder... definiert erst das Stylesheet. Wohingegen eine Klasse "versteckmich" mit etwas anderem als "display:hidden" oder "visibility:none" auszuzeichnen schon jeglicher Logik entbehrt.

Permanenter Link

Kaiuwe
am 02.12.2008 - 20:56

Zum Thema ".versteckmich" siehe auf w3c.org:
"Use class with semantics in mind." (http://www.w3.org/QA/Tips/goodclassnames)

Permanenter Link

Dennis Frank
am 03.12.2008 - 01:56

Hallo Jens!

Zu "Liste ohne Lücke":

in Deinem Beispiel kannst du auch gleich dem ul li a die Breite verpassen:

li { }
ul li a { width: 300px; display: block; background-color: red; color: #000; padding: 4px;}

(Das li habe nur der Deutlichkeit wegen drin gelassen.)

Ein bisschen Code gespart und geht auch. ;)

Permanenter Link

Dennis Frank
am 03.12.2008 - 01:58

Hmm, der im vorherigen Kommentar verlinkte Text wurde nicht verlinkt: http://f.df-pro.de/liste_ohne_luecke_2.html

Permanenter Link
Sylvia Egger

Sylvia Egger
am 03.12.2008 - 08:45

@Peter
Es ist schon klar, dass man auch ältere Screenreader-Versionen testen muss. Aber hier geht es um einen konkreten Einsatz einer Verstecktechik, die wir ja alle auch sonst etwa bei den Sprungmarken einsetzen.

Für mich ist wichtig - ähnlich wie die IE 5 Frage -, wenn es den Test mit einer einigermassen nicht mehr aktuellen Version (Version 6.1. ist nicht die aktuelleste) funktioniert, dann ist das ein wichtiges Ergebnis für unseren konkreten Fall hier.

Im übrigen haben wir viel Bewegung auf dem Open-Source Markt und es wird immer mehr erschwingliche Screenreader geben. Wir sollten uns mehr nach vorne ausrichten, wenn wir Dinge entwickeln.

Dass wir im Einzelfall - je nach Zielgruppe - auch mal weiter nach unten testen müssen, steht ausser Frage.

Permanenter Link

cortex
am 03.12.2008 - 11:08

Nein, das ändert and der Semantik nichts, da HTML keine Semantik für Klasennamen vorschreibt.

welch' argumentation - ich bin begeistert. dass hiermit die bemühungen um ein "besseres" (semantisches, valides, ...) web-coding ad absurdum geführt werden, scheint dem author nicht aufzufallen - vorschriften gibt's nämlich beim thema "webdesign" eher selten.

ich habe das gefühl, in dieser diskussion wird im wesentlichen (wie so oft) um geschmacksmuster gestritten.

cx

Permanenter Link
Peter Rozek

Peter Rozek
am 03.12.2008 - 12:15

@sprungmarker:
“Es ist schon klar, dass man auch ältere Screenreader-Versionen testen muss.“

“Dass wir im Einzelfall – je nach Zielgruppe – auch mal weiter nach unten testen müssen, steht ausser Frage.“

Prima, dann sind wir uns ja einig!

Bisher können die Open-Source Screenreader nicht wirklich mit den Lizenzpflichtigen Systemen mithalten, Leider. Hier muss man einfach die Entwicklung abwarten.
Bei den vielfältigen Hilfsmittel die es gibt, stellen die Screenreader den geringsten Kostenfaktor da. Richtig teuer wird es erst, wenn weitere technische Hilfsmittel hinzukommen, wie spezielle Tastaturen etc.

Permanenter Link

Thomas Scholz
am 03.12.2008 - 13:36

Zu den Sprungmarken: Spätestens bei :focus müssen sie wieder sichtbar sein, sonst verärgert man die Besucher, die lieber per Tastatur browsen, als die Maus zu schubsen. Wenn nämlich ein Element den Fokus hat, man aber nicht weiß, wo es ist, und was es bedeutet, wird diese Sprungmarke sinnlos.

@micha149: display:hidden finde ich sehr … originell. ;)

Permanenter Link

John
am 07.12.2008 - 16:24

Warum zum Layout triggern extra dem ul li a 100% width zuweisen? Wenn die Liste sowieso 300 fixe Pixel breit ist, kannst Du die Zeile

li { width: 300px; }

auch ganz raus schmeißen und die Breite unter ul li a angeben.

Nur zur Optimierung. ;-)

Permanenter Link

Die Kommentare sind geschlossen.