CSS3 基本使用者介面模組

參照W3C工作組於2012年一月的最新稿件

介紹

衆所周知，CSS3 文檔由一系列不同的模組組成，並允許使用者使用特定的模組靈活的實現項目成果。

這個 Wiki 頁面（CSS3 基本使用者介面模組）中將會描述有關選擇器以及 CSS 屬性, 意在讓開發者能夠根據狀態、元素分割、屬性和值, 這四個關鍵值進行使用者界面的自定義。

之前, 在 CSS 1 文檔的 2.1 章節和 CSS 文檔的 18 章中已經介紹過與僞類相關的不同使用者界面。在選擇器的 6.6.4 章節中也描述了多種不同的額外的（與僞類和僞元素相關）的不同使用者界面。

此份工作草案將在上面所提文檔的基礎上進行發展, 通過 CSS （層疊樣式表），基於額外使用者介面狀態的元素和頁面分塊屬性進行樣式添加，並將元素的動態實現效果在基於特定的 HTML4 / XHTML1 元素和屬性進行更換

規範符合

定義

項目分類

擴展

與其他模組的依賴關係

使用者界面選擇器

使用者界面狀態: 僞類的使用

:active 細節描述

:indeterminate 不定僞類的使用

:default

:valid 以及 :invalid

:required 以及 :optional

:read-only 以及 :read-write

使用者界面元素節段: 僞元素的使用

::value

::choices

::repeat-item

::repeat-index

元素圖示

"內容"屬性

"圖塊"屬性

盒模型加強

‘box-sizing’ 屬性

輪廓屬性

‘outline’ 本體屬性

‘outline-width’ 寬度屬性

‘outline-style’ 樣式屬性

‘outline-color’ 顏色屬性

‘outline-offset’ 透明屬性

調整大小及溢出

‘resize’ 尺寸屬性

溢出忽略: ‘text-overflow’ 文字溢出屬性

點擊裝置與鍵盤

點擊互動

鍵盤控制

瀏覽順序序列化 ― ‘nav-index’ 屬性

有向聚焦瀏覽 ― ‘nav-up’、‘nav-right’、‘nav-down’、‘nav-left’ 屬性

輸入法 ― ‘ime-mode’ 屬性

CSS 屬性 ‘ime-mode’ 可以控制文字欄位輸入法的狀態。

auto

不更改現在輸入法的狀態。預設值。

normal

輸入法狀態應該為正常 ― 此值可以在使用者樣式表裡面使用，以覆蓋頁面設定。

active

輸入法初始為啟動 ― 除非使用者退出，輸入文字的時候會使用輸入法。

inactive

輸入法初始為停用，但是使用者可啟動輸入法。

disabled

輸入法處於關閉狀態且使用者不可啟動輸入法。

<input type="text" name="name" value="initial value" style="ime-mode: disabled">

input[type=password] {
    ime-mode: auto !important;
}

附錄

致謝

(to be continued ...)

變更

(to be continued ...)

参考書目

規範性文獻

[CSS 2.1]

[CSS 3 Color]

[RFC1738]

[RFC1808]

[RFC2119]

[RFC1738]

[SELECT]

[UAX29]

[URI]

參考性文獻

[CSS1]

[CSS2]

[CSS3GENCON]

[CSS3MARQUEE]

[CSSUI]

[HTML401]

[HTML5]

[SVG10]

[SVG11]

[UAAG10]

[XFORMS11]

[XHTML10]

[XHTML11]

[XML10]

HTML 下的默認樣式表

本部分僅供參考.

以下爲 HTML 表單控制時的的基本樣式表, 包括部分附加的動態屬性呈現方式 (句段需要改進)tommy

:enabled:focus {
 outline: 2px inset;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
textarea,
input,
input[type=text],
input[type=hidden],
input[type=password],
input[type=image]
{
 display: inline-block;
 white-space: nowrap;
}

button
{
/* white space handling of BUTTON tags in particular */
 white-space:normal;
}

input[type=reset]
{
/* default content of HTML4/XHTML1 input type=reset button */
 content: "Reset";
}

input[type=submit]
{
/* default content of HTML4/XHTML1 input type=submit button */
 content: "Submit";
}

input[type=button],
input[type=reset][value],
input[type=submit][value]
{
/* text content/labels of HTML4/XHTML1 "input" buttons */
 content: attr(value);
}

textarea
{
/* white space handling of TEXTAREA tags in particular */
 white-space:pre-wrap;
}

input[type=hidden] 
{
/* appearance of the HTML4/XHTML1 hidden text field in particular */
 display: none;
}

input[type=image]
{
 display: inline-block;
 content: attr(src,url);
 border: none;
}

select[size]
{
/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
 display: inline-block;
 height: attr(size,em);
}

select,select[size=1]
{
/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
 display: inline-block;
 height: 1em;
 overflow: hidden;
}

select[size]:active
{
/* active HTML4/XHTML <select> w/ size more than 1 - appearance of active list */
 display: inline-block;
}

optgroup,option
{
 display: block;
 white-space: nowrap;
}

optgroup[label],option[label] 
{
 content: attr(label);
}

option[selected]::before 
{ 
 display: inline;
 content: check; 
}

*[tabindex] { nav-index:attr(tabindex,number) }


/* Though FRAME resizing is not directly addressed by this specification,
   the following rules may provide an approximation of reasonable behavior. */

/*

frame { resize:both }
frame[noresize] { resize:none }

*/

CSS 測試組件

本附錄僅供參考.

本文檔的測試案例由CSS 測試組件文檔參考而來, 並遵循 CSS 2.1 測試案例指引。 (to be continued ...)

關聯問題（CSS 工作組跳轉）