From 1b42d21f4d5d71acd0a9cb4defb6bd8b19eeed3f Mon Sep 17 00:00:00 2001 From: triple-underscore Date: Thu, 13 Jul 2023 20:29:23 +0900 Subject: [PATCH] [css-nesting-1] Apply "Require div&, disallow &div, for Sass compat", so &div is invalid and div& is valid. https://github.com/w3c/csswg-drafts/issues/8662 --- css-nesting-ja.html | 355 +++++++++++--------------------------------- 1 file changed, 87 insertions(+), 268 deletions(-) diff --git a/css-nesting-ja.html b/css-nesting-ja.html index 2a8502631..8348b8fdc 100644 --- a/css-nesting-ja.html +++ b/css-nesting-ja.html @@ -127,8 +127,8 @@ ●●options spec_title:CSS Nesting Module -spec_date:2023-07-06 -trans_update:2023-07-08 +spec_date:2023-07-13 +trans_update:2023-07-13 source_checked:221027 page_state_key:CSS original_url:https://drafts.csswg.org/css-nesting/ @@ -209,7 +209,6 @@ t.forgiving-selector-list:~SELECTORS4#typedef-forgiving-selector-list t.scope-start:~CASCADE6#typedef-scope-start t.scope-end:~CASCADE6#typedef-scope-end -t.declaration-list:~CSSSYN#typedef-declaration-list t.block-contents:~CSSSYN#typedef-block-contents t.rule-list:~CSSSYN#typedef-rule-list t.ident-token:~CSSSYN#typedef-ident-token @@ -237,6 +236,7 @@ 選択子~list:~SELECTORS4#selector-list 相対~選択子:~SELECTORS4#relative-selector 結合子:~SELECTORS4#selector-combinator +子孫~結合子:~SELECTORS4#descendant-combinator ~cascade:~CASCADE#cascade 出現順序:~CASCADE#cascade-order @@ -244,10 +244,6 @@ ~style規則:~CSSSYN#style-rule ~at-規則:~CSSSYN#at-rule 宣言:~CSSSYN#declaration - ~CSSSYN#css-parse-something-according-to-a-css-grammar - -~CSS識別子:~CSSVAL#css-css-identifier -関数-記法:~CSSVAL#functional-notation 条件付き~group規則:~CSSCOND#conditional-group-rule @@ -276,7 +272,7 @@ 合体:compound::~ 詳細度:specificity::~ CSSOM: -宣言~群:declarations:宣言 list::宣言リスト + 宣言~群:declarations 出現順序:order of appearance:~ 無特能:featureless::~ @@ -293,11 +289,9 @@ 入子法:nesting::入れ子法 それらの順序:relative order 参照r:refer:参照 -不可分:atomic:~ ●構文 接頭-:prefix::~ -先読み:lookahead:~ 糖衣:sugar::~ 糖衣を外す:desugar 集約-:aggregate:~ @@ -308,35 +302,30 @@ 量:amount:~ 展開-:expand:~ 遭遇-:encounter:~ +変形-:transform::~ + 変形するもの:transformation 混合-法:mixing - 片:bit of 来る:come + 来な:come 記され:written 書く:write 〜を書くための:〜-writing 書かれ:written - 明らかにする:tell - 明らかになる:can tell - 明らかにならない:can't tell 中で一緒にされ:directly appended together 識別子:ident 混ぜこぜに:intermix - ~~入力:seeing 積み上げる:stack up - わずかな:small 短い:small 二重にする:doubled-up 回数:repetition 何回も繰返される:have significant repetition - 来る:come 先頭に置く必要はない:n’t have to be at the beginning of 先頭:very start of 先頭の:initial そのまま:as-is ●仕様 -際限ない:unboundedな:~ 保守能:maintainability:~ 編集-:edit:~ 編集:editing:~ @@ -345,9 +334,7 @@ 機能-:function:~ 複雑:complicated:~ 採用-:adopt:~ -想定-:suppose:~ 普通の:ordinaryな:~ -対処-:work around:~ 指数関数的:exponential:~ 爆発:explosion:~ 膨大:massive:~ @@ -364,10 +351,12 @@ monkey: patch::::パッチ 元々:originalに:~ -探究-:explore:~ 捕える:catchする:~ 句-:phrase:~ 完璧:perfect:~ +忠実:faithful:~ +大幅:drastic:~ +違法:illegal:~ ~module性:modularity アリ性:possibility @@ -384,11 +373,9 @@ 一致する:equivalent ~~新たに得る:gain 最終的に:finally - 最終的:eventual 〜かどうか調べる:looking for ついて来る:comes with 課-:impose - ~~分別:apart 以前からある:predate 多くが〜こともあって:largely because 遥かに超える:much, much more! @@ -403,8 +390,6 @@ ではなぜ:That skirts the question, tho: 役立たずに見える:silly ^en:versus - 少し書き方を違えるだけで可能:be written, they just need to be slightly rephrased - 〜を除けば:with exception 少なくとも:at minimum と併用する例:Example usage with 事実:fact @@ -423,13 +408,17 @@ 〜だけが変更される:just `SELECTORS-4$r:Selectors ~version付け:versioning + 幸いにも:luckily + この仕様:CSS Nesting + そもそも:in the first place ●未分類 -重合する:overlapする:重なり合う +重合しな:overlapしな:重なり合わな 連結-:concatenate:~ megabyte::::メガバイト component::::コンポーネント 付する:attachする:~ +前処理器:preprocessor::~::プリプロセッサ Sass BEM @@ -457,6 +446,7 @@ 変わり:vary 何か:anything 合致するものは無い:fails to match anything + それでも:continue ●●ref_normative @@ -469,8 +459,6 @@ Tab Atkins Jr.; Chris Lilley; Lea Verou. ＜CSS Color Module Level 4＞. URL: https://drafts.csswg.org/css-color/ [CSS-SYNTAX-3] Tab Atkins Jr.; Simon Sapin. ＜CSS Syntax Module Level 3＞. URL: https://drafts.csswg.org/css-syntax/ -[CSS-VALUES-4] - Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/ [CSS21] Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. URL: https://drafts.csswg.org/css2/ [CSSOM] @@ -496,8 +484,6 @@ Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. ＜CSS Grid Layout Module Level 2＞. URL: https://drafts.csswg.org/css-grid-2/ [CSS-UI-4] Florian Rivoal. ＜CSS Basic User Interface Module Level 4＞. URL: https://drafts.csswg.org/css-ui-4/ -[HTML] - Anne van Kesteren; et al. ＜HTML Standard＞. Living Standard. URL: https://html.spec.whatwg.org/multipage/ ●●trans_metadata @@ -702,14 +688,12 @@

2. ~style規則の入子法

`入子な~style規則$は、 -その`選択子$が［ -`~CSS識別子$／`関数-記法$ -］から開始し得ないことを除けば， -通常の~style規則と正確に同じ様になる。 -加えて、 -`入子な~style規則$には，`相対~選択子$を利用できる。 +`相対~選択子$を利用できることを除けば， +通常の~style規則と正確に同じ様になる +— それは、 +暗黙的に，親~規則に合致した要素から相対的になる。 ◎ -A nested style rule is exactly like a normal style rule, with the exception that its selector cannot start with an identifier or functional notation. Additionally, nested style rules can use relative selectors. +A nested style rule is exactly like a normal style rule, except that it can use can use relative selectors, which are implicitly relative to the elements matched by the parent rule.

@@ -724,7 +708,7 @@

2. ~style規則の入子法

.foo { color: red; - .bar { + a { color: blue; } } @@ -741,11 +725,17 @@

2. ~style規則の入子法

.foo { color: red; } -.foo .bar { +.foo a { color: blue; } +

【 +この事例では、 +`a^css は`相対~選択子$であり， +その先頭には暗黙の`子孫~結合子$が在ると見なされる。 +】

+

入子にされた規則は、［ `入子ng選択子$を利用して， @@ -798,131 +788,6 @@

2. ~style規則の入子法

-
-

-しかしながら、 -入子な選択子が識別子から開始している場合（言い換えれば、`型~選択子$），妥当でない： -◎ -However, starting the nested selector with an identifier (a type selector, in other words) is invalid: -

