CSS Basic User Interface Module Level 4

1.1. 目的

この仕様の目的は、 次に挙げる~~目標を達成することである： ◎ The purpose of this specification is to achieve the following objectives:

• `CSS21$r, `~level 3$ による~UI特能を拡張する。 ◎ Extend the user interface features in [CSS21] and [CSS-UI-3]
• ~CSSによる追加的な仕組みを供して、 ~HTMLにおける他の動的な呈示に関係する特能を［ 増補する／置換する ］。 ◎ Provide additional CSS mechanisms to augment or replace other dynamic presentation related features in HTML.
• ~UIの構築を支援するための方向的~navi~propを導入する — それは、 方向的~navi~modelを用立てる。 ◎ Introduce directional navigation properties to assist in the construction of user interfaces which make use of a directional navigation model.

2.1. 値~定義

【 この節の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

3.1. 外形線の略式： `outline^p ~prop

`outline$p ~propは、 略式~propであり，［ `outline-style$p, `outline-width$p, `outline-color$p ］すべてを設定する。 多義的になる事例 — `auto^v 値だけ指定されたか、 `auto^v の他に `outline-width^tp 値だけ指定され，明示的な［ `outline-style^tp ／ `outline-color^tp ］値を伴わない事例 — では、［ `outline-style^p, `outline-color^p ］は，どちらも `auto^v に設定される。 ◎ The outline property is a shorthand property and sets all three of outline-style, outline-width, and outline-color. In the ambiguous case where a lone auto value is specified, or if auto is specified together with an <'outline-width'> value, but without an explicit <'outline-style'> or <'outline-color'> value, both outline-style and outline-color are set to auto.

注記： `outline-offset$p ~propは、 この略式~propからは~~意図的に省略される — それは、 外形線の外観ではなく位置を決定するものであり，独立に~cascadeできるようにするため。 加えて，後方-互換性の理由もある。 ◎ Note: The shorthand purposefully omits the outline-offset property, which determines the position rather than the appearance of the outline, so that it can cascade independently, as well as for backwards compatibility reasons.

上に挙げた各種 外形線~propにより作成される外形線は、 ~boxの “上から” 描かれる — すなわち外形線は、 常に手前にあり，~boxや他の~boxの位置や~sizeには波及しない。 したがって、 外形線が表示されようが抑止されようが，~flowし直されることはない。 ◎ The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top and doesn’t influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow.

外形線は：

• 矩形でなくてもヨイ。 例えば，要素が何~行lかに分断されている場合、 それらの各~boxを囲う最小~本数の外形線からなるベキである。 ◎ Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline should be an outline or minimum set of outlines that encloses all the element’s boxes.
• それを成す各部は、 （改行されるときの，`行内$~要素の~borderのように） 線が途切れることなく，輪になるベキである。 ◎ Each part of the outline should be fully connected rather than open on some sides (as borders on inline elements are when lines are broken).
• それを成す各部も、 矩形になることは要求されない。 `~border辺$をなぞる所では，`border-*-radius$p による曲線もなぞるベキである。 ◎ The parts of the outline are not required to be rectangular. To the extent that the outline follows the border edge, it should follow the border-radius curve.
• その位置は、 子孫~boxに影響され得る。 【例えば、子孫~boxが親~boxからはみ出すときは，はみ出た部分も囲うように描かれよう。】 ◎ The position of the outline may be affected by descendant boxes.
• 描かれた外形線の寸法は、 要素の`~ink~overflow区画$に寄与する。 ◎ The dimensions of the drawn outline contribute to the ink overflow area of an element.

~UAは、［ 利用者に~focusの概念を伝達する ］ためとして［ 適切な領域を囲う外形線を決定するための~algo ］を利用するベキである。 ◎ User agents should use an algorithm for determining the outline that encloses a region appropriate for conveying the concept of focus to the user.

注記： この仕様は，外形線の正確な［ 位置／形状 ］を定義しないが、 それは概して，~border~boxの直ぐ外側に描かれる。 ◎ Note: This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.

注記： ~borderとは対照的に、 外形線は どの側でも同じであり， `outline-top^p や `outline-left^p 等々の~propは無い。 ◎ Note: The outline is the same on all sides. In contrast to borders, there are no outline-top, outline-left, etc. properties.

この仕様は、［ 複数の外形線が重合するとき ］や［ 他の要素の背後に部分的に遮られている~box ］に対し，外形線がどう描かれるかは定義しない。 ◎ This specification does not define how multiple overlapping outlines are drawn or how outlines are drawn for boxes that are partially obscured behind other elements.

button { outline: thick solid }

~graphicな~UIは、［ ~page内の どの要素が~focusを得ているか ］を利用者に伝えるためとして，要素の周りに外形線を利用してもヨイ。 これらの外形線は、 ~borderに加えて示される — 外形線の有無が切替わっても，文書は~flowし直されるベキでない。 ~focusは、 文書における利用者-ヤリトリの~subjectである （例：~textを手入力したり~buttonを選択するため）。 ◎ Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus. These outlines are shown in addition to any borders, and switching outlines on and off should not cause the document to reflow. The focus is the subject of user interaction in a document (e.g. for entering text or selecting a button).

:focus  { outline: thick solid black }
:active { outline: thick solid red }

注記： 外形線は、 整形には影響しない （すなわち，~box~modelにおいて空間を占めない） ので，~page上の他の要素と重合することもある。 ◎ Note: Since the outline does not affect formatting (i.e., no space is left for it in the box model), it may well overlap other elements on the page.

3.2. 外形線の太さ： `outline-width^p ~prop

`outline-width$p ~propは、 `border-width$tp と同じ値を同じ意味として受容する。 ◎ The outline-width property accepts the same values as border-width (CSS Backgrounds 3 § 3.3 Line Thickness: the border-width properties), with the same meaning.

3.3. 外形線の~pattern： `outline-style^p ~prop

`outline-line-style@t は、［ 値 `hidden^v は，外形線~styleとして合法でない ］ことを除いて， `line-style$t と同じ値を同じ意味として受容する。 加えて， `outline-style$p ~propは、 値 `auto$v も受容する。 ◎ <outline-line-style> accepts the same values as <line-style> (CSS Backgrounds 3 § 3.2 Line Patterns: the border-style properties) with the same meaning, except that hidden is not a legal outline style. In addition, the outline-style property accepts the value auto.

値 `auto@v は、 ~customな外形線~styleを描画することを~UAに許可する — 概して、 ~platform~UIにおける既定の~styleで，あるいは たぶん~CSSにて述べ得る詳細よりも多彩な~styleで — 例えば、 外縁にある画素が半透明に輝いて現れるような，丸まった辺による外形線など。 ~UAは，［ `outline-color$p ~propも `auto^v ~style外形線の描画に波及するようにしてもヨイが、 この仕様は，その描画が どう影響iされるかは定義しない。 `outline-width$p ~propは、 `outline-style$p が `auto^v のときは無視される。 ~UAは、 `auto^v を `solid^v として扱ってもヨイ。 ◎ The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. User agents may enable authors to influence the rendering of auto style outlines via the outline-color property, but this specification does not define how the rendering is impacted (if at all). The outline-width property is ignored when outline-style is auto. User agents may treat auto as solid.

3.4. 外形線の色： `outline-color^p ~prop

`outline-color$p ~propは、 `border-color$tp を成す すべての値に加え， 次に挙げる~keywordも受容する： ◎ The outline-color property accepts all values of <border-color>, as well as the following keywords:

