Moderne Apps

2016-10-20

Aufbau einer reaktionsfähigen und modernen Benutzeroberfläche mit CSS für WinJS-Apps

Rachel Appel Die Arbeit mit CSS kann aufgrund der zahlreichen Feinheiten auf viele Entwickler frustrierend wirken. Selbst kleine Änderungen an einem einzelnen Selektor oder HTML-Element führen häufig zu weiteren Änderungen. Angesichts der zahlreichen Sonderheiten, die besonders bei der Entwicklung für mehrere Browser zutage treten, kann ein sauberes und effektives CSS zur Herausforderung werden. Glücklicherweise ist bei der Entwicklung von Apps mit der Windows-Bibliothek für JavaScript (WinJS) das in die Projektvorlagen von Visual Studio integrierte CSS flexibel und dabei einheitlich und verwaltungsfreundlich. Der in den Visual Studio-Projektvorlagen enthaltene Code bildet die Grundlage für eine reaktionsfähige und moderne Benutzeroberfläche.

Integriertes CSS für Windows Store-Apps

Alle Projektvorlagen für mit JavaScript erstellte Windows Store-Apps enthalten zwei einfache Stylesheets oder Designs – dunkel (Standard) und hell. Diese befinden sich in der Datei „ui-dark.css“ bzw. „ui-light.css“. Beide Dateien gehören zu den zentralen Projektdateien im CSS-Ordner im Knoten mit den Visual Studio-Projektverweisen. Die zentralen CSS-Dateien enthalten an die 4.000 Zeilen CSS. Diese bilden eine Benutzeroberfläche entsprechend den Grundsätzen der Gestaltung von Windows-Benutzeroberflächen, einschließlich der Reaktion auf die angedockte Windows-Ansicht und Änderungen der Medientypen. Geändert werden können die integrierten Stylesheets nicht, da sie schreibgeschützt sind. Stattdessen können Sie die integrierten Formatvorlagen in Ihren eigenen CSS-Dateien überschreiben.

Wenn Sie das integrierte CSS für Windows Store-Apps verwenden möchten, fügen Sie auf einer beliebigen Seite dem <head>-Abschnitt den folgenden Verweis hinzu (das „2.0“ im Link gilt für Windows 8.1, bei Windows 8 wäre es „1.0“):

    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />

Die beiden Schrägstriche zu Beginn des Pfads deuten auf einen Verweis zu einer WinJS-Kernbibliothek hin (auch als „freigegebene Bibliothek“ bezeichnet, da sie den Gegensatz zu lokalen Projektdateien im App-Paket bildet). Pfade in mit JavaScript erstellten Windows Store-Apps, die mit einem einzelnen Schrägstrich beginnen, sind im Stammordner des Projekts angesiedelt. Somit verweisen einzelne Schrägstriche auf lokale Projektdateien.

In mit JavaScript erstellten Windows Store-Apps kommen verschiedenste Anbieterpräfixe zum Einsatz (wie etwa -ms-grid, -flexbox usw.), wodurch das technisch fortschrittlichste CSS für die Verwendung in Apps zur Verfügung steht. Weitere Hightech-CSS, die in WinJS-Apps zum Einsatz kommen, sind CSS3-RGBA-Farben, WOFF-Schriftarten (Web Open Font Format) und Medienabfragen.

Formatieren von WinJS-Steuerelementen mit CSS

WinJS-Steuerelemente sind Erweiterungen von HTML-Elementen. Daher werden WinJS-Steuerelemente mit dem CSS ebenso formatiert wie andere HTML-Tags auch. Die Visual Studio-Projektvorlagen enthalten Verweise zu dem CSS, das für jedes HTML-Element und WinJS-Steuerelement moderne Benutzeroberflächenformate in dunkel und in hell erstellt. Selbstverständlich müssen Sie diese Formatvorlagen nicht beibehalten. Sie können sie beliebig an das Unternehmens- oder Produktdesign anpassen. Dabei sollten Sie allerdings auf ein einheitliches Erscheinungsbild mit der neuen Windows-Benutzeroberfläche achten, um die Benutzer nicht zu verwirren.