- -
-div {
-  color: red;
-
-  input {
-    margin: 1em;
-  }
-}
-/* 
-`input^css は識別子なので，妥当でない。
-◎
-Invalid, because "input" is an identifier.
- */
-
- -

-そのような選択子でも、 -少し書き方を違えるだけで可能になる： -◎ -Such selectors can still be written, they just need to be slightly rephrased: -

- -
-div {
-  color: red;
-
-  & input { margin: 1em; }
-  /* 
-妥当になる
-— もはや，識別子から開始していないので。
-◎
-valid, no longer starts with an identifier
- */
-
-  :is(input) { margin: 1em; }
-  /* 
-~colonから開始しているので、
-妥当になり，上の規則と等価になる。
-◎
-valid, starts with a colon, and equivalent to the previous rule.
- */
-}
-
-
- -
- -なぜ，入子にされた規則の選択子には制約があるのか？ -◎ -Why are there restrictions on nested rule selectors? - - -

-あいにく，素朴に［ -`~style規則$の内側に別の~style規則を入子にする -］だけでは、 -多義的になる。 -選択子の構文【 `selector-list$t 】と宣言の構文【 `declaration-list$t 】は重合するので、 -所与の~text片が［ -宣言，ある~style規則の開始 -］どちらなのか明らかにするため，実装には際限ない先読みが要求される。 -◎ -Nesting style rules naively inside of other style rules is, unfortunately, ambiguous—the syntax of a selector overlaps with the syntax of a declaration, so an implementation requires unbounded lookahead to tell whether a given bit of text is a declaration or the start of a style rule. -

- -

-例えば，ある構文解析器に対する~~入力が -`color:hover ...^css から開始している場合、 -それが［ -`color$p ~prop（無効な値 `hover^v に設定されている）, -`color^e 要素~用の選択子 -］どちらなのかは明らかにならない。 -この相違を［ -妥当な~propを成すかどうか調べることで明らかにする -］ことにさえ依拠できない -— そうすると、 -構文解析は［ -実装が どの~prop【あるいは，~propのどの値】を~supportするか -］に依存するようになり，時を経れば変化し得ることにもなる。 -◎ -For example, if a parser starts by seeing color:hover ..., it can’t tell whether that’s the color property (being set to an invalid value...) or a selector for a <color> element. It can’t even rely on looking for valid properties to tell the difference; this would cause parsing to depend on which properties the implementation supported, and could change over time. -

- -

-この問題は、 -入子な~style規則が`~CSS識別子$から開始するのを禁止することで対処される -— 識別子から開始する`宣言$【！`宣言~群$】は，どれも~prop名を与えるので、 -構文解析器にとっては［ -`宣言$, `~style規則$ -］どちらを構文解析しているかは即時に明らかになる。 -◎ -Forbidding nested style rules from starting with an identifier works around this problem—all declarations start with an identifier giving the property name, so the parser can immediately tell whether it’s parsing a declaration or style rule. -

- -

-一部の非~browserによる入子な規則の実装は、 -この要件を課さない。 -~propと選択子の~~分別を明らかにすることは、 -ほとんどの事例では`最終的^emにはアリだが， -そのためには構文解析器に際限ない先読みが要求される。 -すなわち，構文解析器は、［ -どちらの仕方で解釈するよう想定されているか明らかになる -］まで，未知な量の内容を保持する必要も生じ得る。 -これまでの~CSSは，［ -より効率的な構文解析~algoを許容する -］よう［ -構文解析において，既知な わずかな量の先読みしか要求していない -］ので、 -際限ない先読みは，一般に［ -~browserによる~CSSの実装においては、 -受容-可能でない -］と見なされる。 -◎ -Some non-browser implementations of nested rules do not impose this requirement. It is, in most cases, eventually possible to tell properties and selectors apart, but doing so requires unbounded lookahead in the parser; that is, the parser might have to hold onto an unknown amount of content before it can tell which way it’s supposed to be interpreting it. CSS to date requires only a small, known amount of lookahead in its parsing, which allows for more efficient parsing algorithms, so unbounded lookahead is generally considered unacceptable among browser implementations of CSS. -

-
-

2.1. 構文

@@ -943,14 +808,6 @@

2.1. 構文

4. ~CSSOM