`auto@v

`outline-style$p が `auto^v をとる下では、 `auto^v に算出され，`~accent色$を表現する。 他の場合、 `currentcolor$v に算出される。 ◎ When outline-style is auto, outline-color: auto computes to auto and represents the accent color. ◎ Otherwise, outline-color: auto computes to currentColor.

`color$t 値の算出d値は、 `算出d色$ `CSS-COLOR-4$r になる。 `image-1D$t の算出d値は、 `CSS-IMAGES-4$r `§ ~1D画像~値＠~CSSIMAGE4#stripes$ を見よ。 ◎ See CSS Color 4 § 14. Resolving <color> Values for the computed value of <color> values, and CSS Images 4 § 4 1D Image Values: the <image-1D> type and stripes() notation for <image-1D> values.

注記： この仕様の以前までの~versionには、 ~screen上の画素に対し色の反転を遂行する追加的な値 `invert^v があった （詳細は、 `~level 3$ の `§ 外形線の色＠~CSSWG/css-ui-3/#outline-color$ を見よ）。 これは，もはや~supportされず、 現代の~UAにおける実装（および実装する意図）の欠如により，除去された。 ◎ Earlier versions of this specification had an additional invert value, performing a color inversion on the pixels on the screen. This is no longer supported, and was removed for lack of implementations (and of intent to implement) in modern user agents. See CSS User Interface 3 § 5.4 Outline Colors: the outline-color property for details.

3.5. 外形線の~offset法： `outline-offset^p ~prop

外形線は、 既定では，`~border辺$のちょうど外側に描かれるが、 そこから外へ~offsetして描くようにすることもアリである。 ◎ By default, the outline is drawn starting just outside the border edge. However, it is possible to offset the outline and draw it beyond the border edge.

`outline-offset$p の算出d値が `0^v でない場合、 外形線は，その分量だけ`~border辺$から外へ~offsetされる。 ◎ If the computed value of outline-offset is anything other than 0, then the outline is outset from the border edge by that amount.

:focus,:active  { outline-offset: 2px }

負な値は、 外形線を~border~boxの中へ縮短させるモノトスル。 絶対~値が大きい負な値でも，外形線を必ず描画できるようにするため、 外形線で描かれる形状の~~外縁な［ 縦幅, 横幅 ］は，どちらも［ `outline-width$p ~propの算出d値の 2 倍~以上 ］にするベキである。 ~UAは、 この拘束を，各~次元ごとに独立に適用するベキである。 外形線が［ 単連結でない，複数個の図形 ］として描かれる場合、 この拘束は，各~図形ごとに別々に適用される。 ◎ Negative values must cause the outline to shrink into the border box. Both the height and the width of the outside of the shape drawn by the outline should not become smaller than twice the computed value of the outline-width property to make sure that an outline can be rendered even with large negative values. User agents should apply this constraint independently in each dimension. If the outline is drawn as multiple disconnected shapes, this constraint applies to each shape separately.

4.1. ~boxの~resize法： `resize^p ~prop

`resize$p ~propは、［ 利用者は，要素を~resize可能かどうか ］および［ 可能になるのは，どの軸においてか ］を指定することを作者に許容する。 ◎ The resize property allows the author to specify whether or not an element is resizable by the user, and if so, along which axis/axes.

`none@v

~UAは、 要素~上に~resize用の仕組みを呈示しない — 利用者には、 要素を直に~resizeする操作の仕組みは与えられない。 ◎ The UA does not present a resizing mechanism on the element, and the user is given no direct manipulation mechanism to resize the element.

`both@v

~UAは、［ 縦, 横 ］両~方向に，~resize用の仕組みを呈示する — 利用者には、 要素の［ 縦幅, 横幅 ］どちらを調整することも許容される。 ◎ The UA presents a bidirectional resizing mechanism to allow the user to adjust both the height and the width of the element.

`horizontal@v

~UAは、 横~方向に限り，~resize用の仕組みを呈示する — 利用者には、 要素の横幅に限り調整することが許容される。 ◎ The UA presents a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element.

`vertical@v

~UAは、 縦~方向に限り，~resize用の仕組みを呈示する — 利用者には、 要素の縦幅に限り調整することが許容される。 ◎ The UA presents a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element.

`block@v

~UAは、 `塊-軸$方向に限り，~resize用の仕組みを呈示する — 利用者には、 要素の`塊~size$に限り調整することが許容される。 ◎ The UA presents a unidirectional block-axis resizing mechanism to allow the user to adjust only the block size of the element.

`inline@v

~UAは、 `行内-軸$方向に限り，~resize用の仕組みを呈示する — 利用者には、 要素の`行内~size$に限り調整することが許容される。 ◎ The UA presents a unidirectional inline-axis resizing mechanism to allow the user to adjust only the inline size of the element.

現在，要素~上の~scroll用の仕組みについては、 `overflow$p ~propを利用して，その外観を制御することもアリである （例： `overflow^p に対する `scroll^v ／ `hidden^v ）。 `resize$p ~propの目的は、 要素に対する~resize用の仕組み （例： ~boxや~widgetの~resize） の［ 外観, 機能 ］に対する制御を許容することにある。 ◎ Currently it is possible to control the appearance of the scrolling mechanism (if any) on an element using the overflow property (e.g. overflow: scroll vs. overflow: hidden etc.). The purpose of the resize property is to allow control over the appearance and function of the resizing mechanism (e.g. a resize box or widget) on the element.

注記： ~resize用の仕組みは、 ~scroll用の仕組みと同じでないし， ~UAによる~zoom用の仕組みにも関係しない。 ~scroll用の仕組みは，［ 要素の内容のどの部位が示されるかを決定することを利用者に許容する ］ものである一方、 ~resize用の仕組みは，［ 要素の~sizeを決定することを利用者に許容する ］ものである。 ◎ Note: The resizing mechanism is NOT the same as the scrolling mechanism, nor is it related to any UA mechanism for zooming. The scrolling mechanism allows the user to determine which portion of the contents of an element is shown. The resizing mechanism allows the user to determine the size of the element.

`resize$p ~propは、 `~scroll容器$を成す要素に適用される。 ~UAは、 `overflow$p ~propの値に関わらず 【`~scroll容器$を成すかどうかに関わらず】， 次に挙げるものに適用してもヨイ： ◎ The resize property applies to elements that are scroll containers. UAs may also apply it, regardless of the value of the overflow property, to:

• 画像や動画を表現している`置換d要素$ — 次に挙げるものなど ⇒ `img$e, `video$e, `picture$e, `svg$e, `object$e, `canvas$e ◎ Replaced elements representing images or videos, such as img, video, picture, svg, object, or canvas.
• `iframe$e 要素 ◎ The iframe element.

生成d内容に対する `resize$p ~propの効果は、 未定義とする。 実装は、 `resize$p ~propを生成d内容に適用するベキでない。 ◎ The effect of the resize property on generated content is undefined. Implementations should not apply the resize property to generated content.

注記： 将来 `CSSPseudoElement$I ~interfaceが実装されたときには、 `resize$p ~propが生成d内容に適用されるようになるかもしれない。 ◎ Note: the resize property may apply to generated content in the future if there is implementation of Interface CSSPseudoElement.

~UAは，要素が利用者により~resizeされたときは、 ~DOM内の［ 要素の`~style属性$ ］内の［ `width$p, `height$p ］~prop — 片方の次元のみ~resizeされた場合は，対応する~propのみ — を［ 利用者から指示された~sizeによる `px^u 単位の長さ値 ］に設定するとする — 【~style属性~内に】既存の~prop宣言があれば、 その `!important^css を除く部分を置換して。 ◎ When an element is resized by the user, the user agent sets the width and height properties to px unit length values of the size indicated by the user, in the element’s style attribute DOM, replacing existing property declaration(s), if any, without !important, if any. ◎ If an element is resized in only one dimension, only the corresponding property is set, not both.

~resizeする精確な方向（すなわち，要素のどの隅を改めるか）は、 ~CSS~layoutに関するいくつもの要因 — 要素は`絶対的に位置され$ているかどうか, 要素は`right$p, `bottom$p ~propを利用して位置されているかどうか, 要素の言語が右横書きかどうか, 等々 — に依存し得る。 ~UAは、 利用者に~resize用の仕組みをどう伝達するかを決めるときには， 次を考慮するベキである ⇒＃ ~resizeする方向（~CSS~layoutにより決定されるとおりに）, ~platformの慣行や拘束 ◎ The precise direction of resizing (i.e. altering the top left of the element or altering the bottom right) may depend on a number of CSS layout factors including whether the element is absolutely positioned, whether it is positioned using the right and bottom properties, whether the language of the element is right-to-left etc. The UA should consider the direction of resizing (as determined by CSS layout), as well as platform conventions and constraints when deciding how to convey the resizing mechanism to the user.

~UAは、［ 利用者が要素を~resizeできる範囲 ］に対し課す拘束を［ `min-width$p, `max-width$p, `min-height$p, `max-height$p ］によるものに限るモノトスル。 ◎ The user agent must allow the user to resize the element with no other constraints than what is imposed by min-width, max-width, min-height, and max-height.

注記： 利用者が要素を~resizeするよう試みても，［ 上書きされた／無視された ］ように現われる状況はあり得る： 例えば、 `~importantな宣言$が~cascadeして，~DOM内の［ 要素の`~style属性$内 ］の［ `width$p ／ `height$p ］~propに取って代わるときなど。 ◎ Note: There may be situations in which user attempts to resize an element appear to be overridden or ignored, e.g. because of !important cascading declarations that supersede that element’s style attribute width and height properties in the DOM.

要素の `resize$p ~propの算出d値が変化しても、［ 利用者が要素を~resizeすることに因る`~style属性$に対する変更 ］が設定し直されることはない。 ◎ Changes to the computed value of an element’s resize property do not reset changes to the style attribute made due to user resizing of that element.

iframe,
object[type^="text/"],
object[type$="+xml"],
object[type="application/xml"] {
  overflow:auto;
  resize:both;
}

5.1. ~pointerに関する対話性

:link,:visited {
  cursor: url(example.svg),
    url(hyper.cur),
    url(hyper.png) 2 3,
    pointer
}

5.2. ~text挿入~caret

/* 
~caretの点滅や閃光を防止する
◎
prevent the caret from blinking/flashing
 */
:read-write { caret-animation: manual !important; }

/* 
`caret-color^p が変化するのを
— ~animationも含めて —
防止する：
◎
prevent changes of caret-color, including animations
 */
:read-write { caret-color: auto !important; }

textarea {
  caret-animation: manual;
  caret-color: blue;
  animation: caret-alternate 2s step-end infinite;
}
@keyframes caret-alternate {
  50% { caret-color: red; }
}

.console {
  caret-shape: underscore;
  background: black;
  color: white;
  font-family: monospace;
  padding: 1ex;
}

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $  

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $

#old-screen {
  caret: block manual;
  animation: old-caret 2s infinite;
  /*styling of the screen omitted for brevity */
}
@keyframes old-caret {
  from, 50% { caret-color: green; }
  75%, to { caret-color: transparent; }
}

5.3. ~keyboardによる制御

button { position:absolute }

button#b1 {
  top:0; left:50%;
  nav-right:#b2; nav-left:#b4;
  nav-down:#b2; nav-up:#b4;
}

button#b2 {
  top:50%; left:100%;
  nav-right:#b3; nav-left:#b1;
  nav-down:#b3; nav-up:#b1;
}

button#b3 {
  top:100%; left:50%;
  nav-right:#b4; nav-left:#b2;
  nav-down:#b4; nav-up:#b2;
}

button#b4 {
  top:50%; left:0;
  nav-right:#b1; nav-left:#b3;
  nav-down:#b1; nav-up:#b3;
}

button#foo { nav-left: #bar "sidebar"; }

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

6.1. 内容~選択の制御-法

`user-select$p ~propは、［ 利用者が，文書~内の要素のうち どれを どう選択できるか ］を指定することを作者に可能化する。 これは、［ 選択するのに等しく有用でない要素がある ］ときでも［ ~~隣接する内容を偶発的に選択することを避けるよう，もっと容易にヤリトリする ］ことを利用者に許容する。 ◎ The user-select property enables authors to specify which elements in the document can be selected by the user and how. This allows for easier interactions when not all elements are equally useful to select, avoiding accidental selections of neighboring content.

~UAは、［ `first-line$pe ／ `first-letter$pe ］疑似要素には， `user-select$p ~propを適用しないモノトスル。 ◎ User agents must not apply the user-select property to the ::first-line and ::first-letter pseudo-elements.

`user-select^p を `none$v 以外の値に変更することが［ ~copy可否, ~DOM~API ］において何を意味するか，~~明らかにする必要がある。 ◎ if we allow user-select to change to a value other than none, we need to figure out what this means for copyability, and DOM APIs.

疑似要素~内の生成d内容が，この仕組みを通して選択-可能になるときは、 ~UAは，探索~機能【`~find-in-page＠~HTMLinteraction#find-in-page-2$】からも その内容を見出せるようにするベキである。 ◎ When generated content in pseudo-elements becomes selectable through this mechanism, UAs should also make this content findable through their search function.

`marker$pe にも適用するベキか？ `~page~margin~box$にも適用するベキか？ `auto$v に対する`使用~値$は `none$v, `text$v のどちらが適切か？ ◎ Should it also apply to ::marker? To page-margin boxes? Should the used value of auto also be none, or would text be more appropriate?

次に挙げる場合を除き，`使用~値$は`算出d値$と同じになる： ◎ The used value is the same as the computed value, except:

1. `編集-可能な要素$上では、 算出d値に関わらず，使用~値は常に `contain$v になる。 ◎ on editable elements where the used value is always contain regardless of the computed value
2. 算出d値が `auto$v のときは、 使用~値は — 下に定義するとおり — 他のいずれかの値になる。 ◎ when the computed value is auto, in which case the used value one of the other values as defined below

この仕様の目的においては、 次に該当する要素が `編集-可能な要素@ とされる ⇒ ［ `編集中の~host＠https://w3c.github.io/contentEditable/#dfn-editing-host$／ `変異-可能＠~HTMLforms#concept-fe-mutable$な~form~control ］のうち，~textな内容を伴うもの — `textarea$e など。 ◎ For the purpose of this specification, an editable element is either an editing host or a mutable form control with textual content, such as textarea.

編集中の~hostの編集-可能な子孫である要素~上の算出d値に対し，何が起こるかについて、 拘束はあるベキか？ その意味論は、 明白ではない。 `none$v は，使用~値 `text$v に対応付けるベキかもしれないし、 他のすべての値も `text$v に対応付けるベキかもしれない。 ◎ Should there be constraints on what happens to the used value on elements that are editable descendants of editing hosts? The semantics are not obvious. Maybe none should map to text, or maybe all values should map to text.

`auto@v

`auto$v に対する`使用~値$は： ◎ The used value of auto is determined as follows:

1. ［ `before$pe ／ `after$pe ］疑似要素に対しては、 `none$v になる。 ◎ On the ::before and ::after pseudo-elements, the used value is none
2. `編集-可能な要素$ならば、 `contain$v になる。 ◎ If the element is an editable element, the used value is contain
3. 他の場合，親の `user-select$p の`使用~値$は［ `all$v ／ `none$v ］ならば、 それと同じになる。 ◎ Otherwise, if the used value of user-select on the parent of this element is all, the used value is all ◎ Otherwise, if the used value of user-select on the parent of this element is none, the used value is none
4. 他の場合、 `text$v になる。 ◎ Otherwise, the used value is text

注記： この［ 継承されない~propと, 初期~値 `auto$v に対する`使用~値$が親~要素に依存すること ］との通例的でない組合nは、 実質的には，選択的な継承をアリにするためにある。 これは，当初は、 Microsoft IE において継承に類似な挙動を導入するために提案された — ここでは、 値 `contain$v は継承されないが。 ◎ Note: This unusual combination of a non-inherited property with an initial value of auto whose used value depends on the parent element makes it possible to create what is effectively selective inheritance. This was initially proposed by Microsoft in IE to introduce a behavior similar to inheritance except that the contain value does not inherit.

`text@v

要素は、 選択に拘束を課さない。 ◎ The element imposes no constraint on the selection.

`none@v

~UAは、 この要素~内から開始される選択を許容しないモノトスル。 ◎ The UA must not allow selections to be started in this element.

この要素の外側から開始される選択は、 この要素~内で終端しないモノトスル。 利用者が そのような選択を作成するよう試みた場合、 ~UAは，代わりに選択~範囲を要素~境界の所で終端させるモノトスル。 ◎ A selection started outside of this element must not end in this element. If the user attempts to create such a selection, the UA must instead end the selection range at the element boundary.

注記： これを書いている時点では、 試験的な実装は，この様に挙動していない部分がある。 Firefox は、 そう挙動する。 Chrome, Safari は、 ほぼそう挙動する： 選択が要素より後から開始して，要素の中へ後戻りするよう試行された場合、 それらは，ここに指定したように挙動するが、 選択が要素より前から開始して，要素の中へ進むよう試行された場合、 要素は `all$v にされていたかのように挙動する結果，全体を選択する。 IE （ Internet Explorer ）は要素の外側から開始され, 要素の中へ行く選択を まったく制約しない。 Chrome, Safari における別の相違には、 `none$v にされた要素の内側からも選択を開始できることが挙げられる — 選択が要素の外で終端したときには、 要素の境界から終端した所までの選択が作成される。 Firefox, IE は、 この仕様に述べたとおりに挙動するので， 選択を まったく作成しない。 ◎ Note: As of the time of writing, experimental implementations do not all behave like this. Firefox does. Chrome and Safari almost do: for a selection started after the element and trying to go backwards into the element they behave as specified here, but for a selection started before the element and trying to go into the element they behave as if the element has all and select it entirely. IE does not restrict selections started outside of the element from going into it at all. Another difference is that in Chrome and Safari, if the user attempts to start a selection inside a user-select: none, and to end the selection out of it, a selection will be created from the boundary of the element to the user-designated end-point. Firefox and Internet explorer behave as prescribed in this specification and do not create a selection at all.

しかしながら，この要素の子孫に［ `user-select$p の`使用~値$が `none$v にならないもの ］がある場合、 そのような子孫の中で開始して, 終端する選択は，許容される。 ◎ However, if this element has descendants on which the used value of user-select is not none, selections that start and end within these descendants are allowed.

~UAは、 選択が この要素を挟むように拡張することを許容した上で， そのような選択からこの要素を除外するモノトスル。 ただし、 選択ごとに複数の範囲を~supportしない~UAは， この要素を含めてもヨイ。 この要素の子孫に［ `user-select$p の`使用~値$が `none$v にならないもの ］がある場合、 そのような子孫は， 要素を挟むように拡張している選択~内に含まれるモノトスル。 ◎ The UA must allow selections to extend across this element, and must exclude this element from such a selection. An exception is made for UAs which do not support multiple ranges per selection, and they may include this element. If the element has descendants on which the used value of user-select is not none, these descendants must be included in a selection extending across the element.＼

この仕様は、 ~clipboardの挙動には規範的な要件を課さない。 しかしながら，~UAには、［ ~copy時に~clipboardに~copyされるもの, 視覚的な選択 ］の整合性を保つことが奨励される。 選択されたとおりに現れない~textが~copyされること, あるいはその逆は、 利用者をひどく惑わすので。 ◎ This specification makes no normative requirement about the behavior of the clipboard. however, UAs are encouraged to keep the visual selection consistent with what would get copied to the clipboard when copying. Copying text that does not appear to be selected, or vice versa, is highly confusing to users.

`user-select$p が `none$v にされた要素~内から — それを~clickする／その中から~dragを開始するなどにより — 選択を開始するよう試みられても、 既存の選択は，いかなる仕方でも — 未選択にされるなど — 影響されないモノトスル。 ◎ Attempting to start a selection in an element where user-select is none, such as by clicking in it or starting a drag in it, must not cause a pre-existing selection to become unselected or to be affected in any way.

`user-select$p は、 ~UIの便利~用の仕組みであり，~copy保護の仕組みではない — ~UAは、 `user-select$p が `none$v にされようが， 利用者が~textを明示的に選択する代替的な仕方を供してもヨイ。 ◎ As user-select is a UI convenience mechanism, not a copy protection mechanism, the UA may provide an alternative way for the user to explicitly select the text even when user-select is none.

注記： `none$v は~copy保護の仕組みではないので、 そのように利用しても，効果は無い： ◎ Note: none is not a copy protection mechanism, and using it as such is ineffective:＼

• ~UAには、 それを迂回する仕方を供することが許容される。 ◎ user agents are allowed to provide ways to bypass it,＼
• ~supportしない旧来の~UAに対しては、 その効果は無い。 ◎ it will have no effect on legacy user agents that do not support it,＼
• いずれにせよ，利用者は、 ~UAの利用者~stylesheetやそれに等価な仕組みを通して不能化できる。 ◎ and the user can disable it through the user style sheet or equivalent mechanisms on UAs that do anyway.＼

`none$v に意味されているのは、［ 選択しても有用にならない~UI要素の選択を不能化すること ］を作者に委ねることにより，［ 利用者が，求める内容を選択し易くなるようにする ］ことである。 ［ ~CSS検証器, ~linter, ~browser内の開発者~tool ］などの~toolには、 経験則を利用して，［ 使い勝手を悪くしたり，共通的な利用者の期待に違反する ］ような［ 不正／濫用的 ］な用法を［ 検出して，警告する ］ことが奨励される。 ◎ Instead, none is meant to make it easier for the user to select the content they want, by letting the author disable selection on UI elements that are not useful to select. Tools such as CSS validators, linters or in-browser developer tools are encouraged to use heuristics to detect and warn against incorrect or abusive usage that would hamper usability or violate common user expectations.