Abbildung 1 enthält den Code für verschiedene einfache und geläufige HTML- und WinJS-Steuerelemente sowohl im dunklen als auch im hellen Design. Abbildung 2 zeigt die Ausgabe dieses Codes.

Abbildung 1: Code für einfache HTML- und WinJS-Steuerelemente

    <div id="grid">
      <div style="-ms-grid-column: 1; -ms-grid-row: 1">
        <label for="textbox">Textbox:</label>
        <input id="textbox" type="text" />
      </div>                   
      <div style="-ms-grid-column: 2; -ms-grid-row: 1">
        <label for="button">Button:</label>
        <button id="button" value="Button">Clickety Click</button>
      </div>
      <div style="-ms-grid-column: 1; -ms-grid-row: 2">
        <label for="radio">Radio:</label>
        <input type="radio" id="radio" name="radio" />
          <label for="radio">One</label>
        <input type="radio" id="radio" name="radio" />
          <label for="radio">Two</label>
        <input type="radio" id="radio" name="radio" />
          <label for="radio">Three</label>
      </div>                   
      <div style="-ms-grid-column: 2; -ms-grid-row: 2">
        <label for="select">Select:</label>
        <select id="select">
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
         </select>
      </div>                                  
      <div style="-ms-grid-column: 2; -ms-grid-row: 3">
        <label for="rating">Rating:</label>
          <div id="rating" data-win-control="WinJS.UI.Rating"></div>
      </div>
      <div style="-ms-grid-column: 1; -ms-grid-row: 3">
        <label for="toggle">Toggle:</label>
        <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
      </div>  
      <div style="-ms-grid-column: 1; -ms-grid-row: 4">
        <label for="datepicker">Date Picker:</label>
        <div id="datepicker" data-win-control="WinJS.UI.DatePicker"></div>
      </div>                     
     <div style="-ms-grid-column: 2; -ms-grid-row: 4">
        <label for="timepicker">Time Picker:</label>
        <div id="timepicker" data-win-control="WinJS.UI.TimePicker"></div>
      </div>
    </div>

Common HTML and WinJS Controls in Dark Default Style

Abbildung 2: Häufig genutzte HTML- und WinJS-Steuerelemente in den Standardformatvorlagen „Dunkel“ und „Hell“

Wie Sie in Abbildung 2 sehen können, entsprechen die Standardformatvorlagen der Steuerelemente der neuen Windows-Benutzeroberfläche. Eine vollständige Liste der HTML- und WinJS-Steuerelemente finden Sie im Windows Dev Center unter bit.ly/w1jLM5.

Eine genaue Betrachtung der verfügbaren WinJS-Steuerelemente finden Sie in meinem Artikel „Verwenden von Steuerelementen und Einstellungen in Windows Store-Apps, die mit JavaScript erstellt wurden“ unter msdn.microsoft.com/magazine/dn296546. An dieser Stelle beschreibe ich die Stylerichtlinien für einige wenige wichtige Steuerelemente, nämlich AppBars, Flyouts und ListViews.

AppBars AppBar-Benutzeroberflächenkomponenten sind aus Windows Store-Apps nicht wegzudenken. Mit den entsprechenden CSS-Selektoren können alle Aspekte einer AppBar bis hin zur gesamten AppBar sowie die einzelnen Schaltflächenbeschriftungen, Bilder und QuickInfos im Normalzustand und beim Daraufzeigen formatiert werden. Das Aussehen und Erscheinungsbild einer AppBar lässt sich also vollständig anpassen. Nachdem Sie die AppBar selbst durch Überschreiben der .win-appbar-Klasse formatiert haben, können Sie sich den einzelnen Befehlen widmen. Da es sich bei AppBar-Schaltflächen um WinJS-Steuerelemente handelt, enthält das data-win-options-Attribut alle Informationen, die für eine ordentliche Einrichtung der Befehlsschaltflächen benötigt werden. Dabei werden die Eigenschaften von Beschriftung, Symbol, Abschnitt und QuickInfo festgelegt:

    <div id="appbar" class="win-appbar"
      data-win-control="WinJS.UI.AppBar">
      <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
          id:'addFriend',
          label:'Add Friend',
          icon:'addfriend',
          section:'global',
          tooltip:'Add a friend'}"
        type="button">
      </button>
    </div>

