Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 278

<ul id="todo-liste">
<!-- Wird per Nutzereingabe befüllt -->
</ul>
<form id="add">
<input type="text" name="add-task" placeholder="Aufgabe eingeben &amp; Go
dr&uuml;cken">
</form>
Es besteht aus einer leeren, unsortierten Liste mit der id todo-liste und einem Formu-
lar mit der id add . In dem Formular befindet sich ein Texteingabefeld mit dem Namen
add-task . Hier wird der Nutzer später seine Aufgaben eintragen. In das Eingabefeld
fügen Sie mittels des placeholder -Attributs einen kurzen Text mit einem Hinweis ein.
Der Browser zeigt den Inhalt des placeholder -Attributs als Text innerhalb des Eingabe-
feldes an und blendet ihn automatisch aus, sobald Sie etwas eingeben möchten. Dies
erleichtert das Verständnis und erspart im Idealfall eine Bedienungsanleitung.
Nachdem Sie die grundlegende Struktur angelegt haben, bestimmen Sie nun per Sty-
lesheet, wie Ihre WebApp aussehen soll. Bei der Todo-App legen Sie drei CSS-Dateien
an, die Sie in folgender Reihenfolge mit Ihrer HTML-Datei verknüpfen:
<link rel="stylesheet" href="styles/reset.css" type="text/css">
<link rel="stylesheet" href="styles/app.css" type="text/css">
<link rel="stylesheet" href="styles/skin.css" type="text/css">
Die reset.css überschreibt zunächst alle Standardstile des Webbrowsers. Dies ist
besonders dann hilfreich, wenn Ihre WebApp in unterschiedlichen Browsern, also
auf unterschiedlichen Plattformen, gleich aussehen soll. Sie folgt dem Beispiel von
Eric Meyers CSS Reset, welches auf http://meyerweb.com/eric/tools/css/reset/ näher
beschrieben wird. In der Datei steht folgender Codeblock:
html, body, div, span, ul, li, form, label, input {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {