1. 序論
~INFORMATIVE`疑似要素$は、文書~言語により明示的に作成される要素を超えるような,文書の抽象的な要素を表現する。 疑似要素は,文書~木を成す要素~単位に制約されないので、文書の木~構造に対応付けられない部位であっても,選択して~styleをあてがうために利用できる。 具体例として, `first-line$pe 疑似要素は、[ ~layoutにおいて~textを折返した後における,`出自の要素$の`整形される最初の行l$ ]の内容を選択でき,その行lにだけ段落の残りと異なる~styleをあてがえるようになる。 ◎ Pseudo-elements represent abstract elements of the document beyond those elements explicitly created by the document language. Since they are not restricted to fitting into the document tree, they can be used the select and style portions of the document that do not necessarily map to the document’s tree structure. For instance, the ::first-line pseudo-element can select content on the first formatted line of an element after text wrapping, allowing just that line to be styled differently from the rest of the paragraph.
各~疑似要素には、`出自の要素$が結付けられる。 疑似要素の構文は、 `(疑似要素の名前)^pe の形をとる。 この~moduleは、~CSSに存在している疑似要素, および それらをどう~styleできるかを定義する。 疑似要素についての[ より一般的な情報, 構文, 他の`選択子$との相互作用 ]については、 `SELECTORS4$r を見よ。 ◎ Each pseudo-element is associated with an originating element and has syntax of the form ::name-of-pseudo. This module defines the pseudo-elements that exist in CSS and how they can be styled. For more information on pseudo-elements in general, and on their syntax and interaction with other selectors, see [SELECTORS4].
2. ~typographic疑似要素
2.1. `first-line^pe 疑似要素
`first-line@pe 疑似要素は、その`出自の要素$の`整形される最初の行l$の内容を述べる。 ◎ The ::first-line pseudo-element describes the contents of the first formatted line of its originating element.
次の規則は、 “各 `p^e 要素ごとに その最初の行lを成す字lたちを大文字に変更する” ことを意味する: ◎ The rule below means “change the letters of the first line of every p element to uppercase”:
p::first-line { `text-transform$p: uppercase }
選択子 `p::first-line^css に合致するような,実の文書~要素はない。 それが合致するのは、適合~UAが,各 `p^e 要素ごとに その始めの所に挿入することになる,疑似要素である。 ◎ The selector p::first-line does not match any real document element. It does match a pseudo-element that conforming user agents will insert at the beginning of every p element.
注記: 最初の行lの長さは、頁の横幅, ~font~size, 等々,いくつもの要因に依存することに注意。 ◎ Note: Note that the length of the first line depends on a number of factors, including the width of the page, the font size, etc.
例えば,次のような普通の~HTML段落は: ◎ For example, given an ordinary HTML [HTML5] paragraph such as:
<p>これは、いくぶん長い~HTML段落であり、何~行lかに分断される。最初の行lは、仮想の~tag列により識別される。他の行lは、段落~内の普通の行lとして扱われることになる。</p>
次のように何~行lかに分断されるであろう: ◎ The lines might be broken as follows:
これは、いくぶん長い~HTML段落であり、 何~行lかに分断される。最初の行lは、仮想の ~tag列により識別される。他の行lは、段落 内の普通の行lとして扱われることになる。
~UAは、この段落を `first-line$pe を表現する `仮想の~tag列@ を含むよう “書き直す” こともある。 この`仮想の~tag列$は、~propがどう継承されるかを示す助けになる: ◎ This paragraph might be “rewritten” by user agents to include a fictional tag sequence to represent ::first-line. This fictional tag sequence helps to show how properties are inherited.
<p><p::first-line>これは、いくぶん長い~HTML段落であり、</p::first-line>何~行lかに分断される。最初の行lは、仮想の~tag列により識別される。他の行lは、段落~内の普通の行lとして扱われることになる。</p>
疑似要素が実の要素を分断する場合に欲される効果は、要素を閉じて, また開くような,`仮想の~tag列$で記述できることが多い。 ◎ If a pseudo-element breaks up a real element, the desired effect can often be described by a fictional tag sequence that closes and then re-opens the element.
前掲の段落の最初の文が, `span^e 要素で包摂されるように~mark-upされていたとする: ◎ Thus, if we mark up the previous paragraph with a span element encompassing the first sentence:
<p><span class="test">これは、いくぶん長い~HTML段落であり、何~行lかに分断される。</span>最初の行lは、仮想の~tag列により識別される。他の行lは、段落~内の普通の行lとして扱われることになる。</p>
`first-line$pe 用に`仮想の~tag列$を挿入するとき、~UAは, `span^e に対する[ 開始tag, 終了tag ]を模倣して,正しい継承の挙動を得ることもできる。 ◎ the user agent could simulate start and end tags for span when inserting the fictional tag sequence for ::first-line to get the correct inheritance behavior.
<p><p::first-line><span class="test">これは、いくぶん長い~HTML段落であり、</span></p::first-line><span class="test">何~行lかに分断される。最初の行lは、仮想の</span>~tag列により識別される。他の行lは、段落~内の普通の行lとして扱われることになる。</p>
2.1.1. 整形される最初の行lの見出法
~CSSにおいては、 `first-line$pe 疑似要素の効果があるのは,`塊~容器$に添え付けられた場合に限られる。 要素の `整形される最初の行l@ が生じる所は、要素の子孫のうち[ 同じ`~flow内$にある(すなわち,浮動や位置決めに因り`~flow外$にされていない), かつ `塊level$である ]ものの内側で~MUST。 ◎ In CSS, the ::first-line pseudo-element can only have an effect when attached to a block container. The first formatted line of an element must occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not out-of-flow due to floating or positioning).
例えば `<div><p>最初の行l…</p></div>^samp における, `div^e の`整形される最初の行l$は、 `p^e 内の `最初の行l…^samp になる(この `p^e, `div^e は、ともに塊とする)。 ◎ For example, the first line of the DIV in <DIV><P>This line...</p></DIV> is the first line of the P (assuming that both P and DIV are blocks).
[ `table-cell$v / `inline-block$v ]は塊levelではないので、その最初の行lは,先祖~要素の`整形される最初の行l$にはなり得ない。 したがって, `<div><p style="display: inline-block">Hello<br>Goodbye</p> etcetera</div>^samp における `div^e の`整形される最初の行l$は、行l "Hello" にはならない。 ◎ The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</p> etcetera</DIV> the first formatted line of the DIV is not the line "Hello".
注記: [ `<p><br>First...^samp における `p^e の最初の行l ]に包含される字lはないことに注意( `br^e は既定の~styleとする)。 単語 "First" は、`整形される最初の行l$上にはない。 ◎ Note: Note that the first line of the p in this fragment: <p><br>First... doesn’t contain any letters (assuming the default style for br). The word "First" is not on the first formatted line.
~UAは、[ `first-line$pe 疑似要素の仮想の開始tagが、[ 【最初の行lを】封入している`塊level$の要素のうち,最も内縁のもの ]の,すぐ内側に入子にされていた ]かのように動作し~MUST。 ◎ A user agent must act as if the fictional start tags of a ::first-line pseudo-element were nested just inside the innermost enclosing block-level element.
例えば、次の~HTML: ◎ For example, the fictional tag sequence for
<div> <p>最初の段落</p> <p>二番目の段落</p> </div>
に対する`仮想の~tag列$は: ◎ is
<div> <p><div::first-line><p::first-line>最初の段落</p::first-line></div::first-line></p> <p><p::first-line>二番目の段落</p::first-line></p> </div>
【 この例は、 `div^e, `p^e ともに `first-line$pe が適用されている。 `仮想の~tag列$を生成する順序は、先祖である `div^e から先になるようだ。 】
2.1.2. `first-line^pe 疑似要素の~style付け
`first-line$pe 疑似要素により生成される~boxは、`行内level$の要素によるそれと類似的に挙動するが、一定の制約がある。 `first-line$pe 疑似要素には、次の~propが適用される: ◎ The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:
- すべての~font~prop `CSS3-FONTS$r ◎ all font properties (see [CSS3-FONTS])
- `color$p, `opacity$p ~prop `CSS3COLOR$r ◎ the color and opacity properties (see [CSS3COLOR])
- すべての背景~prop `CSS3BG$r ◎ all background properties (see [CSS3BG])
- 植字用~propのうち,行内~要素に適用されるもの `CSS3TEXT$r ◎ any typesetting properties that apply to inline elements (see [CSS3TEXT])
- すべての~text装飾~prop `CSS3-TEXT-DECOR$r ◎ all text decoration properties (see [CSS3-TEXT-DECOR])
- 行内~layout~propのうち,行内~要素に適用されるもの `CSS-INLINE-3$r ◎ any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
- その他、個々の仕様にて `first-line$pe に適用されるものと定義されている~prop。 ◎ any other properties defined to apply to ::first-line by their respective specifications
~UAは、他の~propを適用してもよい。 ◎ User agents may apply other properties as well.
2.1.3. 継承と `first-line^pe 疑似要素
~CSS継承の間に,最初の行l上に生じる子~要素の部位が `first-line$pe 疑似要素から継承する~propは、 `first-line$pe 疑似要素に適用-可能なものに限られる。 すべての他の~propは、 `first-line$pe 疑似~要素の疑似要素でない親から継承される。 (最初の行l上に生じない子~要素の部位は、常に,その子の親から継承する。) ◎ During CSS inheritance, the portion of a child element that occurs on the first line only inherits properties applicable to the ::first-line pseudo-element from the ::first-line pseudo-element. For all other properties inheritance is from the non-pseudo-element parent of the first line pseudo element. (The portion of a child element that does not occur on the first line always inherits from the parent of that child.)
2.2. `first-letter^pe 疑似要素
`first-letter@pe 疑似要素は、その`出自の要素$の`整形される最初の行l$上の最初の`~typographic字l単位$ `CSS3TEXT$r を表現する — 同じ行lに他の内容(画像や行内~tableなど)が先行していないならば。 `first-letter$pe 疑似要素は、 “持上げ頭字” や “埋没~頭字” などの`先頭字$を作成するときに利用できる — それらの~typographic効果は共通する。 ◎ The ::first-letter pseudo-element represents the first typographic letter unit [CSS3TEXT] on the first formatted line of its originating element, if it is not preceded by any other content (such as images or inline tables) on its line. The ::first-letter pseudo-element can be used to create “initial caps” and “drop caps”, which are common typographic effects.
例えば次の規則は、 `CSS-INLINE-3$r にて定義される `initial-letters$p ~propを用いて,各[ `h2^e に後続する段落 ]ごとに 2 行lに~spanする埋没~頭字を作成する: ◎ For example, the following rule creates a 2-line drop-letter on every paragraph following a level-2 header, using the initial-letter property defined in [CSS-INLINE-3]:
h2 + p::first-letter { initial-letters: 2; }
最初の`~typographic字l単位$に[ 先行する, または後続する ]ような約物(すなわち、`~Unicode一般~字種$ `Punctuation^uc ( `P*^uc ) `UAX44$r )に属する文字も, `first-letter$pe 疑似要素に含められ~MUST。 ◎ Punctuation (i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]) that precedes or follows the first typographic letter unit must also be included in the ::first-letter pseudo-element.
`CSS3TEXT$r に説明されるように、`~typographic字l単位$は複数の ~Unicode符号位置を含み得る。 例えば,結合~文字たちは、それらの基底~文字とともに保たれ~MUST。 また,一部の言語には、ある種の字lの組合を扱う方法について,追加の規則もある。 例えば~Dutchでは、要素の始めに 字lの組合 "ij" が現れる場合、両~字lとも `first-letter$pe 疑似要素の中にあると見なさるべきである。 `UAX29$r ~UAは、[ `first-letter$pe 疑似要素の 包含塊の内容~言語 ]による最初の字lに対する慣行を反映するように,自身による`~typographic字l単位$の定義を誂えるべきである。 ◎ As explained in [CSS3TEXT], a typographic letter unit can include more than one Unicode codepoint. For example, combining characters must be kept with their base character. Also, languages may have additional rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of an element, both letters should be considered within the ::first-letter pseudo-element. [UAX29] The UA should tailor its definition of typographic letter unit to reflect the first-letter traditions of the ::first-letter pseudo-element’s containing block’s content language.
注記: 最初の `~typographic字l単位$は、数字にもなり得ることに注意 — 例: "67 億もの大金…" の "6" など。 ◎ Note: Note that the first typographic letter unit may in fact be a digit, e.g., the “6” in “67 million dollars is a lot of money.”
`first-letter$pe 疑似要素を形成する文字たちが複数の要素にまたがる場合 — `<p>‘<em>T...^samp 内の `‘T^c など — ~UAは、この疑似要素を,片方だけまたは両方の要素から作成してもよいし,単純に作成しないことにしてもよい。 加えて,塊の最初の字l(たち)が行lの始端に来ない場合(例えば,双方向的な並替えに因り)、~UAは,疑似要素(たち)を作成する必要はない。 ◎ If the characters that would form the ::first-letter are not in the same element, such as ‘T in <p>‘<em>T..., the user agent may create a ::first-letter pseudo-element from one of the elements, both elements, or simply not create a pseudo-element. Additionally, if the first letter(s) of the block are not at the start of the line (for example due to bidirectional reordering), then the user agent need not create the pseudo-element(s).
`first-letter$pe 疑似要素は、 `first-line$pe 疑似要素があれば その中に包含され、したがって `first-line$pe から継承する。 ◎ The ::first-letter pseudo-element is contained within any ::first-line pseudo-elements, and thus inherits from ::first-line.
2.2.1. 最初の字lの見出法
最初の字lは、`整形される最初の行l$に生じ~MUST。 例えば, `<p><br>First...^samp のような~HTML片の場合、最初の行lは字lを包含しないので, `first-letter$pe に合致するものはない。 特に、 "First" の "F" には合致しない。 ◎ The first letter must occur on the first formatted line. For example, in this HTML fragment: <p><br>First... the first line doesn’t contain any letters and ::first-letter doesn’t match anything. In particular, it does not match the “F” of “First”.
~CSSにおいては、 `first-letter$pe 疑似要素が適用されるのは,`塊~容器$に限られる。 この仕様の将来~versionでは、この疑似要素を他の`表示-型$にも適用できるようにし得る。 `first-letter$pe 疑似要素は、[ ~textを包含する / 同じ~flow内にある~textを 包含している子孫がある ]ようなすべての要素に利用できる。 ~UAは、[ `first-letter^pe 疑似要素の仮想の開始tagが要素の最初の~textの直前にある ]かのように動作するべきである — その最初の~textが子孫~内にない場合でも。 ◎ In CSS, the ::first-letter pseudo-element only applies to block containers. A future version of this specification may allow this pseudo-element to apply to more display types. The ::first-letter pseudo-element can be used with all such elements that contain text, or that have a descendant in the same flow that contains text. A user agent should act as if the fictional start tag of the ::first-letter pseudo-element is just before the first text of the element, even if that first text is in a descendant.
例えば、次の~HTML片: ◎ Example: The fictional tag sequence for this HTML fragment:
<div> <p>~~最初の~text。
による`仮想の~tag列$は: ◎ is:
<div> <p><div::first-letter><p::first-letter>~~最</...></...>~~初の~text。
~CSSにおいては、 `table-cell$v / `inline-block$v の最初の字lは、先祖~要素の最初の字lにはなれない。 したがって `<div><p style="display: inline-block">Hello<br>Goodbye</p> etcetera</div>^samp における `div^e の最初の字lは、字l "H" ではない。 ~~実際、この `div^e に最初の字lはない。 要素が~list~itemである場合( `display$p: `list-item$v )、 `first-letter$pe は,[ ~markerの後にある`主要~box$ ]内の最初の字lに適用される。 ~UAは、[ `list-style-position$p: `inside^v ]にされている~list~item上の `first-letter$pe は無視してよい。 要素に[ `before$pe / `after$pe ]内容もある場合、 `first-letter$pe は,その内容を含んでいる要素の最初の字lに適用される。 ◎ In CSS the first letter of a table-cell or inline-block cannot be the first letter of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first letter of the DIV is not the letter "H". In fact, the DIV doesn’t have a first letter. If an element is a list item (display: list-item), the ::first-letter applies to the first letter in the principal box after the marker. User-Agents may ignore ::first-letter on list items with list-style-position: inside. If an element has ::before or ::after content, the ::first-letter applies to the first letter of the element including that content.
例えば、規則 `p::before {content: "Note: "}^css の後 , 選択子 `p::first-letter^css は、 "Note" の "N" に合致する。 ◎ Example: After the rule p::before {content: "Note: "}, the selector p::first-letter matches the "N" of "Note".
2.2.2. `first-letter^pe 疑似要素の~style付け
~CSSにおいては、`first-letter^pe 疑似要素は、`行内level$の要素に類似する。 `first-letter$pe 疑似要素には、次の~propが適用される: ◎ In CSS a ::first-letter pseudo-element is similar to an inline-level element. The following properties that apply to ::first-letter pseudo-elements:
- すべての~font~prop `CSS3-FONTS$r ◎ all font properties (see [CSS3-FONTS])
- `color$p, `opacity$p ~prop `CSS3COLOR$r ◎ the color and opacity properties (see [CSS3COLOR])
- すべての背景~prop `CSS3BG$r ◎ all background properties (see [CSS3BG])
- 植字用~propのうち,行内~要素に適用されるもの `CSS3TEXT$r ◎ any typesetting properties that apply to inline elements (see [CSS3TEXT])
- すべての~text装飾~prop `CSS3-TEXT-DECOR$r ◎ all text decoration properties (see [CSS3-TEXT-DECOR])
- 行内~layout~propのうち,行内~要素に適用されるもの `CSS-INLINE-3$r ◎ any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
- 各種 ~margin/~padding ~prop `CSS21$r ◎ margin and padding properties (see [CSS21])
- 各種~border~prop, `box-shadow$p `CSS3BG$r ) ◎ border properties and box-shadow (see [CSS3BG])
- その他、個々の仕様により、 `first-letter$pe に適用されるものと定義される~prop ◎ any other properties defined to apply to ::first-letter by their respective specifications
~UAは、他の~propを適用してもよい。 ◎ User agents may apply other properties as well.
注記: ~CSSの以前の~levelでは、~UAには、[ 字lが成す図形に基づいて[ 行l高, 縦幅&横幅 ]を選ぶこと / ~font~sizeを近似すること / 整形-時に ~glyph外形線を織り込むこと ]も許容されていた。 この可能性は、意図的に除去された — 意図される利用-事例(埋没~頭字)には拙い解決策であることが判明している上、相互運用性の問題ももたらすので。 ◎ Note: In previous levels of CSS, User Agents were allowed to choose a line height, width and height based on the shape of the letter, approximate font sizes, or to take the glyph outline into account when formatting. This possibility has been intentionally removed, as it proved to be a poor solution for the intended use case (Drop Caps), yet caused interoperability problems.
先頭字に可能な描画を,次の~CSS, ~HTML例に示す。 最初の字lの仮想の開始tagは `span^e の内側にあるため、最初の字lの `font-weight^p は, `span^e と同じ `bold^v ではなく `normal^v になることに注意: ◎ Example: This CSS and HTML example shows a possible rendering of an initial cap. Note that the fictional start tag of the first letter is inside the span, and thus the font weight of the first letter is normal, not bold as the span:
p { line-height: 1.1 } p::first-letter { font-size: 3em; font-weight: normal } span { font-weight: bold } ... <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> Erbarremt over my en mijn benaeuwde vesten<br> En arme burgery, en op mijn volcx gebed<br> En dagelix geschrey de bange stad ontzet.
次の~CSS, ~HTMLは、 2 行lに~spanする埋没~頭字を作成することになる: ◎ The following CSS will make a drop cap initial letter span about two lines:
p { font-size: 12pt; line-height: 1.2 } p::first-letter { font-size: 200%; font-weight: bold; float: left } span { text-transform: uppercase }
<p><span>The first</span> few words of an article in The Economist.</p>
この例は、次のように整形されるであろう: ◎ This example might be formatted as follows:
`仮想の~tag列$は: ◎ The fictional tag sequence is:
<p> <span> <p::first-letter> T </p::first-letter>he first </span> few words of an article in the Economist. </p>
`first-letter$pe 疑似要素~tagは,内容(すなわち,先頭字)を~~直に括る一方で、 `first-line^pe 疑似要素の開始tagは,塊~要素の開始tagの直後に挿入されることに注意。 ◎ Note that the ::first-letter pseudo-element tags abut the content (i.e., the initial character), while the ::first-line pseudo-element start tag is inserted right after the start tag of the block element.
3. 強調~用の疑似要素
3.1. 強調された内容の選択-法: `selection^pe, `inactive-selection^pe, `spelling-error^pe, `grammar-error^pe 疑似要素
以下に挙げる `強調~疑似要素@ は、何らかの仕方で強調されている,文書のある部位を表現する。 これらは、要素~木に収まることは必要とされず,入子~構造を尊守せずに要素~境界を任意にまたがり得る: ◎ The highlight pseudo-elements represent portions of a document that have been highlighted in some way. They do not necessarily fit into the element tree, and can arbitrarily cross element boundaries without honoring its nesting structure.
- `selection@pe
- `inactive-selection@pe
- これらはいずれも、利用者により強調されている,文書のある部位を表現する。 また、例えば,編集-可能な~text欄の中で選択された~textにも適用される。 ◎ The ::selection and ::inactive-selection pseudo-elements represent the portion of a document that has been highlighted by the user. This also applies, for example, to selected text within an editable text field.
- `selection$pe は,作動中の選択に適用される一方で、 `inactive-selection$pe は,作動中でない選択に適用される(例: 文書~windowは作動中でなく~eventを受取っていないとき)。 ◎ ::selection applies to active selections, wherease ::inactive-selection applies to inactive selections (e.g. when the document window is inactive and therefore not receiving events).
- `spelling-error@pe
- ~UAにより綴りが誤っているとされた,~textの部位を表現する。 ◎ The ::spelling-error pseudo-element represents a portion of text that has been flagged by the user agent as misspelled.
- `grammar-error@pe
- ~UAにより文法的に不正とされた,~textの部位を表現する。 ◎ The ::grammar-error pseudo-element represents a portion of text that has been flagged by the user agent as grammatically incorrect.
既定の~UA~stylesheetとして、次のものが追加される: ◎ The following addition is made to the default UA stylesheet:
::spelling-error { text-decoration-line: spelling-error; } ::grammar-error { text-decoration-line: grammar-error; }
注記: ~CSSの将来~levelでは、~custom強調~疑似要素を作成する仕方も導入され得る。 ◎ Note: A future level of CSS may introduce ways to create custom highlight pseudo-elements.
3.2. 強調の~style付け
`強調~疑似要素$には、次の~propが適用される: ◎ The following properties apply to the highlight pseudo-elements:
- `color$p
- `background-color$p
- `cursor$p
- `caret-color$p
- `outline$p とその下位porp ◎ outline and its longhands
- `text-decoration$p とそれに結付けられた各種~prop ◎ text-decoration and its associated properties
- `text-emphasis-color$p
- `text-shadow$p
【 色や装飾など、~layoutを変化させないものに限られているのは、 ~security, ~privacy上の理由 もある。 】
ここに含められるべき~propは、他にもあるか? ◎ Are there any other properties that should be included here?
注記: 歴史的に,(これを書いている時点で)相互運用可能に~supportされているのは、 `color$p / `background-color$p に限られている。 ◎ Note: Historically (and at the time of writing) only color and background-color have been interoperably supported.
`color$p が指定されていない場合、強調された~textには,当の~text(と~text装飾)の未選択時の色が利用され~MUST(通例通り, `background-color$p の初期値は `transparent$v になる)。 ◎ If color is not specified, the text (and text decoration)'s unselected color must be used for the highlighted text. (As usual, the initial background-color is transparent.)\
これに `currentcolor$v を再利用できるか? — それは今や,それ自身に算出されるので。 ◎ Issue: Can we reuse currentColor for this, now that it computes to itself?
~UAは、 `color$p, `background-color$p とも指定されてないときは,~OSに既定の強調~色を利用するべきである。 ◎ The UA should use the OS-default highlight colors when neither color nor background-color has been specified by the author.
注記: この,対にされて~cascadeする挙動は、~OSに既定の選択~色を 通常の~cascadeを用いて 表現できなくしている。 しかしながら,すでに~browser間で相互運用可能に実装されているので、おそらく~Web互換性の要件になる。 ◎ Note: This paired-cascading behavior does not allow using the normal cascade to represent the OS default selection colors. However it has been interoperably implemented in browsers and is thus probably a Web-compatibility requirement.
`color$p ~propは、[ ~text, および~textに適用されているすべての行l装飾(下線, 上線, 取消線) ]いずれの色とも指定する。 注記: `text-emphasis-color$p の既定は `currrentColor^v なので、圏点の色も既定で設定することになる。 ◎ The color property specifies the color of both the text and all line decorations (underline, overline, line-through) applied to the text. Note: Because text-emphasis-color defaults to currrentColor, it will by default also set the color of the the emphasis marks.
3.3. 強調を成す区画
強調~用の疑似要素の各 型 — `selection$pe, `inactive-selection$pe, `spelling-error$pe, `grammar-error$pe — ごとに、文書~全体にわたる `強調~overlay@ が存在し、その作動中の部位は,対応する`強調~疑似要素$により表現される。 ◎ For each type of highlighting (see §3.1 Selecting Highlighted Content: the ::selection, ::inactive-selection, ::spelling-error, and ::grammar-error pseudo-elements) there exists a single highlight overlay for the entire document, the active portions of which are represented by the corresponding highlight pseudo-element.\
各~boxは、自身が直に包含する[ ~text/`置換され$る内容 ]に対応する,~overlayの一部分を所有する: ◎ Each box owns the piece of the overlay corresponding to any text or replaced content directly contained by the box.
- ~textに対する~overlayは,少なくとも~em~box全体を覆ってい~MUST。 また、~em~boxを行l~box辺まで更に上/下に拡張してよい。 文字~間のアキもまた,~overlay区画の一部にしてよい — そのようなアキは、両側の文字とも包含するような要素のうち最も内縁のものに所属し,両~文字とも選択されたとき選択される。 ◎ For text, the corresponding overlay must cover at least the entire em box and may extend further above/below the em box to the line box edges. Spacing between two characters may also be part of the overlay area, in which case it belongs to the innermost element that contains both characters and is selected when both characters are selected.
- `置換され$る内容に対する~overlayは、置換される~obj全体を覆ってい~MUST。 また、要素の内容~box全体を含むように外方へ拡張してよい。 ◎ For replaced content, the associated overlay must cover at least the entire replaced object, and may extend outward to include the element’s entire content box.
- ~overlayはまた、要素の~border~boxの中の,他の区画を含んでよい — そのような区画は、区画を包含する要素のうち,最も内縁のものに所属する。 ◎ The overlay may also include other other areas within the border-box of an element; in this case, those areas belong to the innermost such element that contains the area.
次を見よ: F2F minutes, dbaron’s message, Daniel’s thread, Gecko notes, Opera notes, Webkit notes ◎ See F2F minutes, dbaron’s message, Daniel’s thread, Gecko notes, Opera notes, Webkit notes
これは、働き方を正しく述べているのか? ◎ Not sure if this is the correct way of describing the way things work.
3.4. ~cascade法と要素ごとの強調~style
各~要素は、自前の部位に`強調~overlay$を描く — それは、[ 自身または いずれかの先祖を `出自の要素$とするような,`強調~疑似要素$ ]に指定された~styleを受取る。 複数の~styleが競合する場合、最も内縁の要素に属している~styleが,~cascadeの結果において勝つ。 ◎ Each element draws its own portion of the highlight overlay, which receives the styles specified by the highlight pseudo-element styles for which that element or one of its ancestors is the originating element. When multiple styles conflict, the winning style is the one belonging to the innermost element after cascading.
例えば次の規則が: ◎ For example, if the following rules were applied:
p::selection { color: yellow; background: green; } p > em::selection { color: orange; } em::selection { color: red; }
次の~markupに適用されていた場合: ◎ to the following markup:
<p>これと<em>これを</em>強調します。</p>
背景の強調~色は全体が `green^v になり、 `em^e 要素の外側, 内側の~text色は,順に `yellow^v, `orange^v になる。 ◎ The highlight would be green throughout, with yellow text outside the <em> element and orange text inside it.
これは、別法として,継承の用語で述べることもできる。 観測し得る相違点は、 `inherit$v, `unset$v がどう挙動するかになる。 親 `selection$pe, `出自の要素$ のどちらから継承するべきか? Opera は前者を行う一方で Gecko/Blink は後者を行う。 ◎ This could alternately be described in terms of inheritance. The observable differences would be in how inherit and unset behave. Should it inherit from the parent ::selection or the originating element? Opera does the former, Gecko/Blink the latter.
複数の選択~styleを求める作者は、文書~全体にわたる選択~style用に `:root::selection^css を利用するべきである — そうすれば、子孫において きれいに上書きできるようになるので。 `selection$pe だけだと,木~内の各 要素に適用され、より特有の~styleが先祖にあっても,それを上書きすることになる。 ◎ Authors wanting multiple selections styles should use :root::selection for their document-wide selection style, since this will allow clean overriding in descendants. ::selection alone applies to every element in the tree, overriding the more specific styles of any ancestors.
例えば、作者が次を指定していて: ◎ For example, if an author specified
::selection { background: blue; } p.warning { background: red; }
文書が次を含んでいる場合: ◎ and the document included
<p class="warning">ある<strong>とても重要な情報</strong></p>
"とても重要な情報" の強調は `blue^v になる — `strong^e 要素の `selection$pe は、 `::selection { background: blue; }^css 規則にも合致するので(型~選択子を欠くものは、暗黙的に `*^css があることに注意)。 ~style規則を次のように与えれば、意図される挙動になる: ◎ The highlight would be blue around “very important information” because the <strong> element´s ::selection also matches the ::selection { background: blue; } rule. (Remember that * is implied when a tag selector is missing.) The style rules that would give the intended behavior are
:root::selection { background: blue; } p.warning { background: red; }
3.5. 強調の塗り方
各 `強調~疑似要素$は、~overlayを成す作動中の部位の前面【利用者から見て手前側】に, かつ 有位置な子孫(もしあれば)の直ぐ背後に背景( `background^p )を描く (すなわち、 CSS2.1§E.2 段 8 の直前)。 それはまた、~text選択(および,適用されている~text装飾)を描くのを抑止する — 代わりに,その~text(および,装飾)を、指定された `color$p を用いて,`強調~overlay$を成す背景の前面に描直す。 ◎ Each highlight pseudo-element draws its background over the active portion of the overlay, painting it immediately below any positioned descendants (i.e. just before step 8 in CSS2.1§E.2). It also suppresses the drawing of any selected text (and any text decorations applied to that text) and instead redraws that text (and its decorations) over the highlight overlay background using the specified color.
~text影には何が起こるべきか? — それらを元の色で描くと、その色が灰色の濃淡でない場合,~~調和を乱す。 【なぜ灰色は除かれている?】 ◎ What should happen with text shadows? Drawing them in their original color is disconcerting if that color is not a shade of gray.
`置換され$ない内容に対しては、~UAは `color$p, `background-color$p の指定値を(~alpha~channelも含め)尊守し~MUST。 他方,`置換され$る内容に対しては、~UAは,内容が選択から透けて見えるような半透明な膜で~~覆うべきである。 この膜の色は、[ `background-color$p の指定値が `transparent$v でなければそれ / 他の場合は `color$p の指定値 ]になるべきである — その色が不透明な場合は,~alpha~channelを調整してよい。 ◎ For non-replaced content, the UA must honor the color and background-color (including their alpha channels) as specified. However, for replaced content, the UA should create a semi-transparent wash to coat the content so that it can show through the selection. This wash should be of the specified background-color if that is not transparent, else of the specified color; however the UA may adjust the alpha channel if it is opaque.
`selection$pe ~overlayは, `spelling-error$pe ~overlayの前面に描かれ、それは, `grammar-error$pe ~overlayの前面に描かれる。 ◎ The ::selection overlay is drawn over the ::spelling-error overlay which is drawn over the ::grammar-error overlay.
3.6. ~security, ~privacy上の考慮点
綴りや文法の誤りに対する~style付けは、利用者の辞書の内容についての情報(利用者の名前や, 住所録の内容まで含み得る)を漏洩し得るので、 `spelling-error$pe / `grammar-error$pe を実装する~UAは,そのような強調された区分の~style付けを頁が読取れないよう防止し~MUST。 【したがって、~layoutが変化するものなど,他の状態に影響して適用されたことが判別できる~styleは、適用されないことになる。】 ◎ Because the styling of spelling and grammar errors can leak information about the contents of a user’s dictionary (which can include the user’s name and even includes the contents of his/her address book!) UAs that implement ::spelling-error and ::grammar-error must prevent pages from being able to read the styling of such highlighted segments.
4. 木に留まる疑似要素
`木に留まる疑似要素@ は、常に~box木の中の ある~boxに対応する。 それは、`出自の要素$から`継承-$可能な~propすべてを継承する。 `継承-$可能でない~propは,通例通り それぞれの`初期値$をとる。 `CSS3CASCADE$r ◎ Tree-abiding pseudo-elements always fit within the box tree. They inherit any inheritable properties from their originating element; non-inheritable properties take their initial values as usual. [CSS3CASCADE]
4.1. 生成~内容~疑似要素: `before^pe, `after^pe
`content$p の算出値が `none$v でないときには、これらの疑似要素は,その`出自の要素$の直の子であったかのように†,~boxを生成し、文書~木~内にある通常の要素と同じ様に~styleできる。 ◎ When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element, and can be styled exactly like any normal document-sourced element in the document tree.
【† したがって、要素から~styleも継承することになる。 】
- `before@pe
- `after@pe
- `出自の要素$の実際の内容の[ 直前( `before^pe )/ 直後( `after^pe ) ]にあって, ~box木において要素の子になるような,~style可能な疑似要素を表現する。 ◎ Represents a styleable child pseudo-element immediately before the originating element’s actual content. ◎ Represents a styleable child pseudo-element immediately after the originating element’s actual content.
例えば次の規則は、 `class^a 属性~値が `note^v を含んでいる 各 `p^e 要素ごとに,その内容の前に文字列 "注記:" を挿入する: ◎ For example, the following rule inserts the string “Note: ” before the content of every <p> element whose class attribute has the value note:
p.note::before { content: "注記:" }
`display$p の初期~値は `inline$v なので、これは`行内~box$を生成することになる。 `p^e の他の行内~boxである子と同様に,それは `p^e の行内~整形~文脈に関与し,他の内容と行lを共有し得ることになる。 ◎ Since the initial value of display is inline, this will generate an inline box. Like other inline children of <p>, it will participate in <p>’s inline formatting context, potentially sharing a line with other content.
定例の要素の内容と同じく、 `before$pe / `after^pe 疑似要素を成す生成~内容は、その`出自の要素$に適用されている `first-line$pe や `first-letter$pe 疑似要素があれば,それらに含められ得る/含められてもよい。 ◎ As with the content of regular elements, the generated content of ::before and :after pseudo-elements may be included in any ::first-line and ::first-letter pseudo-elements applied to its originating element.
`CSS21$r 向けに書かれた既存の~stylesheetとの互換性のため、~UAは,これらの疑似要素に対しては、以前の,~colon 1 個の記法( `:before^css / `:after^css )も受容し~MUST。 ◎ For compatibility with existing style sheets written against CSS Level 2 [CSS21], user agents must also accept the previous one-colon notation (:before and :after) for these pseudo-elements.
4.2. ~list~marker:`marker^pe 疑似要素
`marker@pe 疑似要素は、~list~itemにて自動的に生成される~marker~boxを表現する。 `display$p: `list-item$v を見よ。 ◎ The ::marker pseudo-element represents the automatically generated marker box of a list item. (See display: list-item.)
`marker$pe 疑似要素には、次の~propが適用される: ◎ The following CSS properties apply to a ::marker pseudo-element:
- すべての~font~prop `CSS3-FONTS$r ◎ all font properties (see [CSS3-FONTS])
- `color$p ~prop `CSS3COLOR$r ◎ the color property (see [CSS3COLOR])
- `text-combine-upright$p ~prop `CSS3-WRITING-MODES$r ◎ the text-combine-upright property (see [CSS3-WRITING-MODES])
将来の仕様は、ここに挙げた~propを拡張することが予期されている。 しかしながら,~marker~box~layoutが全部的に定義されるまでは、許容される~propは,これらに限られる。 ◎ It is expected that future specifications will extend this list of properties; however at the moment marker box layout is not fully defined, so only these properties are allowed.
~UAは、自身の既定の~stylesheetに,次の規則を追加し~MUST: ◎ UAs must add the following rule to their default style sheet:
::marker { font-variant-numeric: tabular-nums; }
4.3. 仮入力: `placeholder^pe 疑似要素
`placeholder@pe 疑似要素は、~form入力~欄~内の仮入力( placeholder )~textを表現する: それは、当の欄の埋め方についての~hintを利用者に供するような,入力~textを表現する。 例えば日付~入力~欄の仮入力~textが "YYYY/MM/DD" であったなら、日付を与える数を[ 年, 月, 日 ]の順序で手入力することを明確化する。 ◎ The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text “YYYY/MM/DD” to clarify that numeric dates are to be entered in year-month-day order.
`first-line$pe 疑似要素に適用されるすべての~propは、 `placeholder$pe 疑似要素にも適用される。 ◎ All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.
対話的~媒体においては、仮入力~textは,利用者が入力~欄に手入力し始めたときに隠されることが多い。 しかしながら,これは、要件ではなく,入力~値と仮入力の両~textとも同時的に可視にしてもよい。 正確な挙動は~UAにより定義されることに注意。 静的~媒体(印刷など)においては、仮入力~textは,利用者が入力を手入力した後でも呈示することになる。 ◎ In interactive media, placeholder text is often hidden once the user has entered input; however this is not a requirement, and both the input value and the placeholder text may be visible simultaneously. The exact behavior is UA-defined. Note that in static media (such as print) placeholder text will be present even after the user has entered input.
~supportされる~propとして `text-align$p も含めるよう,求めている作者も見受けられる。 例えば ここの~comment を見よ。 ◎ Authors seem to want text-align on the list of supported properties. See e.g. comments here.
5. 重合している疑似要素~間の相互作用
次のことを~~念頭に: ◎ Recall that
- `before$pe / `after$pe を成す内容は、文書~木~内にある通常の要素であったかのように選択される。 ◎ the contents of ::before and ::after are selected exactly as if they were normal elements in the document source tree
- `first-letter$pe は、`整形される最初の行l$上にしか存在できないよう拘束され、それを成す最初の字lに~~後続する~textは, `first-letter$pe の境界を すき間なく回込む。 ◎ the ::first-letter boundaries are tightly wrapped around the first letter text, and ::first-letter is constrained to exist solely on the first formatted line.
- `first-line$pe の[ 始端は 包含塊を与える要素の境界のすぐ内側/ 終端は 行l上のすべての内容を閉じた後 ]に挿入される。 ◎ the ::first-line start is inserted just inside the containing block’s element boundary, and its end after the close of all content on the line
重合している疑似要素がどう相互作用するかを、次の~CSS, ~HTMLに例示する。 ◎ The following CSS and HTML example illustrates how overlapping pseudo-elements interact:
<style> p { color: red; font-size: 12pt } p::first-letter { color: green; font-size: 200% } p::first-line { color: blue } </style> <p>この~textは、 1 行lに収まらない。</p>
各 `p^e 要素の最初の字lは、色は `green^v, ~font~sizeは `24pt^v になる。 残りのうち、`整形される最初の行l$を成す部分は `blue^v になり,その他の段落を成す部分は `red^v になる。 ◎ The first letter of each P element will be green with a font size of ’24pt'. The rest of the first formatted line will be blue while the rest of the paragraph will be red.
単語 "収まらない" の直前で 行lが分断されるとするとき、この片に対する`仮想の~tag列$は、次のようになるであろう: ◎ Assuming that a line break will occur before the word "ends", the fictional tag sequence for this fragment might be:
<p> <p::first-line> <p::first-letter> こ </p::first-letter> の~textは、1 行lに </p::first-line> 収まらない。 </p>
6. ~CSS~obj~modelへの追加
疑似要素は、~scriptからも[ 到達できる/~styleできる/~event~targetとして可用になる ]べきである。 ◎ Pseudo-elements should be reachable by script, stylable from script, and available as event targets.
この節は、将来には~scriptによる疑似要素の作成を許容するよう拡張され得る。 ◎ Note We may extend this section in the future to allow creation of pseudo-elements from script.
この節~全体は、出発点に過ぎない。 ~feedbackを歓迎する。 現時点における実装は〜でない【単に無い?】 — この~approachはまだ不確かなので。 ◎ This entire section is a starting point for discussion. Feedback is welcome. Implementations, at this point, are not, as we are not yet sure of our approach.
これは、代替になる[ `PseudoElement^I, `pseudo()^m ]提案と併合される必要がある。 ◎ This needs to be merged with the alternative PseudoElement and pseudo() proposal.
6.1. ~interface `CSSPseudoElement^I
`CSSPseudoElement^I ~interfaceにより、~scriptは,疑似要素を[ ~styleする / ~event~targetにする ]ことが可能になる。 ◎ The CSSPseudoElement interface allows pseudo-elements to be styleable from script and makes them event targets.
この草案における~approachは、 `CSSPseudoElement^I ~interfaceに必要な最小限から開始し、そこから築き上げる。 より急進的な、疑似要素と~nodeに共通する あらゆるものを取り出して `Node^I, `CSSPseudoElement^I 用に新たな基底~classを作成する,別の~approachもある。 ◎ The approach in this draft is to start with a bare minimum for the CSSPseudoElement interface and build up from there. Another more radical approach could take everything that’s common between a pseudo-element and a node and create a new base class for both Node and CSSPseudoElement.
[`Exposed$=Window] interface `CSSPseudoElement@I { readonly attribute `CSSOMString$I `type$m; readonly attribute `CSSStyleDeclaration$I `style$m; }; `CSSPseudoElement$I implements `EventTarget$I;
- `type@m
-
疑似要素の型を表現する文字列を返す。 とり得る値は: ◎ The type attribute is a string representing the type of the pseudo-element. This can be one of the following values:
- `before^l
- 疑似要素は、要素の内容の前に作成されている。 ◎ The pseudo-element was created before the element’s contents.
- `after^l
- 疑似要素は、要素の内容の後に作成されている。 ◎ The pseudo-element was created after the element’s contents.
- `letter^l
- 疑似要素は、要素の最初の字lを成す。 ◎ The pseudo-element is the first letter of the element.
- `line^l
- 疑似要素は、要素の最初の行lを成す。 ◎ The pseudo-element is the first line of the element.
- `selection^l
- ある要素に対する選択~疑似要素。 ◎ The selection pseudo-element for the element.
これらの文字列に疑似要素の名と異なるものがあるのは何故? ◎ Why are these strings different from the name of the pseudo-element?
- `style@m
- `CSSStyleDeclaration$I `CSSOM$r を返す — それは、この疑似要素の~style情報(~inline~style)を直に設定できるようにする。 この~inline~styleは、当の疑似要素に~styleをあてがう どの~style規則よりも優先される。 ◎ The style attribute is a CSSStyleDeclaration [CSSOM] that allows directly setting style information (inline styles) onto the pseudo-element. Inline styles on a CSSPseudoElement have precedence over all style rules styling that pseudo-element.
- これは、実際の~inline~style 【通常の要素の~style属性による~style】 の様に ~cascadeする べきである — 異なるものではなく。 ◎ This should cascade like actual inline styles, not be a different thing.
`CSSPseudoElement^I ~objは、 `EventTarget$I ~interfaceを実装し~MUST。 ◎ The EventTarget interface [DOM-LEVEL-2-EVENTS] must be implemented by all instances of CSSPseudoElement as a conformance requirement of this module.
6.2. ~interface `CSSPseudoElementList^I
`CSSPseudoElementList^I は、 `CSSPseudoElement^I ~instanceたちが成す有順序~collectionを表現する。 ◎ The CSSPseudoElementList represents an ordered collection of CSSPseudoElement instances.
[`Exposed$=Window]
interface `CSSPseudoElementList@I {
readonly attribute `unsigned long$ `length$m;
`CSSPseudoElement$I `item$m(`unsigned long$ %index);
`CSSPseudoElement$I `getByType$m(`CSSOMString$I %type); /*
%type に合致する疑似要素が無ければ ~NULL を返す。
◎
replies null if no pseudo-element exists for the requested type
*/
};
- `length@m
- ~collectionの~size(含まれる `CSSPseudoElement^I ~objの個数)を返す(~collectionが空ならば 0 になる)。 ◎ The length attribute represents the number of CSSPseudoElement in the collection or zero if it is empty.\
- `item(index)@m
- [ %index が ~collectionの~size未満ならば ~collection内の %index 番の `CSSPseudoElement^I / ~ELSE_ ~NULL ]を返す。 ◎ The method item() is used to retrieve a CSSPseudoElement by index. It takes one parameter being the requested index into the collection. Its return value is the CSSPseudoElement at the requested index in the collection or null if that is not a valid index.
- `getByType(type)@m
- ~collection内に %type に合致する `CSSPseudoElement^I ~objが[ あればそれ / なければ ~NULL ]を返す。 【この記述は、合致するものは,高々 1 つしかないことを前提にしている。】 ◎ The method getByType() is used to retrieve a CSSPseudoElement by its type. Its return value is the CSSPseudoElement in the collection that matches the type or null if there is no CSSPseudoElement in the collection for that type.
6.3. `Window^I ~interfaceへの追加
`Window^I ~interfaceには、所与の要素により作成された所与の型の疑似要素を検索取得するための,新たな~methodが追加される: ◎ A new method is added to the Window interface to retrieve pseudo-elements created by a given element for a given type:
partial interface `Window$I { `CSSPseudoElementList$I `getPseudoElements()$m(`Element$I %elt, `CSSOMString$I %type); };
- `getPseudoElements(elt, type)@m
- 要素 %elt により作成された,型 %type の `CSSPseudoElement^I ~instanceすべてからなる `CSSPseudoElementList^I 値を返す。 【複数個あり得る? 】 ◎ The getPseudoElements() method is used to retrieve all CSSPseudoElement instances created by the element elt for the type type. Its return value is a CSSPseudoElementList, potentially empty if no pseudo-element exists for the given element and the given type.
変更点
2015 年 1 月 15 日付け作業草案 からの変更点は: ◎ Changes since the 15 January 2015 Working Draft include:
- `marker$pe 疑似要素を追加した。 ◎ Addition of the ::marker pseudo-element.
- 浮動された `first-letter$pe を与える特別な取扱いは除去した — `先頭字の~style付け$の支持を受けて。 `CSS-INLINE-3$r ◎ Removed special handling of floated ::first-letter in favor of initial letter styling. [CSS-INLINE-3]
- `inactive-selection$pe を追加した。 ◎ Added ::inactive-selection.
- ~IEのより きめ細やかな挙動に合致させるため、 `selection$pe 上の~text装飾の取扱いを定義した。 ◎ Defined handling of text decorations on ::selection to match IE’s more sensible behavior.
- 疑似要素 ~obj~model設計-に関する論点への~link。 ◎ Links to pseudo-element OM design discussions.
- 様々な小さな明確化。 ◎ Various minor clarifications.
- ~UA~stylesheet内の[ `spelling-error$pe / `grammar-error$pe ]に[ `spelling-error$v / `grammar-error$v ]を利用。 ◎ Use spelling-error and grammar-error with ::spelling-error and ::grammar-error in the UA stylesheet.
謝辞
この仕様の構想, 開発, 考査の過程に協力された次の方々に:
The editors would like to thank the following individuals for their contributions, either during the conception of the specification or during its development and specification review process: Tab Atkins, David Baron, Razvan Caliman, Chris Coyier, Anders Grimsrud, Vincent Hardy.