Entwicklung & Design

Webentwicklung für das iPhone, Teil 3: CSS-Animationen und GPS-Daten im Browser

Der Safari-Browser, der im iPhone seinen Dienst verrichtet, ist der wohl fortschrittlichste Browser auf dem Markt. Das liegt vor allem an der zugrunde liegenden Rendering-Engine WebKit. Während der Internet Explorer es langsam erst schafft, in die Nähe von aktueller Standard-Kompatibilität zu kommen, beherrscht Webkit bereits Standards von morgen: HTML5 und CSS3. Damit lassen sich auch auf dem iPhone Animationen abspielen, wie man sie aus Flash gewohnt ist. Und mit dem kommenden iPhone OS 3.0 kann man mit dem Browser auch endlich direkt auf die GPS-Daten zugreifen.

Oft wird beim iPhone die fehlende Flash-Unterstützung bemängelt. Flash ist ein beliebtes Format um vektorbasierte Animationen zu erzeugen – ein großer Nachteil des Formats ist allerdings der Resourcenhunger. Aber es geht auch anders: Seit iPhone OS Version 2.0 ist es möglich, Animationen mit CSS zu erzeugen.

Animationen mit CSS

Wir unterscheiden zwischen Übergängen bei der Änderung von Eigenschaften und expliziten Animationen, die durch ein Event ausgelöst werden. CSS-Eigenschaften lassen sich zur Laufzeit, also beim Betrachten der Webseite, verändern, beispielsweise durch JavaScript. Diese Änderung wird sofort auf das Dokument angewendet.

Ändern Sie beispielsweise durch ein JavaScript die Eigenschaft body{color:#000000;} auf einen anderen Farbwert, wird die Schrift auch sofort in der neuen Farbe dargestellt, ohne dass Sie das Dokument neu laden müssen. Wird so eine Änderung beispielsweise auf die Position einer Box oder eines Elements angewendet, kann das den Nutzer verwirren, da die Box an der einen Stelle verschwindet und zur selben Zeit an einer anderen wieder auftaucht. Für den Benutzer wäre es leichter nachzuvollziehen, wenn er die Bewegung von einer Position zu einer anderen direkt sehen könnte – anhand einer Animation. Mit einer JavaScript-Funktion, die den Positionswert in einer Zeitspanne von 3 Sekunden sukzessive erhöht, ist so etwas durchaus möglich. Einfacher und eleganter ist es, diese Aufgabe direkt durch CSS erledigen zu lassen. Dafür wurden neue CSS-Eigenschaften eingeführt. Um Komplikationen mit kommenden, vom W3C gepanten Eigenschaften zu verhindern, beginnen diese im Webkit mit dem Suffix „-webkit-“, bei Mozilla „-moz-“ und bei Opera „-o-s“. Sehen Sie sich folgenden Quellcode einmal an:

HTML
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>CSS-Fun</title>
<style type="text/css" media="screen">
	div {
		background-color:yellow;
		border: 1px solid #000000;
		width: 240px;
		height: 290px;
		padding: 10px;
		margin: 20px;
		-webkit-transition-property: height;
		-webkit-transition-duration: 3s;
	}
	div.changeit {
		height:40px;
	}
</style>
</head>

<body>
	<div onclick="this.className='changeit'">Hier tippen</div>
</body>
</html>

Listing 1

Das CSS beschreibt DIV-Container generell mit einem gelben Hintergrund, einer Breite von 240 Pixeln, einer Höhe von 290 Pixeln und einem schwarzen, ein Pixel breiten Rand. Es entsteht also ein gelbes, umrandetes Viereck, das die Webseite fast vollständig ausfüllt. Ein Tipp auf das Rechteck löst ein onclick-Event aus, das die Klasse des Containers in „changeit“ ändert. Diese Klasse überschreibt die ursprüngliche Höhe mit der im Stil definierten Höhe von 40 Pixeln.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.