《HTML5觸摸界面設計與開發》——2.2 建立标記

本節書摘來自異步社群《html5觸摸界面設計與開發》一書中的第2章，第2.2節,作者： 【美】stephen woods 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

對于這個網站，我們會用“移動置後”的方案來編寫，但我們會在移動版和桌面版上使用相同的标記。我們将專注于語義标記，因為網站需要在移動裝置上工作，是以我們還得考慮dom和css的性能。

注: “移動置後”的缺點之一是移動裝置需要下載下傳和解析所有的桌面樣式。如果采用“移動優先”，那麼移動裝置可以安全地忽略那些不需要的樣式。另外，這是一個需要逐一分析的問題。

為一個文檔建立标記時，我把它分成區域，這樣不僅有合理的語義，而且在設計和添加樣式時也很友善。對于加州鳥類站點，我把導航連結放置于一個

标簽内，再插入一個

标簽，來表示桌面版的側邊欄或移動版的頂部導航欄。對于内容，我建立了一個class為main的

标簽，其中包含了照片、标題和内容的拷貝。

标記文檔如代碼清單2.1所示。

你會發現，有不少看似多餘的class。例如，導航連結

标簽有“nav-li”的class。這有兩個原因：

當代碼量變大時，class會更容易管理。使用nav-li比使用選擇器“nav ul li”更簡潔、更幹脆、更容易進一步開發。

由于網站要能在世界上最慢的免費的android手機上運作，當涉及css選擇器的性能時，我們需要非常挑剔，也就是說要避免使用後代選擇器。

一個直接的反面例子，浏覽器解析css選擇器是從右往左的。這意味着，如果它看到一個如“nav ul li a”的規則時，它首先必須獲得所有比對a的元素清單，然後檢檢視它是不是li的後代，再按相同規則繼續檢查。後代選擇器雖然看起來友善，但它的性能開銷是最大的。