注記： 作者は、 利用者を不必要に拘束しないよう気を付けるベキである。 例えば，［ `根~要素$の `user-select$p を `none^v に設定した上で、［ 作者が選択するに有用と判定した，一握りの要素 ］において，その制約を緩める ］ことは、 利用者をいらつかせかねない： ◎ Authors should be careful about not constraining the user unnecessarily. For example, setting user-select: none on the root element, and relaxing that restriction on a handful of elements the author judges useful to select can be frustrating to users:

• 利用者は、 空な区画を~clickしても，現在の選択を未選択にできなくなる ◎ Clicking in empty areas to undo the current selection will no longer be effective
• 作者は、 選択-可能にすべき区画を見落とすかもしれない ◎ The author may have overlooked some areas which should be selectable
• 作者は、 後で~pageに区画を追加するとき，選択-可能にし忘れるかもしれない ◎ Areas may be added later to the page without remembering to make them selectable
• 利用者は、 主だった内容~以外の~text片を選択したいと求めるかもしれない — 一例として、 それらを［ 何らかの辞書や翻訳~toolで検索する ／ 探索~engineで警告や~error~messageを探す ］ためなど… ◎ The user may want to select pieces of text other than the main content, for instance to look them up in a dictionary or in some translation tool, or to look for warnings and error messages in a search engine…

作者にとって代わりになる良い実施は、［ 偶発的に選択されると，意図される動作に干渉すると見込まれる要素 ］に対し，選択的に `user-select$p: `none^v を適用することである。 ~page内の［ ヤリトリされないと見込まれる各部 ］は偶発的に選択-可能なままにする方が、 その逆にするより，ずっと利用者をいらつかせずに済むと見込まれるので。 ◎ Instead, a good practice is for authors is to selectively apply user-select: none to elements which seem likely to be accidentally selected when doing so would interfere with the more likely intended action. Accidentally leaving parts of the page that are unlikely to be interacted with selectable will likely cause much less frustration to users than the opposite.

`contain@v

~UAは、［ この要素から開始された選択が要素の外側まで拡張される ］ことを許容しないモノトスル。 ◎ UAs must not allow a selection which is started in this element to be extended outside of this element.

この要素の外側から開始された選択は、 この要素~内で終端しないモノトスル。 利用者が，そのような選択を作成するよう試みた場合には、 ~UAは，選択~範囲を要素~境界の所で終端させるモノトスル。 ◎ A selection started outside of this element must not end in this element. If the user attempts to create such a selection, the UA must instead end the selection range at the element boundary.

~UAは、 選択が［ この要素を挟むように拡張する ］ことを許容するモノトスル。 そのような選択には、 要素の内容も含めるモノトスル。 ◎ The UA must allow selections to extend across this element, and such selections must include the content of the element.

注記： これを書いた時点では、 試験的な各~実装の挙動は，［ 外側から開始された選択, 要素の中へ行く選択 ］について互いに異なる。 この挙動は、 `contain$v を明示的に~supportしない~browserにすら，［ `textarea$e ／ `contenteditable$a ］要素の中へ選択するよう試行することにより観測できる。 ◎ Note: At the time of writing, experimental implementations behave differently from each other about selections started outside and selections going into the element. The behavior can be observed even on browsers that do not explicitly support contain by trying to select into a textarea or a contenteditable element.

注記： これは、 当初は Internet Explorer における試験的な特能として， `user-select$p に対する値 `element^v の下で導入された。 ◎ Note: This was initially introduced as an experimental feature in Internet Explorer, under the name user-select: element.

`all@v

要素の内容は、 不可分に選択されるモノトスル。 選択が要素の一部を包含することになる場合、 選択は，要素~全体を — 要素の子孫~すべても含むよう — 包含するモノトスル。 要素の親の `user-select$p の`使用~値$も `all$v の場合、 要素が選択されたときには，親も再帰的に選択に含めるモノトスル。 ◎ The content of the element must be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If the element is selected and the used value of user-select on its parent is all, then the parent must be included in the selection, recursively.

この要素の子孫に `user-select$p の`使用~値$が `all$v でないものがあって，選択~全体が そのような子孫たちに包含されている場合、［ 選択が この要素~一体を含むように拡張する ］ことはないとする。 ◎ If this element has descendants on which the used value of user-select is not all and if a selection is entirely contained in these descendants, then the selection is not extended to include this whole element.

注記： 選択は、 ~textのみならず，［ 画像, ~table, 動画, 等々 ］まで拡張して，それらを含み得る。 そのような選択を［ ~copyする／~pasteする ］ときの挙動は、 この仕様の視野から外れる。 ◎ Note: Selections can include more than just text and extend over images, tables, videos, etc. The behavior when copying and pasting a such selections is out of scope for this specification.

~HTML用には、 次の~UA~stylesheetが追加される： ◎ The following additions are made to the UA stylesheet for HTML:

button, meter, progress, select { user-select: none; }

上の~listは不完全であり、 少なくとも，~buttonを表現する `input$e は含める必要がある。 ◎ the list above is incomplete and needs to include at least the various button-like variants of input.

旧来の内容との互換性を得るため、 `user-select$p を~supportする~UAは， `-webkit-user-select@p も別名として~supportするモノトスル。 ◎ For compatibility with legacy content, UAs that support user-select must also support -webkit-user-select as an alias.

注記： 別名にする仕組みの詳細は、 意図的に~UAに委ねられる。 `-webkit-user-select^p を `user-select$p の略式~propにする 【すなわち，`旧来の別名n$にする】 ことは， 有効果な~approachとして既知であり、 新たな実装者は，それを考慮するべきである。 しかしながら、 互換性に反する帰結を伴うことなく， 他の手段を通して `-webkit-user-select^p を `user-select$p の別名として~supportしている~UAも存在するので、 この仕様は，そのような柔軟性を許容する。 ◎ Note: The details of the aliasing mechanism is intentionally left up to the UA. Making -webkit-user-select a shorthand property of user-select is known to be an effective approach, and new implementers should consider it. However, UAs supporting -webkit-user-select as an alias of user-select through other means exist, without adverse consequences to compatibility, so this specification allows flexibility.

6.2. 接触判定からの除外： `pointer-events^p ~prop

この~propは，接触判定の通常の挙動を改変するが、 この通常の `接触判定@ （ `hit-testing^en ）は，現時点では指定されていない。 この問題のうち明白と見受けられるものについては，広い相互運用能があるが、 詳細な仕様があれば大いに便益が得られることになろう，無数の［ 意味合い／際どい事例 ］がある。 ~CSS~WGは、 そのような仕様を書くことへの助力を切に願う。 ◎ While this property modifies the normal behavior of hit-testing, this normal hit-testing is currently not specified. There is broad interoperability about the seemingly obvious parts of this problem, but there are countless nuances and corner cases that would greatly benefit from a detailed specification. The CSS-WG would hugely appreciate help with writing such a specification.

`pointer-events$p ~propは、［ 要素が生成する【！’s】~boxは， ~pointer~event【！point pointer events】の~targetになれるかどうか ］を定義する。 各種 値の意味は： ◎ The pointer-events property defines whether an element’s boxes can be targeted by point pointer events. Values have the following meanings:

`auto@v

`接触判定$は、 通常に生じる。 ◎ Hit-testing occurs normally.

`none@v

`接触判定$は、［ 当の要素により生成される~box（ `CSS-DISPLAY-3$r を見よ ）は、 そこに無かった ］かのように動作する — 実質的に、 当の要素の背後にある要素が`接触判定$に基づく~eventの~targetになれるようにする。 ◎ Hit-testing acts as if the boxes generated by the element (see [CSS-DISPLAY-3]) were not there, effectively causing the element behind the pointer-events: none element to become the target of hit-testing based events instead.

上の言明における接触判定は、 選抜される必要がある。 一部の目的における接触判定は、 当の要素も織り込み続ける。 一例として，~clickあるいは~dragして~text選択を開始することは、 通例通り働き続ける。 精確に何が `pointer-events$p により影響される接触判定の集合を成すのか？ ◎ The statement above needs to be be qualified; for some purposes, hit-testing continues to take the element into account. For instance, clicking and dragging to start a text selection will continue to work as usual. What is the precise set of things for which hit-testing is affected by pointer-events?

この~propに対する値 `none$v は、 `連列的~focus~navi＠~HTMLinteraction#sequential-focus-navigation$を妨げない。 ◎ pointer-events: none does not inhibit sequential focus navigation.

注記： ~SVG 2 § `pointer-events^p ~propは、 ~SVG要素~用に この~propの変種を定義していて，それにアリな値は もっと多い。 ~SVGの外側における そのような値の効果は、 現時点では定義されていない。 ◎ Note: SVG 2 § 15.6 The ‘pointer-events’ property defines a variant of this property for SVG elements, with more possible values. The effect of such values outside of SVG is currently not defined.

