Auszug aus dem Buch Apps mit PhoneGap entwickeln

1.1.3 Style Sheets

Sehr wahrscheinlich werden Sie in Ihrer Basis-Webseite Style Sheets verwenden. Moderne Webseiten reduzieren die Verwendung von HTML fast vollständig auf die reine Strukturierung der Seite, während die Funktionalität JavaScript und das Layout gänzlich Formatvorlagen bzw. Style Sheets übertragen wird. Style Sheets stellen einmal den – mehr oder weniger erfolgreich umgesetzten – Versuch dar, den unterschiedlichen Interpretationen von Webseiten auf verschiedenen Plattformen einen Riegel vorzuschieben. Über Style Sheets können Sie in Formategeln das Layout von Webseiten viel genauer als mit HTML festgelegen und haben Sie viel mehr. Der wichtigste Grund für die Verwendung von Style Sheets ist die Trennung von Gestaltungsbefehlen und Struktur bzw. Inhalt. Allgemein liegen bei einer Anwendung von Style Sheets Daten in einer Rohform oder einer nicht gewünschten Darstellungsweise vor, die auf spezifische Weise verändert werden soll. Die Darstellung der Daten erfolgt dann in einer anderen Form, wobei die Informationen selbst meist erhalten bleiben. Unter Umständen werden allerdings im Ausgabedokument Daten der Quelle unterdrückt und/oder durch Zusatzdaten ergänzt.

Verschiedene Style Sheet-Sprachen

Der Begriff „Style Sheets“ bezeichnet nun keine eigene Sprache, sondern im Grunde nur ein Konzept. Es gibt mehrere Style Sheet-Sprache, aber im Zusammenhang mit dem Web (und unseren PhoneGap-Apps) haben sich die so genannten CSS (Cascading Style Sheets) durchgesetzt.

Die Einbindung

Mit der gleichen Argumentation wie bei externen JavaScript-Dateien wird man am besten nur externe Style Sheets in PhoneGap-Projekten (als auch im Web) verwenden. Diese referenziert man vor[5] den Referenzen auf die Skripte in der Webseite über den <link>-Tag (ein leeres Element). Als Attribute geben Sie über das Attribut type den MIME-Type text/css, den URL zur Datei über das Attribut href und den Typ stylesheet über das Attribut rel an. Das sieht also etwa so aus:

<link type=“text/css“ rel=“stylesheet“ href=“lib/css/stil.css“ />

Ein paar Anmerkungen zu CSS3

Die modernen Engines mobiler Geräte können recht gut mit CSS3 umgehen. Von daher können Sie die neuen Möglichkeiten dieses Standards einigermaßen zuverlässig verwenden (besser als im Web). Allerdings kann es durchaus sein, dass bestimmte Formatierungen nicht oder nicht identisch auf allen Zielplattformen funktionieren. Das ist für eine übergreifende Programmierung natürlich nicht perfekt. Von daher ist es sinnvoll, kritische Anweisungen (also neue CSS3-Formatierungen) redundant mit proprietären Anweisungen zu notieren, die speziell für eine bestimmte Engine vorhanden sind. Um diese proprietären Anweisungen zu kennzeichnen, stellen Browserhersteller (oder genauer Engine-Hersteller) den CSS-Eigenschaften einen bestimmten Präfix voran:

• -moz- wird für Gecko-basierte Browser wie Firefox oder Seamonkey verwendet.

• -webkit- wird für Webkit-basierte Browser wie Safari, iCab, Konqueror oder Google Chrome notiert.

Dazu kommen noch weitere wie -o- für Opera oder -ms- von Microsoft, aber diese spielen im mobilen Umfeld bei Apps keine Rolle.

Um etwa über verschiedene Engines hinweg eine neue CSS3-Formatierung festzulegen, sollten Sie so vorgehen (Angabe einer Klasse):

.linkeEcke {

-moz-border-radius-topleft: 4px;

-webkit-border-top-left-radius: 4px;

border-top-left-radius: 4px;

}