CSS3 基本使用者介面模組

From HTML5 Chinese Interest Group Wiki
(Redirected from Css3-ui)
Jump to: navigation, search

參照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’ 屬性

名称: ime-mode
取值: auto | normal | active | inactive | disabled
初始: auto
适用于: 文字欄位
继承:
百分比: (不適用)
媒介: 互動
计算值: 同指定值
动画:

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;
}
使用者可把這個例子的 CSS 放到使用者樣式檔案裡以迫使密碼輸入欄位的行為為預設行為。
注:一般來說,讓公用網站操縱輸入法設定是不適當的,本屬性應該用在 Web 應用程式。網頁作者不該靠關密輸入法來避免擴充字符從表單送出,就算輸入法停用了,使用者還是可以將擴充字符貼上到表單的欄位裡。
注:‘ime-mode’ 處於危機狀態。

附錄

致謝

(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 工作組跳轉)