Niquelao » Blog-Archiv » Ich habe es auch gesehen…

» Archiv des Weblogs » Ich habe es auch gesehen… Niquelao - CSS Ich habe es auch gesehen… 11. November 2006 von Rumoroso Diesen Artikel beginne ich einmal andersherum.

Nicht, dass ich vorhätte, ihn mit dem Rücken zur Tastatur zu schreiben, sondern ich starte direkt mit dem Rat (einem Blockzitat), mit dem ich auch enden werde: Sofern wir nicht besonders originell sein wollen und jenen Rahmen sichtbar machen möchten, der durch das versteckte Feld erzeugt wird („fast versteckt”), ist die Lösung einfach. Wir wenden „ display: none ” an und fertig. Mein Rat lautet: Versuchen Sie nicht, versteckte Felder mit einer Klasse zu versehen, um ihnen anschließend die eben genannte Eigenschaft zuzuweisen.

Stattdessen kann man sich zunutze machen, dass Firefox Attributselektoren versteht und interpretiert: [css]input[type=hidden] { display: none; }[/css] Kommen wir zum Kern der Sache… Nein, in diesem Artikel geht es nicht darum, wie man etwas layoutet, das theoretisch unsichtbar bleiben sollte (ein Feld vom Typ hidden ). Ich sage „theoretisch”, weil es in Firefox vorkommt, dass bei aktiviertem CSS und bestimmten Werten für die Eigenschaft „ display ” bei Formularfeldern die versteckten Felder plötzlich doch sichtbar werden und vom Browser gerendert werden (wie man im Beispiel mit Firefox sehen kann – oder, wenn Sie uns vertrauen und glauben, was wir sagen, in den folgenden Screenshots).

An dieser Stelle könnten Fragen aufkommen: Warum sollte man überhaupt ein display auf ein „ hidden “-Feld anwenden? Wenn der Zweck eines versteckten Feldes darin besteht, Informationen zu übermitteln, ohne sie anzuzeigen, warum sollte man es dann anzeigen wollen? Die Antwort ist einfach und wird vielleicht anhand eines Beispiels klarer: Wir haben folgendes Formular: [html] [/html] …dem wir einige Basis-Stile zuweisen: [css]form { border: 2px outset; background-color: #CCCCCC; } fieldset { margin: 20px auto; width: 500px; border: 1px solid; padding: 10px; } legend { font-size: 1.5em; color: #000; } label { font-weight: bold; font-size: 1.1em; } fieldset input { display: block; width: 90%; height: 1.3em; line-height: 1.3em; margin-left: 5%; font-size: 1em; } p { text-align: center; margin: 1em 0; } fieldset p { text-align: left }[/css] Wir haben den Formularfeldern ein display: block zugewiesen, damit sie einen Zeilenumbruch erzwingen und der beschriftende Text oberhalb erscheint.

Die Positionierung der Labels direkt über den Textfeldern vergrößert die Kontaktfläche zwischen dem anonymen Textblock des Labels und dem Eingabefeld. Das verbessert visuell und beschleunigt die wahrgenommene Zuordnung beider Elemente (außerdem ist es einfach die Art, wie ich es gerne mache, Punkt).

Vielleicht wird es visuell noch deutlicher: Im obigen Bild sind drei Layout-Varianten desselben Formulars dargestellt. In der ersten Variante steht der Label-Text über dem Eingabefeld, wodurch die Kontaktfläche größer ist. Bei den beiden anderen Varianten sieht man, wie diese Fläche abnimmt, wenn der Text neben dem zu beschriftenden Feld platziert wird. Zudem zeigt die dritte Variante das Problem, das entsteht, wenn man die Felder untereinander ausrichten möchte.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Auf diese Weise ließen sich zwar alle Textfelder linksbündig ausrichten – was in vielen Fällen wünschenswert sein mag –, doch kann dies zu Konflikten führen, wenn das Label vor dem Feld steht (da Labels selten dieselbe Länge haben). Entscheidend ist: Sobald man den Inputs diese Eigenschaft zuweist, rendert Firefox – und nur Firefox – das versteckte Feld als leeren Block.

Korrektes Verhalten oder ein Bug? Betrachtet man das Verhalten des IE, stellt man fest, dass dies dort nicht passiert. Zu diesem Zeitpunkt dürften die IE-Kritiker bereits behaupten, Firefox verhalte sich korrekt, schließlich wird er in Casting-Runden meist für die Rolle des Guten ausgewählt. In diesem Fall sollte jeder seine eigenen Schlüsse ziehen, allerdings nicht ohne zuvor ein paar Punkte zu bedenken (gut, eigentlich vier; „ein paar” ist hier nur eine Redensart): Will irgendein Entwickler wirklich die Box anzeigen, die von einem versteckten Feld erzeugt wird?

Glaubt irgendein Designer ernsthaft, er könne die Arbeit des Entwicklers ignorieren und das Feld eigenmächtig sichtbar machen? Sagt die Spezifikation nicht eindeutig: „hidden controls: Authors may create controls that are not rendered but whose values are submitted with a form. Authors generally use this control type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

The INPUT element is used to create a hidden control .” ( hidden control )? Welchen Sinn könnte es haben, die leere Box eines versteckten Feldes sichtbar zu machen? Eine Lösung Sofern wir nicht besonders originell sein wollen und jenen Rahmen sichtbar machen möchten, der durch das versteckte Feld erzeugt wird (oder besser: „fast versteckt”), ist die Lösung einfach.

Wir wenden „display: none” an und fertig. Mein Rat lautet: Versuchen Sie nicht, versteckte Felder mit einer Klasse zu versehen, um ihnen anschließend die eben genannte Eigenschaft zuzuweisen.

Stattdessen kann man sich zunutze machen, dass Firefox Attributselektoren versteht und interpretiert: [css]input[type=hidden] { display: none; }[/css] …und ein Gedanke zum Abschluss Haben sich die Firefox-Entwickler vielleicht schon überlegt, auch andere verborgene Dinge sichtbar zu machen – etwa die Aura, die Seele, Geister…? Sollte ich warten, bis ihnen das gelingt, bevor ich diesen Artikel an Iker Jiménez sende? Kategorie: CSS —> Du kannst die Kommentare dank des RSS 2.0 Feeds verfolgen. Du kannst auch einen Kommentar hinterlassen oder einen Trackback von deiner Website senden.

Vorheriger Artikel: Aber, ist die etwa schlau!! Nächster Artikel: Mangels Lende gilt alles als „Nein”! Hinterlasse einen Kommentar Die Felder Name und E-Mail sind Pflichtfelder Füge uns hinzu…

Hervorgehobene Tags allgemein Zugänglichkeit bert bos blockquote bug Cañas Zitate cite Verhalten Wissen CSS escuas Standards fieldset Firefox Format Formular Quellen hidden ie IE 7 Information javascript legend Liste niquelando Pflicht opera Strand q squash Urlaub w3c WCAG xhtml Dieses Werk ist unter einer Creative Commons-Lizenz lizenziert.

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.