HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 56

Kastens gescrollt werden kann. Über -webkit-overflow-scrolling:touch aktivieren Sie
das natürlich wirkende Scrollverhalten, komplett mit Gummibandeffekt.
Sie werden merken, dass die Faktenbox beim Scrolling der gesamten Seite über der
Kopfzeile liegt. Um dies zu verhindern, sollten Sie der Kopfzeile noch einen z-index
zuweisen. Dieser legt fest, welches Element »über« einem anderen liegen darf:
header {
background-color:#1384ed;
text-align:center;
overflow:hidden;
position: fixed;
width:100%;
top:0px;
z-index: 100;
}
Weisen Sie auf scrollbare Elemente hin
Beachten Sie, dass die Eigenschaft -webkit-overflow-scrolling lediglich die Scroll-
funktionalität bereitstellt. Ein visuelles Merkmal, dass der Benutzer dort scrollen
kann, müssen Sie selbst festlegen. Generell sollten Sie den Einsatz einer scrollbaren
Fläche innerhalb einer Seite immer auszeichnen und vor allem ausgiebig testen.
Während Sie im Faktenkasten scrollen, scrollt z. B. die gesamte Webseite nicht mit,
obwohl die Geste für den Benutzer dieselbe ist. Behalten Sie dies im Hinterkopf.
Neue input-Typen
Für die Sharky-WebApp benötigen Sie im Moment noch keine Formulare. Der sym-
pathische Hai nimmt Fanpost lieber in Form von gedruckten Briefen an - und zer-
kaut sie sowieso. Der Vollständigkeit halber weisen wir Sie an dieser Stelle trotzdem
auf die HTML5-Formularfeldtypen hin, die mit iOS 5 neu unterstützt werden. Defi-
nieren Sie ein Formularfeld mit dem Typ date , so wird bei der Eingabe kein Textfeld,
sondern das iOS-typische Auswahlrad angezeigt, welches Sie vielleicht schon von
der Kalender-App her kennen (Abbildung 2.1). Dasselbe gilt für die input -Typen
datetime , month und time .
Eine kreative Art und Weise, den input -Typ RANGE zu verwenden, beweist der Webent-
wickler David Calhoun. Er bastelt mit etwas CSS daraus den Entsperren-Button des
iPhones nach: http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-
fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5.