Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 16

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

    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.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden