發行項
09/09/2015

本文章是由機器翻譯。

新式應用程式

透過 CSS 針對 WinJS 應用程式建置回應力更佳的新型 UI

用 CSS 工作留下許多開發人員感到沮喪因為它是完整的細微差別。對一個選擇器或 HTML 元素甚至小改動往往傳播和影響到另一個。想要保持清潔和有效的 CSS 可以是相當困難的考慮到其 numerable 的怪癖 — — 尤其是當針對多個瀏覽器。幸運的是，如果你 JavaScript (WinJS) 的應用程式開發 Windows 庫中, 內置的Visual Studio專案範本的 CSS 是靈活但一致和可維護性。Visual Studio專案範本包含代碼，是回應和現代的使用者介面設計的基礎。

內置 CSS 用於 Windows 應用商店的應用程式

Windows 存儲應用程式使用 JavaScript 生成的所有專案範本都包含兩個基本樣式表或主題 — — 黑暗（預設值）和光 — — 分別命名為ui-dark.css 和 ui-light.css 的檔中。這些檔是一套核心的Visual Studio專案引用節點下的 CSS 資料夾中的專案檔案的一部分。有將近 4000 行的 CSS 在核心 CSS 檔因為他們構造一個如下的 Windows 使用者介面設計，包括回應 Windows 管理單元查看所有原則的UI 和介質類型的更改。您不應嘗試修改 (他們是唯讀) 的內置樣式表，但相反改寫自己的 CSS 檔中的內置樣式。

若要使用內置的 Windows 應用商店 app CSS，以下引用添加到 < 頭 > （請注意連結中的"2.0"Windows 8.1，雖然"1.0"將用於 Windows 8) 任何頁的部分：

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

在路徑的開始的兩個正斜杠表示對 WinJS 核心庫（也稱為"共用庫，"而不是您的應用程式套裝軟體中的本地專案檔案）的引用。在 Windows 應用商店應用程式使用 JavaScript 生成以單斜杠開頭的路徑表示在專案的根資料夾的路徑開始，單正斜杠，請參閱本地專案檔案。

Windows 存儲應用程式使用 JavaScript 生成雇用充足供應商首碼（例如，-ms 網格、-flexbox 等等）這樣的技術最先進的 CSS 是可用來在應用程式中使用。你會發現在 WinJS 應用程式中其他高科技 CSS 是 CSS3 RGBA 顏色、 Web 打開字體格式（WOFF）字體和媒體查詢。

用 CSS 樣式 WinJS 控制項

WinJS 控制項是 HTML 元素的擴展，所以你樣式 WinJS 控制項用 CSS 就像任何 HTML 標籤。Visual Studio專案範本包含對在黑暗與光明的風味中創建每個 HTML 元素和 WinJS 控制的現代 UI 樣式的 CSS 引用。當然，你不綁定到這些樣式，還可以自由修改它們你認為合適，補充您的公司或產品品牌或主題。然而，它是重要的是要保持與新的 Windows 使用者介面，以免混淆使用者的一致性。

圖 1 演示分別使用黑暗與光明的主題，幾個基本和普通 HTML 和 WinJS 控制項的代碼。圖 2 顯示此代碼的輸出。

圖 1 基本的 HTML 和 WinJS 的代碼控制

<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>

圖 2 常見 HTML 和黑暗與光明中的 WinJS 控制項預設樣式

正如你可以看到的從審查圖 2，反映出新的 Windows 使用者介面的控制項的預設樣式。HTML 和 WinJS 控制項的完整清單還可以利用 Windows 開發中心在 bit.ly/w1jLM5。

WinJS 控制景觀詳細看一下，在看到我的專欄，"掌握控制項和設置在 Windows 存儲應用程式建立與 JavaScript，" msdn.microsoft.com/magazine/dn296546。在此期間，我們看看幾個重要的控制項樣式設置準則：AppBars、控制台和用於。

AppBars AppBars 是基本 UI 元件的任何 Windows 應用程式商店。CSS 選取器存在樣式使用 AppBar，包括 AppBar 作為一個整體，和個別按鈕標籤、圖像和兩個常規的工具提示和懸停狀態的每個方面。這意味著你得到完全的控制 AppBars 的外觀和感覺。一旦你已經通過覆蓋.win appbar 類樣式本身的 AppBar，你可以移動到單個的命令。因為 AppBar 按鈕是 WinJS 控制項，資料-贏-選項屬性包含所有必要的資訊，為了正確地設置命令按鈕，通過設置標籤、圖示、節和工具提示屬性：

<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>

你可以看看遠遠不同于簡單的預設條紋跨螢幕的底部通過調整下面的類別選取器的樣式的 AppBar：

.win-appbar：AppBar 作為一個整體的樣式。
.win-命令：個別的 AppBar 按鈕的樣式。
.win-commandimage：樣式命令按鈕圖像。
.win-commandring：AppBar Button 周圍環的樣式。
.win-commandimage:hover 和.win-commandring:hover：樣式命令按鈕圖像和環懸停狀態。

正如您所看到的有 AppBar 的每一個方面的樣式。

控制台控制台是互動式的快顯視窗。在 Windows 應用商店的應用程式，您通常實現控制台以收集使用者的輸入，通常作為應用程式的設置魅力的一部分。控制台是實現設置或保存一些資料使用者不經常訪問的好方法。例如，您可以使用它們提供一份隱私權聲明，所需的應用程式接受進入 Windows 存儲區。造型彈出是一樣容易覆蓋.win 彈出選擇器。CSS 系統包含設置.max 寬度和.max-高度，所以如果你需要收集整個表單的資料，您可能需要調整這些。

彈出是一個 < div，> 直到使用者調用它從魅力或 AppBar 命令，並顯示在螢幕上彈出然後保持隱藏和視線的元素。雖然其他控制項生活在控制台，設置這些控制項的樣式不會改變，因為他們只是 HTML。

ListView 很有可能最複雜的 WinJS 控制項，清單視圖提供網格或清單中顯示多個資料項目的方法。用於還回應觸摸和滑鼠事件發起的使用者，這樣就允許使用者選擇一個專案或調用一個操作。在 Windows 8.1 開始，ListView 控制項允許使用者拖動、刪除和重新排列專案。

之前使用 ListView 控制項，您必須知道它是如何工作。ListView 控制項包括四個主要的移動部件：ListView 本身，和視區、表面積和專案。專案存在表面區域，是可滾動的清單視圖的區域內部。表面面積存在，所以它意義視區有捲軸，如中所示的內視區，移動圖 3。

圖 3 視區和它的表面積結合，使 ListView 控制項

視區和它的表面積充分的專案一起組成 ListView 控制項。因為 ListView 控制項中包含這些業務上不同的部分，有很多詳細的指南為造型，它概述了在 Windows 開發中心在 bit.ly/HopfUg。現在，我會在最重要的事情要知道關於造型 ListView 控制項：

.win-listview：整個清單視圖的樣式。
.win-視區：樣式清單視圖的視區。
.win-表面：樣式清單視圖的可捲動區域。

這些運動部件讓你做的事情如應用背景圖像沿與專案的滾動。當表面面積大於視區時，視區顯示捲軸（垂直或水準，根據需要）。

造型 ListView 項很簡單。有.win 專案和.win 容器使用的類的。ListView 中每個專案會保存項的圖像和文字欄位的容器中。這個容器是真的只是 HTML 範本定義的元素的加入在清單視圖中創建專案。中的代碼圖 4 演示如何定義該範本和其相應的清單視圖。它創建一個 WinJS.Binding.Template 控制項，清單視圖用來顯示資料。

圖 4 代碼來定義一個範本和其相應的清單視圖

<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>

正如你可以看到在圖 4，有 < div > 組成的網格和拆分專案範本中內置的 ListView 的專案範本的元素。在運行時，應用程式的執行引擎注入.win 容器和.win 項類為這些元素，所以您不會在發展，但是你看到這些選擇器在代碼中的可以覆蓋它們在應用您自己的樣式的 CSS 檔。在專案範本清單視圖代碼、.item、.item 圖像、.item 標題、.item 副標題和.item 疊加是作為選擇器，可以修改所有可用來指定每個網格內的個別專案的外觀和感覺。

沒有清單或網格是排序、分組和執行其他操作，會影響其成員的能力不完整的。所以當然有分組的專案，以及個別部分的樣式。通過覆蓋.win groupheader 類別選取器的樣式組標題和通過覆蓋.win 進展中的樣式顯示進度。

流體 CSS 是回應教科文組織統計研究所

Visual Studio中的網格、拆分、導航專案包含 WinJS CSS 選取器的 HTML5 語義元素以確保流體和現代的佈局與協同工作。中的代碼圖 5 顯示的 CSS 和 HTML 需從網格範本創建的網格佈局。通知的.fragment 類定義的行和列的網格使用行-ms-網格-和--質譜-網格-列首碼。然後它將這些首碼和其他選擇器應用於 < div > 中的元素圖 5。語義的 < 頭 > 和 < 節 > 元素明確定義在每個都有哪些類型的內容。

圖 5 的基礎 HTML 和 CSS 的頁面片段

.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>

因為此 CSS 是網格的一部分和拆分專案範本，你不用擔心的乏味工作，創建一個更改基於資料或應用程式的狀態變化的流體網格上考慮 — — 它是內置的。