7.1. ~widgetの~accent色： `accent-color^p ~prop

所与の~platformにおける~UI~controlは、 概して，単独の統合的な視覚-~styleの下で，統合的な集合として設計される。 （すべてではないが）多くの~platformでは、 視覚-~styleには `~accent色@ も利用される。 それは、 概して，鮮やかな色になる — より実利的な［ 背景／前景 ］色で~mark的に~contrastを与えるような。 `~accent色$を利用しない［ ~control／~controlの状態 ］も中にはあるが、 いずれにせよ，`~accent色$は各種~controlの色~schemeの中核を成す。 ◎ User interface controls on any given platform are typically designed as a cohesive set, under a single, cohesive visual style. On many platforms (though not all), the visual style includes the use of an accent color, a typically bright color that contrasts markedly with the more utilitarian background and foreground colors. Not every control uses the accent color in every state, but it is nonetheless a core part of the controls’ color scheme.

`accent-color$p ~propは、［ 要素が生成する~UI~control用に，`~accent色$を指定する ］ことを作者に許容する。 各種 値の意味は： ◎ The accent-color CSS property allows the author to specify the accent color for user-interface controls generated by the element. Values have the following meanings:

`auto@v

~UAが選んだ色を表現する — それは、 ~platformの`~accent色$（もしあれば）に合致するベキである。 ◎ Represents a UA-chosen color, which should match the accent color of the platform, if any.

`color$t

`~accent色$として利用される色を指定する。 ◎ Specifies the color to be used as the accent color.

~UAは、 指定された `accent-color$p を利用して， 当の要素が生成する【！’s】~controlを成す［ `~accent色$で~styleされる各部 ］を描くベキである。 ~UAは、 ~controlの判読能を得るために~contrastを保守するモノトスル — そうするためとして、 色の輝度や鮮やかさを調整したり，~controlを成す他の各部の色を他の色で代用してもヨイ （例： 上に重なる~glyphに対し， `color$p を利用する代わりに `background-color$p を利用するよう切替える）。 また、 ~controlが［ `~accent色$の利用に関する~platform規約 ］に合致するよう，［ ~gradient, 等 ］用に色の変動を生成してもヨイ。 ◎ The UA should use the specified accent-color to draw whichever parts of the element’s control(s) would have otherwise been styled with an accent color. The UA must maintain contrast for legibility of the control, and in order to do so may adjust the luminance or brightness of the color or make color substitutions in other parts of the control (e.g. switching an overlaid glyph from using color to using background-color). It may also generate variations of the color for gradients etc. to match the control to platform conventions for the use of the accent color.

給された色が不透明でない場合、 ~UAは，それを~system色 `Canvas$v 上に `compose^en した結果†の（不透明な）色を`~accent色$として利用するモノトスル。 【†おそらく，`単純~alpha組成-法＠~COMPOSITING#simplealphacompositing$に従う。】 ◎ If the color supplied is partially or fully transparent, the user agent must first pre-compose it over the Canvas system color and use the resulting (now opaque) color as the accent color.

注記： `Canvas$v は、 利用者の設定に基づいて変わり得るが，概して［ `明な色~scheme$の下では白色／ `暗な色~scheme$の下では黒色 ］になる。 ◎ Note: Although it may vary based on user settings, Canvas is typically white when in a light color scheme and black when in a dark color scheme.

7.2. 外観の切替法： `appearance^p ~prop

文書~内のほとんどの要素に対しては、 その見かけは~CSSにより全部的に制御できる。 一方で，`~widget$は、 概して，~host~OSの~native~UI~controlを利用して~UAにより具現化される — それは、 ~CSSを利用して再現できないし, ~styleできない。 ◎ While the way most elements in a document look can be fully controlled by CSS, widgets are typically rendered by UAs using native UI controls of the host operating system, which can neither be replicated nor styled using CSS.

この仕様における用語 `~widget@ は、 `~nativeな外観$を有し得る要素を表す。 `~nativeな外観@ とは、 ~host［ ~OS／~platform ］に~nativeな［ ~widget／~control ］（順不同）に相似する様に， ~CSSでは【！not otherwise】表出-不能な［ 見かけと感触 ］を伴って具現化されることを意味する。 どの要素が`~nativeな外観$を有し得るものと定義されるかは、 ~host言語（例： ~HTML `HTML$r ）に委ねられる。 ◎ The term widget in this specification denotes elements that can have native appearance, meaning that they are rendered like analogous native widgets or controls of the host operating system or platform, or with a look and feel not otherwise expressible in CSS. It is up to the host language (e.g., HTML [HTML]) to define which elements can have native appearance.

この仕様は、 `appearance$p ~propを導入して，この挙動にいくらかの制御を供する。 特に、 所与の`~widget$に対し，この~propに： ◎ This specification introduces the appearance property to provide some control over this behavior. In particular,＼

• 値 `none$v を利用することは、 次を作者に許容する ⇒ 当の~widget用の`~nativeな外観$を抑止して、 ~CSSを利用して~styleし直せる所では， `~primitiveな外観@ を与える。 ◎ using appearance: none allows authors to suppress the native appearance of widgets, giving them a primitive appearance where CSS can be used to restyle them.

• 値 `base$v を利用することは、 当の~widgetに `基底な外観@ を与える。 `~widget$が`基底な外観$を有する下では：

  • `~primitiveな外観$と同じ様に、 それ用の`~nativeな外観$は抑止され，~CSSを利用して~styleし直せる。
  • `~primitiveな外観$は一部の`~widget$を完全に現れなくさせ得るが、 それとは違って， 利用-可能かつ相互運用可能な既定の~styleも有する。
  ◎ Using appearance: base gives widgets a base appearance. Widgets in base appearance have their native appearance suppressed where CSS can be used to restyle them, just like primitive appearance, but also have default styles which are usable and interoperable. This is unlike primitive appearance which can cause some widgets to disappear completely.

各種~widgetには、 何らかの~stylesheetが結付けられ得る — それを成す~styleたちは、［ 当の~widgetは`基底な外観$を有するかどうか ］に基づいて変化し得る。 ［ `~nativeな外観$, `~primitiveな外観$ ］は、 同じ~styleたちを有するベキである 【同じとは？互いにではないはずだが…何と？】。 ◎ A widget can have some style sheet associated with it and those styles can change based on whether the widget has a base appearance. Native appearance and primitive appearance should have the same styles.

`appearance$p 用の値 `base$v は、 それ用の~stylesheetが［ ~HTML仕様において全部的に定義され、 それに則って，すべての~HTML~form~control用に実装される ］までは，出荷するに準備済みでない。 ◎ appearance:base is not ready to ship until its stylesheet has been fully defined in the HTML specification, and implemented accordingly, for all HTML form controls.

input { appearance: none; }
input[type=checkbox] { appearance: checkbox; }

`none@v