Eine AppBar muss nicht so aussehen wie der simple Standardstreifen am unteren Bildschirmrand. Verändern Sie einfach die Formatvorlagen der folgenden Klassenselektoren:

.win-appbar: Die AppBar als Ganzes formatieren.
.win-command: Eine einzelne Schaltfläche auf der AppBar formatieren.
.win-commandimage: Das Bild auf der Befehlsschaltfläche formatieren.
.win-commandring: Den Kreis um die AppBar-Schaltfläche formatieren.
.win-commandimage:hover und .win-commandring:hover: Den Zustand beim Zeigen auf das Bild der Befehlsschaltfläche und auf den Befehlskreis formatieren.

Wie Sie sehen, gibt es für alle Aspekte der AppBar die passende Formatvorlage.

Flyouts Flyouts sind interaktive Popupfenster. In Windows Store-Apps werden Flyouts für gewöhnlich implementiert, um Benutzereingaben zu sammeln. Dies geschieht häufig über den Einstellungen-Charm der App. Flyouts eignen sich besonders, um Einstellungen zu implementieren oder Daten aufzunehmen, auf die der Benutzer unregelmäßig zugreift. Beispielsweise kann über ein Flyout eine Datenschutzerklärung bereitgestellt werden, die für die Aufnahme der App in den Windows Store erforderlich ist. Das Formatieren eines Flyouts ist ganz einfach. Sie müssen lediglich den .win-flyout-Selektor überschreiben. Das System-CSS enthält Einstellungen für „.max-width“ und „.max-height“. Diese müssen Sie eventuell anpassen, wenn Sie ein ganzes Formular mit Daten erfassen möchten.

Bei einem Flyout handelt es sich um ein <div>-Element, das verborgen bleibt und erst sichtbar wird, wenn der Benutzer es über einen Charm oder einen AppBar-Befehl aufruft. Dann wird es auf dem Bildschirm eingeblendet. Zwar sind innerhalb von Flyouts auch andere Steuerelemente enthalten, diese lassen sich jedoch unverändert formatieren, da sie aus reinem HTML bestehen.

ListView Die ListView ist wahrscheinlich das komplexeste WinJS-Steuerelement und ermöglicht die Anzeige mehrerer Datenelemente in einem Raster oder einer Liste. Darüber hinaus reagieren ListViews auch auf Berührungen und Mausbewegungen, die der Benutzer initiiert, um ein Element auszuwählen oder eine Aktion auszulösen. Ab Windows 8.1 können Benutzer über das ListView-Steuerelement Elemente auf dem Bildschirm ziehen, ablegen und neu anordnen.

Bevor Sie mit dem ListView-Steuerelement arbeiten können, müssen Sie seine Funktionsweise verstehen. Das ListView-Steuerelement umfasst hauptsächlich vier bewegliche Teile: die ListView selbst, den Viewport, die Oberfläche und die Elemente. Dabei befinden sich die Elemente innerhalb der Oberfläche, welche den bildlauffähigen Bereich der ListView bildet. Die Oberfläche befindet sich innerhalb des Viewports und bewegt sich auch darin. Aus diesem Grund befinden sich die Bildlaufleisten am Viewport (siehe Abbildung 3).

The Viewport and Its Surface Area Combine to Make the ListView Control
Abbildung 3: Viewport und Oberfläche bilden zusammen das ListView-Steuerelement

Zusammen bilden der Viewport und seine Oberfläche mit den darin befindlichen Elementen das ListView-Steuerelement. Aufgrund der verschiedenartig funktionierenden Teile in einem ListView-Steuerelement gibt es viele detaillierte Leitfäden zu deren Formatierung. Diese finden Sie über das Windows Dev Center unter bit.ly/HopfUg. Hier beschränke ich mich auf die wichtigsten Aspekte, die Sie über das Formatieren des ListView-Steuerelements wissen sollten:

.win-listview: Die gesamte ListView formatieren.
.win-viewport: Den Viewport der ListView formatieren.
.win-surface: Den bildlauffähigen Bereich der ListView formatieren.

Dank dieser beweglichen Teile können Sie beispielsweise ein Hintergrundbild verwenden, das sich gemeinsam mit den Elementen im Bildlauf bewegen lässt. Wenn die Oberfläche größer ist als der Viewport, erhält der Viewport nach Bedarf eine vertikale oder horizontale Bildlaufleiste.

Das Formatieren der ListView-Elemente ist einfach. Dafür benötigen Sie die .win-item-Klasse sowie die .win-container-Klasse. Jedes Element einer ListView befindet sich mit dem Bild und den Textfeldern des Elements in einem eigenen Container. Bei diesem Container handelt es sich eigentlich lediglich um eine HTML-Vorlage, über die die Bestandteile definiert werden, die zusammen ein Element in einer ListView bilden. Am Code in Abbildung 4 können Sie erkennen, wie diese Vorlage und die dazugehörige ListView definiert werden. Ein WinJS.Binding.Template-Steuerelement wird erstellt, das von der ListView zum Anzeigen von Daten verwendet wird.

Abbildung 4: Code zum Definieren einer Vorlage und der dazugehörigen ListView

    <div id='listviewtemplate' class="itemtemplate" 
      data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#"
          data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
          <h4 class="item-title" data-win-bind="textContent: title"></h4>
          <h6 class="item-subtitle win-type-ellipsis"
             data-win-bind="textContent: subtitle"></h6>
        </div>
      </div>
    </div>
    <div class="groupeditemslist win-selectionstylefilled"
      aria-label="List of groups"
      data-win-control="WinJS.UI.ListView"
       data-win-options="{ selectionMode: 'none' }">
    </div>

Wie Sie in Abbildung 4 erkennen können, bilden <div>-Elemente die Elementvorlage der ListView, die in die Projektvorlagen „Raster-App“ und „Geteilte App“ integriert ist. Zur Laufzeit legt das Ausführungsmodul der App die .win-container-Klasse und die .win-item-Klasse in diese Elemente ein. Daher werden Sie diese Selektoren während der Entwicklung nicht im Code sehen können. Um Ihre eigenen Formatvorlagen anzuwenden, können Sie sie jedoch in der CSS-Datei überschreiben. Im ListView-Code der Projektvorlage sind „.item“, „.item-image“, „.item-title“, „.item-subtitle“ und „.item-overlay“ als veränderbare Selektoren verfügbar, über die Sie das Erscheinungsbild jedes einzelnen Elements innerhalb des Rasters verändern können.

Eine Liste oder ein Raster ist erst fertig, wenn die Elemente sortiert, gruppiert oder anderweitig beeinflusst werden können. Daher gibt es selbstverständlich Formatvorlagen für gruppierte Elemente ebenso wie für einzelne Elemente. Die Gruppenüberschriften können Sie durch Überschreiben des .win-groupheader-Klassenselektors formatieren. Einen Verlauf im Design erzielen Sie durch Überschreiben von „.win-progress“.

Flüssiges CSS für reaktionsfähige Benutzeroberflächen

Die Projekte „Raster-App“, „Geteilte App“ und „Navigations-App“ in Visual Studio enthalten WinJS-CSS-Selektoren, die zusammen mit semantischen HTML5-Elementen für ein flüssiges und modernes Design sorgen. Der Code in Abbildung 5 zeigt das CSS und HTML, das zum Erstellen des Rasterlayouts über die Rastervorlage benötigt wird. Beachten Sie, dass die .fragment-Klasse Zeilen und Spalten eines Rasters über die Präfixe „-ms-grid-columns“ und „-ms-grid-rows“ definiert. Dann werden diese Präfixe und weitere Selektoren auf die <div>-Elemente in Abbildung 5 angewendet. Die semantischen Elemente „<header>“ und „<section>“ lassen klar erkennen, welches Element welchen Inhaltstyp enthält.

Abbildung 5: Das grundlegende HTML und CSS für ein Seitenfragment

    .fragment {
      /* Define a grid with rows for a banner and a body */
      display: -ms-grid;
      -ms-grid-columns: 1fr;
      -ms-grid-rows: 128px 1fr;
      height: 100%;
      width: 100%;
    }
      .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title. */
        display: -ms-grid;-ms-grid-columns: 39px 81px 1fr;
        -ms-grid-rows: 1fr;
      }
      .fragment header[role=banner] .win-backbutton {
        -ms-grid-column: 2;
        margin-top: 59px;
      }
      .fragment header[role=banner] .titlearea {
        -ms-grid-column: 3;
        margin-top: 37px;
      }
      .fragment header[role=banner] .titlearea .pagetitle {
        width: calc(100% - 20px);
      }
      .fragment section[role=main] {
        -ms-grid-row: 2;
        height: 100%;
        width: 100%;
      }
    <div class="fragment groupeditemspage">
      <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back"
           disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
          <span class="pagetitle">CSS in Windows Store apps</span>
        </h1>
      </header>
      <section aria-label="Main content" role="main">
        <div class="groupeditemslist win-selectionstylefilled"
           aria-label="List of groups"
           data-win-control="WinJS.UI.ListView"
           data-win-options="{ selectionMode: 'none' }">
      </div>
      </section>
    </div>

Da dieses CSS Teil der Projektvorlagen „Raster-App“ und „Geteilte App“ ist, müssen Sie sich nicht mühsam mit der Erstellung eines flüssig funktionierenden Rasters befassen, das sich abhängig von Änderungen an den Daten oder dem App-Zustand anpasst. Die Anpassungsfähigkeit ist bereits integriert.

Bei JavaScript-Vorlagen für Windows Store-Apps kommen das CSS-Boxmodell für die Gestaltung der Seite sowie das CSS-Rasterlayout (Details siehe Website des W3C [World Wide Web Consortium] unter bit.ly/14yzx2h) zum Erstellen einer reaktionsfähigen Benutzeroberfläche zum Einsatz. Beachten Sie, dass beim Wechsel zwischen Vollbild und angedockter Ansicht das Raster zu einer vertikal angeordneten Liste wird.

Die meisten Standardprojektvorlagen in Windows Store-Apps machen sich CSS-Medienabfragen zunutze, um eine moderne Benutzeroberfläche zu liefern, die auf Veränderungen der Geräte- und Browsergröße, Ausrichtung und Auflösung reagiert. Wenn Sie weitere Informationen über Medienabfragen erhalten möchten, lesen Sie meinen Blogbeitrag „Erstellen von Layouts für mobile Websites mit CSS-Medienabfragen“ unter bit.ly/1c39mDx.

Darüber hinaus kommen in Windows Store-Apps Medienabfragen zum Einsatz, da Windows 8 vier verschiedene Ansichtszustände von Apps unterstützt: Vollbild, angedockte Ansicht, ausgefüllte Ansicht und Hochformat. Wenn eine App in die angedockte Ansicht oder die gefüllte Ansicht wechselt, ist das im Prinzip so, wie wenn die App auf einem anderen Gerät ausgeführt wird, da sich sowohl die Abmessungen als auch die Ausrichtung des Browsers deutlich ändern.

Wenn Sie sich das integrierte CSS ansehen, werden Sie feststellen, dass für die vier App-Ansichtszustände sowie für Ansichtszustände mit hohem Kontrast und Barrierefreiheit viele @media-Regeln vorhanden sind. Diese Medienabfragen erkennen die Zustände „angedockte Ansicht“ und „Vollbild im Hochformat“:

    @media screen and (-ms-view-state: snapped) {}
    @media screen and (-ms-view-state: fullscreen-portrait) {}

Für gewöhnlich kann das CSS, das für Vollbild verwendet wird, auch für die gefüllte Ansicht (drei Viertel des Bildschirms) verwendet werden. Bei den oben genannten Abfragen handelt es sich um die beiden beliebtesten Medienfeatures für Windows Store-Apps. Viele weitere Medienfeatures finden Sie auf der Website von W3C unter bit.ly/gnza0F.

Windows Store-Apps verwenden effizientes und organisiertes CSS

Wenn Sie sich die integrierten CSS-Selektoren der Visual Studio-Vorlagen ansehen, werden Sie feststellen, dass sie auf den Punkt und präzise sind. Spezifizität in CSS, und eigentlich in jedem Code, sorgt dafür, dass die Apps einfacher zu verwalten sind und eine bessere Leistung bieten. Enthält der Code „.fragment header[role=banner]“ wissen Sie genau, für welche Elemente das gilt – in diesem Fall hat ein <header>-Element ein Rollenattribut mit dem Wert „banner“ innerhalb eines als „fragment“ klassifizierten Elements. Beachten Sie dabei, dass Browser CSS von rechts nach links parsen. Daher sollten die spezifischsten Selektoren ganz rechts stehen, damit der Browser das entsprechende DOM-Element schneller findet.

Für eine einfachere Verwaltung sorgen Sie, wenn Sie visuelle Indikatoren nicht per Skript umschalten, sondern sich bestimmte CSS-Features zunutze machen, wie etwa Pseudoselektoren für die Zustände „daraufzeigen“, „aktiv“, „deaktiviert“, „aktiviert“ und weitere visuelle Zustände. WinJS definiert Pseudoselektoren für viele Steuerelemente nach Bedarf. Beispielsweise können TextBoxes und CheckBoxes zwischen den Zuständen „deaktiviert“ und „aktiviert“ und Anker zwischen den Zuständen „daraufzeigen“ und „aktiv“ wechseln. Für Windows 8.1 gibt es sogar noch mehr CSS-Animationen (bit.ly/KDVSPU). Machen Sie sich mit ihnen vertraut, damit Sie nicht unnötigerweise dieselben Animationen über JavaScript realisieren.

Effizienz ergibt sich sowohl durch eine ordentliche Dateiorganisation als auch durch effizienten Code. Eine Datei namens „default.css“ befindet sich im Ordner „\css“, und alle integrierten HTML-Seiten enthalten Verweise auf diese Datei. Das CSS in Abbildung 5 befindet sich zusammen mit regulären Formatvorlagenregeln und Medienabfragen in dieser Datei. Die Datei „default.css“ kann, anders als „ui-dark.css“ und „ui-light.css“, geändert oder gelöscht werden.

In Visual Studio-Projektvorlagen werden Dateien in Ordner organisiert, die verwandte Elemente enthalten, wie „groupedItems.html“, „groupedItems.js“ und „groupedItems.css“ in dem Ordner „\pages\groupedItems“ oder andere ähnliche Strukturen. Sie können Dateien weiterhin auf diese Weise in Ordnern organisieren, Sie können sie aber auch ganz nach Belieben anordnen. Möglicherweise organisieren Sie die Projektstruktur um, da Sie das Model-View-ViewModel(MVVM)-Muster ausprobieren möchten. In diesem Fall könnten die CSS-Dateien in unterschiedlichen Ordnern gespeichert werden. Vielleicht möchten Sie aber gerne das gesamte CSS in einem Ordner haben. Das können Sie gerne machen. Die Hauptsache ist, Ihre Dateiorganisation ergibt für Ihr Projekt Sinn und ist einfach in der Handhabung.

