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

line-height: 1.5;
}

Listing 7.1 Der CSS Reset eliminiert alle Browserstile

Um Bandbreite zu sparen, werden hier nur die Elemente aufgeführt, die in der App
tatsächlich verwendet werden. In Eric Meyers Originaldatei werden alle Elemente
zurückgesetzt, also auch Tabellen, Iframes, Überschriften und Textblöcke.

In den anderen beiden Dateien definieren Sie, getrennt voneinander, Aussehen und
Anordnung der Elemente. So haben Sie später die Möglichkeit, die Ästhetik zu verän-
dern, ohne die Aufteilung der Elemente zu beeinträchtigen. Die Datei app.css enthält
daher lediglich Anweisungen für das Grundgerüst der App (Abbildung 7.7):

7

html {
height: 100%;
}
#todo-liste {
position: absolute;
top: 0; bottom: 50px;
left: 0; right: 0;
padding: 8px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#todo-liste li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#todo-liste li input[type=checkbox] {
margin-right: 10px;
}
#add input[name=add-task] {
position: absolute;
left: 0; right: 0;
bottom: 0;
margin: 6px;
padding: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

Listing 7.2 Das App-Grundgerüst