当の要素は、 ~CSSの通例の規則に従って具現化される。 `~widget$以外の置換d要素は、 これにより影響されず， 置換d要素であり続ける。 `~widget$は、 `~nativeな外観$にはならない代わりに，`~primitiveな外観$になるモノトスル。 詳細は、 次を見よ ⇒＃ § 要素の装飾的な側面に対する `appearance^p の効果, § 要素の意味論上の側面に対する `appearance^p の効果 ◎ The element is rendered following the usual rules of CSS. Replaced elements other than widgets are not affected by this and remain replaced elements. Widgets must not have their native appearance, and instead must have their primitive appearance. See § 7.2.2 Effects of appearance on Decorative Aspects of Elements and § 7.2.3 Effects of appearance on Semantic Aspects of Elements for details.

`auto@v

当の要素に応じて： ◎ ↓

• `~widget$である場合 ⇒ `~widget用の~nativeな外観を不能化する~prop$による効果が無い場合には， 当の~widgetの`~nativeな外観$になるベキである。 `§ ~nativeな外観を不能化する~prop＠#appearance-disabling-properties$ を見よ。 ◎ Elements representing widgets should have the native appearance of that widget, if the properties that disable native appearance for widgets are not in effect. See § 7.2.1 Properties Disabling Native Appearance.

  どの要素が どの`~widget$を表現するかを定義する責務は、 ~host言語にある。 ◎ The host language is responsible for defining which elements represent which widgets.

• 他の場合 ⇒ `none$v のときと同じに具現化するモノトスル。 ◎ Elements other than widgets must be rendered as for none.

`base@v

当の要素に応じて： ◎ The effect of base depends on the element it is applied to:

• `~widget$でない場合 ⇒ `none$v のときと同じに具現化するモノトスル。 ◎ elements other than widgets • Elements other than widgets must be rendered as for none.
• `基底な外観$を~supportする`~widget$である場合 ⇒ `none$v と同じ様に、 当の要素は，~CSSの通例の規則に従って具現化される。 `~widget$は、 `~nativeな外観$を有さない代わりに， `基底な外観$を有するモノトスル。 ◎ Widgets which support base appearance • Just like none, the element is rendered following the usual rules of CSS. Widgets must not have their native appearance, and instead must have their base appearance.
• `基底な外観$を~supportしない`~widget$である場合 ⇒ `auto$v のときと同じに具現化するモノトスル。 どの`~widget$が`基底な外観$を有する【~supportする？】かを定義する責務は、 ~host言語にある。 ◎ Widgets which don’t support base appearance • Widgets which don’t have a base appearance must be rendered as for auto. The host language is responsible for defining which widgets have a base appearance.

`compat-auto@t

これらの値は、［ この~propの，以前までの標準でない~version ］用に開発された内容との互換性を得るために存在する。 それらの効果は、 どれも `auto$v と同じになる： ◎ These values exist for compatibility of content developed for earlier non-standard versions of this property. They all have the same effect as auto.

`compat-auto$t
	= `searchfield@v
	| `textarea@v
	| `checkbox@v
	| `radio@v
	| `menulist@v
	| `listbox@v
	| `meter@v
	| `progress-bar@v
	| `button@v

`auto$v が広く~supportされたなら、 代わりに その利用を推奨する。 ◎ When auto is widely supported, recommend using it instead.

これらの値のうち~web互換性に必要ないものは、 この~listから落とされるベキである。 逆に，互換性に必要な値が他にあれば、 この~listに追加されるベキである。 ◎ If any of these values are not needed for web compat, they should be dropped from this list; conversely, any value needed for compat not included in this list should be added.

互換性の理由から，これらの値の一部は、［ 任意な要素に効果がある，熟しきった値に昇格する ／ 一部の`~widget$に副作用を及ぼす ］必要もあり得る。 ◎ It is possible that for compat reasons some of these values need to be promoted to being full blown values with effects on arbitrary elements, or that some of these values need to have some side effects on some widgets.

`compat-special@t

これらの値は、［ この~propの，以前までの標準でない~version ］用に開発された内容との互換性を得るために存在する。 それらの効果は、 この仕様の目的においては，どれも `auto$v と同じになる。 しかしながら，~host言語は、 当の要素の`~nativeな外観$を定義するときに，これらの値を織り込んでもヨイ。 ◎ These values exist for compatibility of content developed for earlier non-standard versions of this property. For the purpose of this specification, they all have the same effect as auto. However, the host language may also take these values into account when defining the native appearance of the element.

`compat-special$t
	= `textfield@v
	| `menulist-button@v

一例として， `HTML$r においては： ◎ For instance, in [HTML]:

• ［ `input$e 要素のうち，その `type$a 属性は `Search^st 状態にあるもの ］の~nativeな外観は、 `appearance$p が `textfield$v のときは， `type$a 属性が `Text^st 状態にあるときの外観に合致するよう変化する。 ◎ The native appearance of input elements with a "search" type attribute changes to match the appearance of input elements with a "text" type attribute when appearance is textfield.
• ［ `select$e 要素のうち，`~drop-down~box＠~HTMLrendering#drop-down-box$になるもの ］の~nativeな外観は、 `appearance$p が `menulist-button$v のときは， その`委譲され$た状態に合致するよう変化する。 ◎ The native appearance of drop-down box select elements changes to match that of its devolved state when appearance is menulist-button.

一部の~UAは、 `input type="range"^e 要素の方位を変更するためとして，値 `slider-vertical^v, `sliderthumb-vertical^v を~supportする。 これらの値は指定されない — この~controlの方位を変更するのは、 別々な仕組みでもっと良く行えるので。 `~HTML課題 #4177＠~HTMLissue/4177$ を見よ。 ◎ The values slider-vertical and sliderthumb-vertical are supported in some user agents to change the orientation of <input type=range> elements. These values are not specified because changing the orientation of this control is better done with a separate mechanism. See issue whatwg/html#4177.

