Text Rotation with CSS

[M]any of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even).

Feine Formulare II: Button

In Feine Formulare I hatte ich meine Methode von <input />s vorgestellt, damit aus einem Formular aber ein feines Formular wird, brauchen wir noch mind. ein weiteres Element: den (Absende-)Button. Darum kümmern wir uns also heute.

Vorne weg: am Anfang sollte die Frage stehen, ob man überhaupt einen gestylten Button braucht. Das Problem ist so alt wie Adam und Eva und an diesem Thema werden wohl immer Designer und Entwickler aneinander geraten. Fakt ist: verschiedene Browser unter verschiedenen Betriebssystemen stellen (Submit-)Buttons unterschiedlich dar. Allerdings: sie tun dies jeweils konsistent. Nimmt man also an den Buttons kein wie auch imme geartetes Styling vor, sehen die Buttons in einem Browser immer gleich aus. Nur eben halt nicht über mehrere Browser. Und bevorzugt der Entwickler das, was der Browser anbietet, will der Designer meist den immer gleichen Button auf der gesamten Site.

Was nun more usable ist, will ich gar nicht diskutieren. Man muss sich halt für eine Sache entscheiden. Sicherlich kann man Buttons gestalten und doch »Don’t make me think« im Hinterkopf behalten. Von Verunstaltungen ist allerdings abzuraten.

Blick zurück im Zorn

Bisher gab es namentlich zwei Methoden, gestylte Buttons zu realisieren. Der Button wird als type=image gleich als Bild genutzt, oder man verzichtet auf den Button und nimmt stattdessen einen zum Knopf umgestylten Link. Beide Methoden haben dramatische Nachteile: bei der ersten gibt es ohne Javascript keinen hover– und active-state, bei der zweiten Methode lassen sich Formulare gar nur noch mit Javascript versenden, Grundvorraussetzung sollte jedoch sein, dass Formulare immer auch ohne Javascript funktionieren müssen.

Zweikomponentenkleberbutton

Der erste Schritt zum gut aussehenden Crossbrowser-Button ist der Austausch von <input type="submit" value="Absenden" /> durch das Element <button />

[syntax,formular2_1.html,html]

So könnte das zunächst mal aussehen. Über die Nützlichkeit des <button />-Elements ist hier einiges zu finden, um es kurz zu machen: will man einen Submitbutton o.ä. gestalten, ist <button /> erste Wahl. Einzig alte Safari-Versionen konnten damit nichts anfangen, und der Internet Explorer 6 hat einen Bug beim Übertragen des value, d.h. programmiertechnisch muss ggf. darauf Rücksicht genommen werden: IE 6 sendet nicht den Inhalt des Attrribut „value“, sondern den Inhalt zwischen <button> und </button>.

Um den Button nun gestalten zu können, brauchen wir einige Hilfsmittel. Zum einen müssen wir den Code noch ein wenig erweitern. Auch dazu gibt es einige sehr ergiebige Quellen im Netz, z.B. Styling the button element with sliding doors und Creating and Styling Resizable Buttons. Ich hab mal versucht beide Techniken zu kombinieren. Der Button benötigt dazu folgenden Code:

[syntax,formular2_2.html,html]

Ein wenig Background

Was wir noch brauchen, sind Hintergrundbilder, die als Sprites ausgeführt sind, d.h. die verschiedenen Buttonzustände sind in einem Bild vereinigt. Kennt man ja aus A List Apart—das ist wirklich eine meiner Lieblingstechniken. Man kann das mit einem Bild hinbekommen, das doppelt übereinandergelegt wird, will man allerdings mit transparenten Hintergrundgrafiken arbeiten, funktioniert das nicht, dann braucht man zwei Bilder:

Ein schmales für den Rand und ein breites für den Rest:

  

Und dann brauchen wir ein wenig CSS um das Ganze zum Laufen zu kriegen. Zunächst kümmern wir uns mal um den Button selbst:

[syntax,formular2_1.css,css]

Interessant: der overflow– und der width-Wert sind mal wieder für unseren Freund, den Internet-Explorer um das Breitenproblem von IE-Buttons zu lösen. Da es die anderen Browser nicht stört nehm‘ ich das gleich immer mit dazu. Das <span> und das <em>-Element bekommen nun ihre Styles.

[syntax,formular2_2.css,css]

Die beiden bekommen jeweils ein Hintergrundbild, auf Nullhöhe. Und jetzt werden noch das Hovern und Klicken hinzugefügt. Das jeweilige Hintergrundbild wird dazu einfach verschoben.

[syntax,formular2_3.css,css]

Und da geht der Ärger los: im IE6 wird so ohne weiteres :hover nicht unterstützt. Mist, das kann man jetzt eigentlich wieder nur per Javascript lösen, bspw. mit jQuery. Hier im Blog macht das allerdings Dean Edwards‘ IE7-Script. Wer aufgepasst hat wird jetzt sagen: ha! doch Javascript! Ja, aber:… funktionieren tuts auch ohne Javascript. 🙂

Ich hab mal eine mögliche jQuery-Lösung mit in den Code gepackt. Würde ich aber selbst eher in einer externen Datei ablegen.

Ich bin jetzt ein wenig aus der Puste, deswegen hier wieder das komplette Formular-Beispiel.

[syntax,formular2.html.txt,css]

Feine Formulare

Man hat schon viel versucht, aber im Grunde sehen Formulare immer gleich aus, nämlich wie der Meldebogen beim Einwohnermeldeamt. Gewiß, das hat etwas gutes, denn duch die Konformität entsteht eine Zugänglichkeit auf Basis der Gewohnheit.

Trotzdem gibt es Gelegenheiten, da könnte ein Formular mal ein wenig anders gestalt sein, als Label – Umbruch – Formularfeld. Vielleicht mit einem Icon für das Wort Name und einem für das Wort Email? Bei Formularen, die wir täglich hundertfach ausfüllen, bspw. ein Login o.ä. kann man das mal ausprobieren. Und vielleicht gewint man sogar etwas dazu, bspw. eine deutlichere Zuordung zwischen Label und Formularfeld. So soll es am Ende aussehen.

Beginnen wir mit einem einfachen Formular, das ohne CSS und vor allem ohne Javascript direkt funktioniert:

[syntax,formular1_1.html.txt,html]

Das ist gewollt unspektakulär. Dies ist im Grunde das codemäßige Basislayout, das ich für alle meine Formulare verwende. Das ganze validiert natürlich, hier als XHTML.

Vielleicht fällt noch die Positionierung des <label>-Tags auf, nämlich umschließend um den Label-Text (“Name” bspw.) und dem <input>-Feld. Das ist ein praktische Angelegenheit, die auch nicht jeder kennt: so erspart man sich zum einen, das <label> mit dem Attribut for ausstatten zu müssen und passend dazu braucht das <input> auch keine ID. Das praktische am <label>, neben der semantischen Zuordnung und der Zugänglichkeit, ist vor allem im User-Interface, dass der Benutzer auf das Label klicken kann und dann der Focus auf das zugehörige Formularfeld gesetzt wird.

Auch nicht ganz unwichtig und dem Starter vielleicht noch nicht bekannt: das Attribute tabindex gibt die Reihenfolge an, mit der der Benutzer mit der Tastatur durch das Formular tabben kann. Das ist hier zwar noch ziemlich klar, wird aber, auch um Wechselwirkungen mit anderen Formularen auszuschliessen ausdrücklich angegeben.

Zum späteren stylen allerdings benötige ich ein paar Hilfselemente. Zunächst mal müssen wir die Label-Texte zum späteren stylen mit <span>s ausstatten und außerdem brauchen wir Klassennamen auf die wir mit CSS zugreifen können.

[syntax,formular1_2.html.txt,html]

Es ist gute Sitte und natürlich eine Frage der Zugänglichkeit, das <label> mit einem paasenden title-Attribut auszustatten. Dies wird beim überfahren mit der Maus angezeigt. Später kann man das vielleicht noch per Javascript für einige Spielereien nutzen. Muss man aber nicht.

Das Styling geht dann wieder relativ unspektakulär über die Bühne. In diesem Fall gehe ich davon aus, das wir Breiten und Höhen der Formularfelder kennen, und außerdem gebe ich es hier in Pixel an. em-Fetichisten (nicht bös gemeint) mögen sich das entsprechend umformen, ich hab das aufgegeben. Sollte aber möglich sein.

Der Absatz fungiert als Container, in dem das Label und das Input platziert werden (absolut positioniert). Das Label seinerseits wird ersetzt durch das eigene Hintergrundbild.

[syntax,formular1.css.txt,html]

Zwei Anmerkungen noch: mit input:focus wird die Focusmarkierung entfernt, die Safari seinen Usern aufdrängt, stattdessen wird mit einem leichten Grau das fokussierte Element markiert (auch in FF etc.). Das ist Geschmackssache, der Purist mag es weglassen. Zweite Anmerkung, die

Auf dieser Basis lässt sich natürlich nich mehr machen, bspw. Erweiterungen per Javascript. Ich markiere beim Fokussieren eines Formfeldes gerne den Inhalt, vor allem, wenn ich Werte vorgebe, wie hier. Sinnvollerweise macht man das mit einem externen Javascript, hier – nur zu Demonstrationszwecken – steht es am Element. Und hier die komplette Demo als Code.

[syntax,formular1.html.txt,html]

Hier ist der zweite Teil: Button.