Windows 存儲 JavaScript 應用程式範本使用的 CSS 框模型 (看我的博客文章，"元素的顯示方式和定位與 CSS 框模型，指南》 bit.ly/xxATgL) 作為網頁和 CSS 網格佈局的佈局（請參閱詳細資訊在全球資訊網協會 [W3C] 現場的 bit.ly/14yzx2h) 來創建使用者介面的回應。對垂直清單和回後更改管理單元和完整視圖之間的網格的網格更改的通知。

大多數 Windows 應用商店的應用程式中的預設專案範本利用 CSS 媒體查詢提供一個複雜的使用者介面，回應的設備和瀏覽器的大小、方向和解析度更改。如果你想要瞭解更多有關媒體查詢，在看到我的博客張貼、"創建移動網站佈局與 CSS 媒體的詢問，" bit.ly/1c39mDx。

應用程式使 Windows 存儲區使用的媒體查詢的另一個原因是由於 Windows 8 支援四種不同的檢視狀態的應用程式：充分，管理單元，填充和肖像。當使用者將應用程式放入管理單元或填充視圖時，它是從概念上講相同，訪問該應用程式從一個不同的設備，因為尺寸和瀏覽器的定位相當大幅度改變。

後檢查內置的 CSS，你會發現許多 @media 規則的四個應用程式檢視狀態以及高對比和可訪問查看狀態。這裡是檢測管理單元的媒體查詢檢視和全屏肖像狀態：

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

通常情況下，工程的完整視圖工程的同一 CSS 以及填充視圖 (四分之三的螢幕）。前面的查詢表示的兩個最受歡迎的媒體功能領域的 Windows 應用商店的應用程式，但在 W3C 網站上有很多更多的媒體功能 bit.ly/gnza0F。

Windows 應用商店的應用程式使用高效率和有組織的 CSS

看看Visual Studio範本的內置的 CSS 選取器，您會注意到他們是尖銳和準確。在 CSS 中的特異性（在任何代碼中，真的）結果更容易維護和性能較好的應用程式。當你看到".fragment 標頭 [角色 = 橫幅]"在代碼中，你知道到底哪些元素它適用 — — 在這種情況下，一個 < 頭 > 具有一個角色屬性值為"旗幟"列為"片段"某個元素內的元素。請記住瀏覽器解析 CSS 從右至左，所以這樣，瀏覽器就可以找到的匹配的 DOM 元素，速度更快的最特定的選擇器應該去在右側。

而不是使用腳本來切換視覺指標，利用某些 CSS 功能例如懸停，偽選擇器處於活動狀態，已禁用、啟用和其他可視狀態可確保更容易維護。 WinJS 定義偽選擇器所需的多個控制項。例如，文字方塊和核取方塊可以禁用和啟用狀態之間切換和錨點可以懸停和活動狀態之間切換。有更多的 CSS 動畫的 Windows 8.1 (bit.ly/KDVSPU），所以在談到 JavaScript 要做的同樣的動畫之前出來查看他們。

效率是指正確的檔組織，以及高效的代碼。在 \css 資料夾中，住在名為 default.css 的檔和所有內置 HTML 頁包含對它的引用。您在中看到的 CSS 圖 5 住在此檔中，除了常規樣式規則，以及媒體的詢問。您可以修改或刪除 default.css，不同的使用者介面-dark.css 和 ui light.css 檔。

Visual Studio專案範本將檔組織成資料夾，其中包含相關的專案，比如 groupedItems.html，分組Items.js 和 groupedItems.css 以及其他類似結構的 \pages\groupedItems 資料夾中。您可以繼續將檔組織成資料夾這種方式，但您也可以重新排列中您希望的任何方式的檔。也許重組專案結構，因為你想要嘗試使用模型-視圖-ViewModel (MVVM) 模式，和 CSS 檔在這種情況下，可以去到不同的資料夾。也許您想要的所有 CSS 相反都扔到一個資料夾。真的沒關係，只要您的檔組織為您的專案有意義，它是易於維護。

為可讀性的緣故，爆發 CSS 到單獨的檔，按其功能或功能排列。例如，您可能由很多的頁面，例如彈出使用單個控制項有 CSS。該檔可以在資料夾中常見 CSS 或者可以在彈出的同一資料夾中。沒有什麼比通過 CSS 檔犁充滿無關與引用它的頁面的 CSS。例如，符合以下標準的 CSS 應有其自己的檔：

為特定彈出控制項或設置頁面的 CSS。
載有只是顏色和美學，這使您可以創建主題的 CSS。然後可以交換和傳出的 CSS 檔，如顏色色板作為所需的基礎上。
媒體查詢管理單元或填充的視圖等特定方案中的 CSS。這個 CSS 可以去自己在引用它的頁面相同的目錄中的檔。

這種方式您可以使用 CSS 的每個功能單元作為你需要，而不是不必載入的每一頁的所有 CSS，不管頁面使用 CSS。記住，這些都是唯一的準則，每個專案是獨一無二的可能會有不同的需求。

Windows 應用商店 app 專案執行的本地設備，而不是第一，下載的 CSS 或腳本，所以那裡是無需捆綁和壓縮 CSS 和像你這樣的腳本會在 Web 專案中的代碼。當然，應用程式必須載入代碼到記憶體在執行之前，所以仍要避免臃腫的代碼的性能和可讀性的原因。

專注于構建應用程式

造型很多內置 WinJS 控制項是一個單元，因為該框架提供尖端的 CSS3 和 HTML5 功能。核心 CSS 在 WinJS 中創建一個現代的、流動的和靈活的使用者介面，使用者充分和對齊視圖之間切換時的回應中的應用程式檢視狀態的更改。在框中直接可用的 WinJS CSS 意味著你的核心可以集中精力建立應用程式，而不是擺弄結構性的 CSS 創建一個現代風格的使用者介面。

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI.Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros.Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta.Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

衷心感谢以下技术专家对本文的审阅：Eric Schmidt（Microsoft）