input[type=checkbox] {
  all: unset; /* 
この略式は、
`appearance^p も `none^v に設定し直す。
◎
this shorthand includes resetting appearance to none
 */
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input[type=checkbox]:checked {
  border-radius: 50%;
  background: green;
}
input[type=checkbox]:focus-visible {
  outline: auto;
}

~UAは、 `~nativeな外観$で具現化される`~widget$に対しては， 一部の~CSS~propを`無視r$してもヨイ — ［ 当の~widgetに意図される外観が保全されることを確保する ］ため, あるいは［ 当の~propは、 選ばれた外観には有意義でないこともある ］ので。 ~propを `無視r@ する（ `disregard^en する）とは、［ ~UAは、 当の~widgetには，それを`適用-$しなかったかのように扱う ］ことを意味する。 ~propを`無視r$したとしても、 その`算出d値$を決定するときは，［ （互換性の理由から）明示的な例外が指定された場合を除き，通例の規則に従う ］モノトスル。 しかしながら、 次に挙げる~propは，`無視r$しないモノトスル： ◎ User agents may disregard some CSS properties on widgets rendered with their native appearance to ensure that the intended appearance is preserved, or because these properties may not be meaningful for the chosen appearance. Disregarding a property means that the user agent treats it as if it didn’t apply to the widget in question. Nevertheless, unless an explicit exception is specified (for compatibility reasons), the user agent must still determine the computed value of any disregarded property according to the usual rules. However, the following properties must not be disregarded:

• `appearance$p
• `display$p （`内縁~表示-型$は無視してもヨイ） ◎ display (the inner display type may be ignored)
• `visibility$p
• `position$p
• `top$p
• `right$p
• `bottom$p
• `left$p
• `float$p
• `clear$p
• `margin$p とそれに関係する下位prop ◎ margin and related long-hand properties
• `unicode-bidi$p
• `direction$p
• `cursor$p
• `z-index$p

この~listに含めるべき~propは他にあるか？ ~listから除去するべきものはあるか？ 無視してよい~propたちが成す~whitelistを与えるべきか？ — そうでないものたちが成す~blacklistに代えて。 どちらの仕方でも、 ~UAは，`~widget$を具現化するときに一部の~propを無視するので、 この仕様は，このことについて何か言う必要がある。 ◎ Are there more properties that should be included in this list? Should we remove some? Should we whitelist the properties that are ok to ignore instead of blacklisting those that are not? Either way, UAs do ignore some properties when rendering widgets, so this specification needs to say something about this.

旧来の内容との互換性を得るため、 ~UAは， `appearance$p の`旧来の別名n$として `-webkit-appearance@p も~supportする~モノトスル。 ◎ For compatibility with legacy content, UAs must also support -webkit-appearance as a legacy name alias of appearance.

7.3. ~form~controlの~sizingの切替法： `field-sizing^p ~prop

この仕様の目的において、 要素が `既定の選好d~sizeを伴う要素@ であるとは， 要素の`内在的~size$は，要素の内容の~sizeに関わらず固定的であることをいう。 どの要素に適用-可能になるかは、 ~host言語が定義する。 例えば，~HTMLにおいては、 `textarea$e が`既定の選好d~sizeを伴う要素$であるとされる†。 ◎ For the purpose of this specification, an element with default preferred size is an element whose intrinsic size is fixed regardless of the size of its content. The host language defines which elements are applicable to it. For example, in HTML textarea is an element with default preferred size.

【† `textarea^e 要素の事例では、 “既定の選好d~size” は，要素の［ `cols^a, `rows^a ］属性に基づいて決定される。 】

`fixed@v

~UAは、 次に従うモノトスル： ◎ ↓

• `既定の選好d~sizeを伴う要素$に対しては、 次を適用する ⇒ その`内在的~size$を［ ~host言語により当の要素~用に定義された既定の選好d~size ］に設定する。 ◎ For element with default preferred size, the UA must apply set the intrinsic size to the default preferred size defined by the host language for that element.＼
• 他の要素に対しては、 `content$v と同じに挙動する。 ◎ Otherwise UA must behave the same as content.

`content@v

~UAは、 次に従うモノトスル： ◎ ↓

• 当の要素の`内在的~size$を要素の内容に基づいて決定する — ~host言語が当の要素~用に既定の選好d~sizeを定義していても，無視する。 ◎ The UA must determine the element’s intrinsic size based on its content, and must ignore any default preferred size defined by the host language for that element.＼
• 当の要素が`既定の選好d~sizeを伴う要素$であって， `CSS-SIZING-3$r `§ 圧縮-可能な置換される要素＠~SIZING#min-content-zero$ に挙げられたものである場合、 要素を［ `最小-内容 供与$用には`置換d要素$として扱うこと ］を止める。 ◎ If the element is an element with default preferred size and is listed in compressible replaced elements, the UA must stop treating the element as a replaced element for min-content contribution.

7.4. 敏感な入力の隠蔽： `input-security^p ~prop

~CSS~WGは、［ この機能性を利用者に供することは重要である ］と予見するが，~CSSと~JSを介してそれを行うことは間違った~approachであり、 代わりに，~UAの中に組込まれるべきであることに合意した。 これは、［ 利用者が発見-可能かつ理解-可能になるよう，各~siteにて一貫して働く ］必要があり, ［ ~JSが切られていようが働く ］必要があり, ［ 一貫して確固たる~accessibilityを備える ］必要があり, 等々。 したがって、 これは，仕様から除去されることが意図される — その挙動は、 代わりに［ ~password~fieldのヤリトリ~modelの一部として，~HTML仕様にて指定される ］ものと~~期待されている。 ~HTMLが明確化される状況まで、 削除するのは保留されるが。 `6788$issue, `~HTML課題 #7293＠https://github.com/whatwg/html/issues/7293$ を見よ。 ◎ The CSS-WG has agreed that while be believe that providing this piece of functionality to users is important, doing it via CSS+JS is the wrong approach, and that instead it should be built into user agents: this needs to work consistently from site to site for it to be discoverable and understandable by users, this needs to work even when JS is turned off, this needs to have consistently solid accessibility… We therefore intend to remove this from the specification and instead, we would like to see this behavior specified in the HTML specification as part of the interaction model of password fields. Holding off deleting until the situation with HTML is clarified. See https://github.com/w3c/csswg-drafts/issues/6788 and https://github.com/whatwg/html/issues/7293.

この仕様の目的における `敏感な~text入力@ とは、 ~text入力のうち［ ~host言語により，敏感な入力を受容することが目的であると定義されたもの ］である。 例えば，~HTMLにおける `input type=password$e は、 `敏感な~text入力$である。 ◎ For the purpose of this specification, a sensitive text input is a text input whose purpose is to accept sensitive input, as defined by the host language. For example, in HTML <input type=password> is a sensitive text input.

~UAは、 既定では，覗き見を防止するために`敏感な~text入力$の内容を隠蔽する。 利用者は、 敏感な情報を自身が正しく打込んだか確認するために， この隠蔽を一時的に不能化したいと望むこともある。 作者は、 この隠蔽を［ 可能化する／不能化する ］ために `input-security$p ~propを利用してもヨイ。 ◎ By default, user agents obscure the contents of sensitive text inputs in order to prevent onlookers from seeing it. Users may wish to temporarily disable this obscuring in order to confirm that they’ve typed their sensitive information correctly. The input-security property may be used by authors to enable or disable this obscuring.

`none@v

~UAは、 当の~control内の~textを［ 利用者が読取れるよう，隠蔽しない ］モノトスル。 ◎ The UA must not obscure the text in the control, so that it can be read by the user.

`auto@v

~UAは、 当の~control内の~textを［ 利用者が読取れないよう，隠蔽する ］ベキである。 ◎ The UA should obscure the text in the control, so that it cannot be read by the user.

~UAが~control内の~textを隠蔽する正確な仕組みは未定義であるが、 ~UAは概して，`敏感な~text入力$を［ それを成す各~文字を相応しい何か — `002A^U `ASTERISK^cn (*) や `25CF^U `BLACK CIRCLE^cn (●) など — に置換する ］ことにより隠蔽する。 ◎ While the exact mechanism by which user agents obscure the text in the control is undefined, user agents typically obscure sensitive text inputs by replacing each character with some suitable replacement such as U+002A ASTERISK (*) or U+25CF BLACK CIRCLE (●).

input[type=password] {
  input-security: auto;
}

<input type=password value=MySecret794>

7.5. ~controlに特有な規則

この節の一部またはすべては、 いつかは `HTML$r 仕様へ移動されるベキであろう。 ◎ Maybe some or all of this section should be moved to the [HTML] spec. at some point.

一部の要素~上で一部の~propを設定すると、 `appearance$p: `auto^v を妨げる。 一例として，~buttonは、 `appearance^p が `auto$v であっても， `border$p が設定されれば~nativeな外観を失う。 これは、 `auto$v の定義には矛盾しない — `auto^v は、 ~UAは~nativeな外観を利用しても`ヨイ^emことのみを意味するので。 とは言え，相互運用能を高めるため、［ この効果は，どの要素の どの~propにあるか ］を文書化すると良いであろう。 ◎ On some elements, setting some properties inhibits appearance: auto. For instance, even if appearance is auto, buttons lose their native appearance when a border is set. This is not in contradiction with the definition of auto, since appearance: auto only means UAs may use a native appearance, but for greater interoperability, it would be good to document which properties on which elements have this effect.

~UAが自身の~stylesheet内に何を置く必要があるか，文書化すると良いであろう。 ◎ Documenting what UAs need to put in their UA stylesheet would be good.