移動網站開發——CSS

bill.kang發表於2012-11-15
網站CSS

上一篇我們談到了移動網站中的標籤，想必很多人也很想了解Mobile CSS的情況吧，本文將和大家一起探討移動網站中的CSS標準。

介紹

Mobile css的標準也是有些複雜的，與前一篇文章中提到的類似，之前存在著一個W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事實上它們都是CSS 2.1的子集，而且內容非常接近，不同的是，WAP CSS 1.0針對移動裝置加入了一些擴充套件，這些擴充套件通過-wap-字首來實現。

後來，W3C將二者進行了整合，吸收了WAP CSS1.0的一些優點，推出了CSS Mobile Prifile 2.0規範，它也是CSS 2.1的一個子集。我們本文將主要討論這個規範。

 

CSS Mobile Profile 2.0中的CSS支援

因為這是CSS 2.1的一個子集，那麼我們對這個規範的內容應該不會陌生，我們通過這個表格可以很直觀的看到CSS MP對CSS的支援情況：

  支援的 不支援的
選擇器 全域性選擇器(*)、型別選擇器(比如h1, div, p等)、子選擇器(p>span)、連結偽類 (:link,:visited)、動態偽類(:active, :focus)、類選擇器、id選擇器、分組(h1,h2,h3{}…) :first-child、:hover 、:lang() 偽類， :first-letter 、:first-line 偽元素， 兄弟選擇器(比如h1 + p)，屬性選擇器 (比如 a[href], a[target=”_blank”])
背景和邊框 background, background-color, background-image, background-repeat, background-attachment, background-position, border, border-width, border-color, border-style(注1) 無
定位 position, top, right, bottom, left, z-index 無
列表 list-style, list-style-image, list-style-type list-style-position
基本的盒模型 display(注2), margin, padding, height, min-height, max-height, width, min-width, max-width, float, clear, visibility, overflow(注3), overflow-style(注4) 無
色彩 color 無
字型 font, font-family, font-style, font-variant, font-weight, font-size(注5) 無
文字 text-indent, text-align, text-decoration(注6), text-transform, white-space word-spacing, letter-spacing, unicode-bidi
線形 vertical-align(注7) line-height
基本的使用者介面 utline, outline-color, outline-style, outline-width cursor
滾動 marquee-style, marquee-direction, marquee-play-count, marquee-speed 無
@規則 @charset, @import, @media(注8), @namespace @page
  • 注1：border-style只支援常用的none、dotted、dashed、solid和inherit，其它的幾個並沒有被列入規範。
  • 注2：display僅限於inline、block、list-item、none和inherit，不支援run-in和inline-block
  • 注3：overflow只支援auto
  • 注4：overflow-sytle只支援marquee值
  • 注5：font-size只支援大小關鍵詞，比如small、medium、bigger等，px、pt和百分比等不被支援。
  • 注6：text-decoration只支援none、blink、underline和inherit等，overline、line-trough不被支援。
  • 注7：vertical-align 只支援top, middle, bottom, baseline 和inherit。sub, super, text-top, text-bottom, 百分比和長度不被支援
  • 注8：@media規則只支援 handheld 和all 媒體型別。

用法與瀏覽器支援

就像之前文章裡面提到的那樣，目前絕大多數的手機是支援XHTML Basic 1.0和XHTML MP 1.0標準的，這就意味著在某種程度上移動網站的HTML/XHTML程式碼是可以與桌面版的相相容甚至完全一致的。甚至有些網站的移動版直接使用HTML 4/5或者XHTML 1.0的DTD。這樣移動版網站可以直接通過handheld的media type來制定一個移動頁面專用的CSS檔案：

1
 
<link rel="stylesheet" media="handheld" href="">

絕大多數傳統手機上的瀏覽器都支援handheld媒體型別，包括opera mini和windows mobile中的IE。

其實考慮到傳統手機的自身的限制和行動網路速度的限制，通過media type來載入外部樣式是不可取的，通常用於移動版頁面的樣式不多，而多載入一個外部樣式的代價是巨大的。所以，大部分的網站的移動版採用在head中嵌入樣式表的方式。

如果，你一定要採用外部樣式的話，最好不要用@import，因為有些手機瀏覽器並不支援。

特別值得一提的是，mobile webkit(包括iphone safari和android chrome lite等)不支援handheld。

而在視覺上的差異，主要是字型的表現差異，這和各個手機瀏覽器有關，想要做的畫素完美，不是件容易的事情。

總結

雖然，移動網站貌似不用考慮太多的功能，佈局簡單，功能簡單，但是現實並沒有想象中的那麼簡單。移動網站面臨的最大的問題是瀏覽器眾多，手機終端差別又很大，開發的時候，會遇到這種細節問題。

目前國內移動網站的前端開發，還處於起步階段，隨著iPhone和Android等智慧手機的流行，針對高階智慧手機裝置的網站開發將逐漸盛行，如 @SMbey0nd 所言，Mobile Web風暴，即將席捲中國，對於這個相對較新的領域，我們還有很多事情要做。

其實本文僅僅涉及到Mobile CSS的一些非常基礎的方面，希望可以拋磚引玉，引起更多的人研究和分享移動網站開發的前端技術和技巧，如果你有較深入的研究，歡迎通過前端觀察與大家分享。

參考

 

原文地址：http://www.iptu.net/index.php/archives/2726.iptu

adpics.aspx?source=kbh1983&sourcesuninfo

相關文章