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 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 |
就像之前文章里面提到的那樣,目前絕大多數的手機是支持XHTML Basic 1.0和XHTML MP 1.0標準的,這就意味著在某種程度上移動網站的HTML/XHTML代碼是可以與桌面版的相兼容甚至完全一致的。甚至有些網站的移動版直接使用HTML 4/5或者XHTML 1.0的DTD。這樣移動版網站可以直接通過handheld的media type來制定一個移動頁面專用的CSS文件:
新聞熱點
疑難解答