Zur besseren Lesbarkeit empfiehlt es sich, das CSS in Funktionalität oder Features gruppiert in separate Dateien aufzuteilen. Ein Beispiel: Sie haben CSS für ein Steuerelement, das von vielen Seiten verwendet wird, wie etwa ein Flyout. Diese Datei können Sie entweder in einen Ordner für das allgemeine CSS ablegen oder in denselben Ordner wie das Flyout. Es gibt nichts Schlimmeres, als sich durch eine CSS-Datei zu wühlen, die mit CSS gefüllt ist, das nichts mit den Seiten zu tun hat, die darauf verweisen. CSS, das die folgenden Kriterien erfüllt, sollte sich beispielsweise in einer eigenen Datei befinden:

CSS für ein bestimmtes Flyout-Steuerelement oder eine Einstellungsseite.
CSS, das nur Farben und andere Gestaltungselemente enthält, da Sie daraus Designs erstellen können. Dann können Sie CSS-Dateien wie Farbproben ganz nach Bedarf austauschen.
CSS in Medienabfragen für ein bestimmtes Szenario wie etwa angedockte Ansichten oder gefüllte Ansichten. Dieses CSS kann sich in einer eigenen Datei in demselben Verzeichnis befinden wie die Seite, die darauf verweist.

Auf diese Weise können Sie einzelne Funktionseinheiten des CSS nach Bedarf verwenden, anstatt für jede Seite das gesamte CSS zu laden, unabhängig davon, ob das CSS auf der Seite verwendet wird oder nicht. Beachten Sie, dass es sich hierbei nur um Leitfäden handelt und jedes Projekt mit seinen unterschiedlichen Anforderungen einzigartig ist.

Projekte für Windows Store-Apps führen den Code lokal auf dem Gerät aus, anstatt zunächst das CSS oder ein Skript herunterzuladen. Daher ist es nicht wie bei Webprojekten notwendig, CSS zu paketieren und möglichst klein zu halten. Natürlich muss der Code vor dem Ausführen erst von der App in den Arbeitsspeicher geladen werden. Aus diesem Grund sollten Sie weiterhin zugunsten der Leistung und Lesbarkeit überfrachteten Code vermeiden.

Fokus auf die App-Darstellung

Das Formatieren der vielen integrierten WinJS-Steuerelemente ist ein Kinderspiel, da das Framework modernste CSS3- und HTML5-Features bietet. Das zentrale CSS in WinJS sorgt für eine moderne, flüssige und flexible Benutzeroberfläche, die auf Veränderungen des App-Ansichtszustands reagieren kann, wenn der Benutzer zwischen Vollbild und angedockter Ansicht wechselt. Da das zentrale WinJS-CSS bereits vorkonfiguriert ist, können Sie sich auf die Erstellung der App konzentrieren. So müssen Sie sich nicht länger mit strukturellem CSS zum Erstellen einer modern aussehenden Benutzeroberfläche abmühen.

Rachel Appel ist Beraterin, Autorin, Mentorin und frühere Microsoft-Mitarbeiterin mit über zwanzigjähriger Erfahrung in der IT-Branche. Sie nimmt an wichtigen Branchenkonferenzen wie Visual Studio Live!, DevConnections und MIX als Rednerin teil. Ihr Fachbereich ist die Entwicklung von Lösungen, bei denen geschäftliche und technologische Aspekte in Einklang gebracht werden und in denen führende Microsoft- und offene Webtechnologien zum Einsatz kommen. Besuchen Sie Rachel Appel auf ihrer Website unter rachelappel.com.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Eric Schmidt (Microsoft)

Freigeben über