CSS 条件付き規則 — CSS Conditional Rules Module Level 5

1. 序論

この~level 5 は、 現時点では，`新たなもの^emからなる早期~草案である。 以前の~level `css-conditional-3$r, `css-conditional-4$r にて定義される特能は、 まだ，ここには複製されていない。 ◎ This is currently an early draft of the things that are new in level 5. The features in Level 3 and Level 4 are still defined in [css-conditional-3] and [css-conditional-4] and have not yet been copied here.

この~level 5 は： ◎ ↓

• ［ `supports$at 規則, `~supports~query$の構文 ］を拡張する — 次を~testすることを許容するため ⇒＃ ~customな~supports条件, ~supportされる`~at-規則$, ~supportされる~font技術 ◎ CSS Conditional Level 5 extends the @supports rule and supports query syntax to allow testing for custom support conditions as well as supported at-rules and font technologies.
• `when$at 規則を追加する。 それは、 条件付き規則の概念を一般~化する。 既存の条件付き規則において表出できるものは、 `when$at においても，条件の種類を宣言する適切な関数で包装することにより表出できる。 これは、 単独の真偽-式~内に異なる種別の~queryたち — `媒体~query$, `~supports~query$など — を容易に組合せることを作者に許容する。 これが無い下では、 作者は別々な条件付き規則を入子にすることに依拠しなければならず， 読むのも書くのも難しくなり， 各~条件は論理積で~~結合されるものと予め想定され （他を指示する容易な仕方は無い）， 提案された`条件付き規則の連鎖$における有用性も制約される。 ◎ It also adds an @when rule, which generalizes the concept of a conditional rule. Anything that can be expressed in an existing conditional rule can be expressed in @when by wrapping it in an appropriate function to declare what kind of condition it is. This allow authors to easily combine multiple types of queries, such as media queries and supports queries, in a single boolean expression. Without this, authors must rely on nesting separate conditional rules, which is harder to read and write, presupposes the conditions are to be conjoined with the “and” boolean relation (with no easy way to indicate anything else), and restricts their utility in the proposed conditional rule chains.
• `else$at 規則を追加する。 それは、 他の条件付き規則の直後に後続する。 それは、 自身の条件を［ 直前に先行する各~規則の条件が満たされないときに限り `真^i になる ］よう自動的に修飾する — それにより、 `条件付き規則の連鎖$を成す規則のうち最初に合致した【条件が `真^i に評価された】ものに限り適用されるようにする。 ◎ It also adds @else rules, which immediately follow other conditional rules and automatically qualify their conditions as the inverse of the immediately preceding rule’s conditions, such that only the first matching rule in a conditional rule chain is applied.
• `容器~query$を追加する。 それは，概念的には媒体~queryに類似するが、 【媒体としての】文書~全体ではなく， 文書の中の【個々の】要素の側面 （~boxの寸法や算出された~styleなど） を~testすることを許容する。 ◎ It also adds Container Queries. They are conceptually similar to Media Queries, but allow testing aspects of elements within the document (such as box dimensions or computed styles), rather than on the document as a whole.

2. `supports$at 規則に対する拡張

この~levelは、 `supports-feature$t 構文を次に従って拡張する： ◎ This level of the specification extends the <supports-feature> syntax as follows:

`supports-feature@t
	= `supports-selector-fn$t
	| `supports-font-tech-fn$t
	| `supports-font-format-fn$t
	| `supports-at-rule-fn$t
	| `supports-named-feature-fn$t
	| `supports-env-fn$t
	| `supports-decl$t
`supports-decl@t
	= ( [ `declaration$t | `supports-condition-name$t ] )
`supports-font-tech-fn@t
	= font-tech( `font-tech$t )
`supports-font-format-fn@t
	= font-format( `font-format$t )
`supports-at-rule-fn@t
	= at-rule( `at-keyword-token$t )
`supports-named-feature-fn@t
	= named-feature( `ident$t )
`supports-env-fn@t
	= env( `ident$t )

【 `supports-decl$t を成す［ `declaration$t, `supports-condition-name$t ］のうち後者が，この~level 5 による拡張 — 前者については、 ~level 3 に定義される `supports-decl＠~CSSCOND#typedef-supports-decl$t を見よ （したがって、 次の段落は，~level 3 へ移動されるべきであろう）。 】

ここでの `declaration@t は、 `宣言を消費する$ことにより — ただし，その~algoの終端における文脈~検証の検査を無視して — 成功裡に構文解析されるものに合致する。 ◎ <declaration> here matches anything that would be successfully parsed by consume a declaration, ignoring the context-validation check at the end of that algorithm.＼

注記： `declaration$t は、 末尾の `!important^css も（もしあれば）含むことに注意 — それは、 妥当であるが， `supports$at の目的においては無視される。 ◎ Notably, this includes a trailing !important, which is valid but ignored for the purpose of @supports.

`supports-condition-name$t

~UAが当の`有名~条件を~supportする$ならば `真^i に評価される。 当の名前は認識されない場合、 `偽^i に評価される。 ◎ The result is true if the UA supports the named condition. If the name is not recognized, the result is false.

`supports-font-tech-fn$t = font-tech( `font-tech$t ) ◎ font-tech( <font-tech> )

~UAが引数として供された`~font技術を~supportする$ならば `真^i に評価される。 ◎ The result is true if the UA supports the font tech provided as an argument to the function.

`supports-font-format-fn$t = font-format( `font-format$t ) ◎ font-format( <font-format> )

~UAが引数として供された`~font形式を~supportする$ならば `真^i に評価される。 ◎ The result is true if the UA supports the font format provided as an argument to the function.

`supports-at-rule-fn$t = at-rule( `at-keyword-token$t ) ◎ at-rule( <at-keyword-token> )

~UAが引数として供された`~at-規則を~supportする$ならば `真^i に評価される。 ◎ The result is true if the UA supports the at-rule provided as an argument to the function.

`supports-named-feature-fn$t = named-feature( `ident$t ) ◎ named-feature( <ident> )

~UAが引数として供された`有名~特能を~supportする$ならば `真^i に評価される。 ◎ The result is true if the UA supports the named feature provided as an argument to the function.

`supports-env-fn$t = env( `ident$t ) ◎ env( <ident> )

~UAが引数として供された`環境~変数を~supportする$ならば `真^i に評価される。 ◎ The result is true if the UA supports the environment variable provided as an argument to the function.

【 これらはいずれも、 `真^i に評価されない場合には， `偽^i に評価される — `supports$at 規則~用の条件は、 `未知^i には評価され得ないので。 】

3. 一般~化された条件付き規則： `when^at 規則

`when@at ~at-規則は、 個々の`条件付き~group規則$ — `media$at や `supports$at など — を一般~化する`条件付き~group規則$である。 それは、 次で定義される： ◎ The @when at-rule is a conditional group rule that generalizes the individual conditional group rules such as @media and @supports. It is defined as:

@when `boolean-condition$t {
  `rule-list$t
}

`boolean-condition@t は、 `MEDIAQUERIES-5$r `§ 構文＠~MQ5#mq-syntax$ に似た真偽-代数であるが，［ `media$f, `supports$f ］関数を葉として伴う。 ◎ Where <boolean-condition> is a boolean algebra a la Media Queries 4 § 3 Syntax, but with media() and supports() functions as leaves.

“真偽-代数”, “〜を葉として伴う” を汎用な仕方で定義する。 すべての条件付き規則が — 自前の真偽-代数を定義し直す必要なく — それを直に参照できるよう。 【おそらく、 `boolean-expr$t `CSS-VALUES-5^r を参照することになろう。】 ◎ Define "boolean algebra, with X as leaves" in a generic way in Conditional, so all the conditional rules can reference it directly, rather than having to redefine boolean algebra on their own.

`media$f 関数, `supports$f 関数は、 次で定義される： ◎ The media() and supports() functions are defined as:

`media@f
	= media( [ `mf-plain$t | `mf-boolean$t | `mf-range$t ] )
`supports@f
	= supports( `declaration$t )

これらの関数は、 その名前を伴う~at-規則 — `media^f 用には `media$at ／ `supports^f 用には `supports$at — に則って，その引数を評価した結果に評価される。 ◎ A media() or supports() function is associated with the boolean result that its contained condition is associated with.

4. 連鎖された条件付き規則： `else^at 規則

`条件付き~group規則$は、 通例的には，互いに独立である — 各自が有する条件は，他の規則への直な参照を伴うことなく別々に評価され、 もっぱら自身の条件に基づいて，包含している規則を適用するかどうかを裁定する。 ◎ Usually, conditional group rules are independent; each one has a separate condition evaluated without direct reference to any other rule, and decides whether or not to apply its contained rules based solely on its condition.

これは、 単純な条件~用には事足りるが，［ 相互に排他的になることが意味された一連の条件付き ］を書くことは困難である。 作者は、 それらの条件を注意深く細工する必要がある — ［ 他の規則が意味されるときには、作動化しない ］よう，および［ 一連の条件付きが`すべて^emが不用意に除外されて，一部の状況では~styleされなくなる ］ことはないよう。 ◎ This is fine for simple conditions, but makes it difficult to write a collection of conditionals that are meant to be mutually exclusive: authors have to very carefully craft their conditions to not activate when the other rules are meant to, and make sure the collection of conditionals don’t accidentally all exclude some situation which is then left unstyled.

`else@at 規則は、 `条件付き規則の連鎖$を形成するために利用される`条件付き~group規則$である — それは、 複数個の`条件付き~group規則$どうしを結付けて，［ 最初に合致するものに限り，その条件が `真^i として評価されるようになる ］ことを保証する。 それは、 次で定義される： ◎ The @else rule is a conditional group rule used to form conditional rule chains, which associate multiple conditional group rules and guarantee that only the first one that matches will evaluate its condition as true. It is defined as:

@else `boolean-condition$t? {
  `rule-list$t
}

`else$at は、 `when$at と同じに解釈される。 その `boolean-condition$t が省略された場合、［ 常に `真^i に評価される条件 ］が在るものとして扱われる。 ◎ @else is interpreted identically to @when. If its <boolean-condition> is omitted, it’s treated as having a condition that’s always true.

`条件付き規則の連鎖@ とは、［ `else$at 以外の`条件付き~group規則$から開始され， 0 個以上の `else^at 規則が後続する ］ような，連続する一連の`条件付き~group規則$である。 これら各`条件付き~group規則$どうしの合間には、 空白や~comment以外の~tokenは生じ得ない — そのような~tokenは、 当の連鎖を “分断する” 。 ◎ A conditional rule chain is a series of consecutive conditional group rules, starting with a conditional group rule other than @else, followed by zero or more @else rules. There cannot be anything between the successive conditional group rules other than whitespace and/or comments; any other token “breaks” the chain.

条件を省略できるのは，連鎖を成す最後の `else$at に限られるものと要求するべきか？ ~code内の `if^c … `else^c が成す連鎖に対し［ ~debugするために，どれか 1 つに `true^c を設定して連鎖を短絡する ］ことは、 人にもよろうが，共通的にあろう。 ~CSSにおいても，それは類似に有用になりそうだ — 不用意に条件を省略した場合でも、 何か間違ったことは，~~大体は容易に~~判明するであろう。 ◎ Should we require that only the last @else in a chain can have an omitted condition? It’s not uncommon for me, when debugging code, to short-circuit an if-else chain by setting one of them to "true"; I presume that would be similarly useful in CSS? It’s still pretty easy to see you’ve done something wrong if you omit the condition accidentally.

`条件付き規則の連鎖$の中では、 順に，各`条件付き~group規則$を成す条件が評価される。 それらのうち いずれかが `真^i に評価される場合、 `後続して^emいる どの`条件付き~group規則$に対しても，その条件は — 何が言明されようが — `偽^i に評価される。 ◎ Within a conditional rule chain, the conditions of each conditional group rule are evaluated in order. If one of them is true, the conditions of all following conditional group rules in the chain evaluate to false, regardless of their stated condition.

`条件付き規則の連鎖$の一部を成していない `else$at 規則は、 無効であり，無視するモノトスル。 ◎ An @else rule that is not part of a conditional rule chain is invalid and must be ignored.

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

@media (width >= 400px) and (pointer: fine) {
  @supports (display: flex) {
  /* A */
  }
  @supports not (display: flex) {
  @supports (caret-color: pink) and (background: double-rainbow()) {
    /* B */
  }
  @supports not ((caret-color: pink) and (background: double-rainbow())) {
    /* C */
  }
  }
}
@media not ((width >= 400px) and (pointer: fine)) {
  @supports (caret-color: pink) and (background: double-rainbow()) {
  /* B */
  }
  @supports not ((caret-color: pink) and (background: double-rainbow())) {
  /* C */
  }
}

@when font-tech(color-COLRv1) and font-tech(variations) {
  @font-face { font-family: icons; src: url(/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Ficons-gradient-var.woff2); }
}
@else font-tech(color-SVG) {
  @font-face { font-family: icons; src: url(/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Ficons-gradient.woff2); }
}
@else font-tech(color-COLRv0) {
  @font-face { font-family: icons; src: url(/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Ficons-flat.woff2); }
}
@else {
  @font-face { font-family: icons; src: url(/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Ficons-fallback.woff2); }
}

@font-face { font-family: icons; src: url(/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Ficons-fallback.woff2);
@supports font-tech(color-COLRv1) {
  @font-face { font-family: icons; src: url(/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Ficons-gradient-var.woff2); }
}

5. 容器~query

`媒体~query$は， 当の文書を表示している~UAや機器~環境を成す ある種の側面（表示域~寸法や利用者~選好など）を~queryするための~methodを供するが、 `容器~query$は， 当の文書の中で要素を成す ある種の側面（~box寸法や算出された~styleなど）を~testすることを許容する。 ◎ While media queries provide a method to query aspects of the user agent or device environment that a document is being displayed in (such as viewport dimensions or user preferences), container queries allow testing aspects of elements within the document (such as box dimensions or computed styles).

`容器~style~query$の目的においては、 すべての要素は，既定では `~query容器@ （ `query container^en ）になる。 さらには、［ `container-type$p ~prop（または `container$p `略式~prop$）を利用して， 追加的な~query種別を指定する ］ことにより，要素は［ `容器~size~query$／ `容器~scroll状態~query$ ］用の`~query容器$も確立し得る。 `~query容器$の`平坦~tree$における子孫に適用される~style規則は、［ 当の容器に対し， `container$at `条件付き~group規則$を利用して~queryする ］ことにより，条件付けられ得る。 ◎ By default, all elements are query containers for the purpose of container style queries, and can be established as query containers for container size queries and container scroll-state queries by specifying the additional query types using the container-type property (or the container shorthand). Style rules applying to a query container’s flat tree descendants can be conditioned by querying against it, using the @container conditional group rule.

~queryしている要素 %要素 の先祖~要素のうち~boxを生成するものは、 %要素 により生成される~boxの先祖~boxでない場合には、 `容器~size~query$用として適格な`~query容器$にはならない。 ◎ An ancestor element that generates a box is not an eligible container for container size queries if that box is not an ancestor box of any boxes generated by the querying element.

main, aside {
  container: my-layout / inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container my-layout (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

<style>
  #container {
    width: 100px;
    container-type: inline-size;
  }
  @container (inline-size < 150px) {
    #inner::before {
      content: "BEFORE";
    }
  }
</style>
<div id=container>
  <span id=inner></span>
</div>

<div id=host style="width:200px">
  <template `shadowrootmode＠~HEscripting#attr-template-shadowrootmode$【！shadowroot】=open>
    <style>
      #container {
        width: 100px;
        container-type: inline-size;
      }
      @container (inline-size < 150px) {
        ::slotted(span) {
          color: green;
        }
      }
    </style>
    <div id=container>
      <slot></slot>【！<slot />】
    </div>
  </template>
  <span id=slotted>Green</span>
</div>

aside, main {
  container-type: inline-size;
}

h2 { font-size: 1.2em; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

@container style(--cards: small) {
  article {
    border: thin solid silver;
    border-radius: 0.5em;
    padding: 1em;
  }
}

#sticky {
  container-type: scroll-state;
  position: sticky;
}
@container scroll-state(stuck: top) {
  #sticky-child {
    background-color: lime;
  }
}

main {
  container-type: size;
  container-name: my-page-layout;
}

.my-component {
  container-type: inline-size;
  container-name: my-component-library;
}

@container my-page-layout (block-size > 12em) {
  .card { margin-block: 2em; }
}

@container my-component-library (inline-size > 30em) {
  .card { margin-inline: 2em; }
}

@container my-page-layout {
  .card { padding: 1em; }
}

main {
  container: my-layout / size;
}

.grid-item {
  container: my-component / inline-size;
}

@container `container-condition$t# {
  `rule-list$t
}

`container-condition@t
	= [ `container-name$t? `container-query$t? ]!
`container-name@t
	= `custom-ident$t
`container-query@t
	= not `query-in-parens$t
	| `query-in-parens$t
		[ [ and `query-in-parens$t ]*
		| [ or `query-in-parens$t ]* ]
`query-in-parens@t
	= ( `container-query$t )
	| ( `size-feature$t )
	| style( `style-query$t )
	| scroll-state( `scroll-state-query$t )
	| `general-enclosed$t

`style-query@t
	= not `style-in-parens$t
	| `style-in-parens$t
		[ [ and `style-in-parens$t ]*
		| [ or `style-in-parens$t ]* ]
	| `style-feature$t
`style-in-parens@t
	= ( `style-query$t )
	| ( `style-feature$t )
	| `general-enclosed$t
`style-feature@t
	= `style-feature-plain$t
	| `style-feature-boolean$t
	| `style-range$t
`style-feature-plain@t
	= `style-feature-name$t : `style-feature-value$t
`style-feature-boolean@t
	= `style-feature-name$t
`style-range@t
	= `style-range-value$t `mf-comparison$t `style-range-value$t
	| `style-range-value$t `mf-lt$t `style-range-value$t `mf-lt$t `style-range-value$t
	| `style-range-value$t `mf-gt$t `style-range-value$t `mf-gt$t `style-range-value$t
`style-range-value@t
	= `custom-property-name$t
	| `style-feature-value$t

`scroll-state-query@t
	= not `scroll-state-in-parens$t
	| `scroll-state-in-parens$t
		[ [ and `scroll-state-in-parens$t ]*
		| [ or `scroll-state-in-parens$t ]* ]
	| `scroll-state-feature$t
`scroll-state-in-parens@t
	= ( `scroll-state-query$t )
	| ( `scroll-state-feature$t )
	| `general-enclosed$t

@container card (inline-size > 30em) and style(--responsive: true) {
  /* 
~style群
◎
styles
 */
}

@container card (inline-size > 30em), style(--large: true) {
  /* styles */
}

@container card (inline-size > 30em), style(--responsive: true) {
    /* 
~style群
◎
styles
 */
}

@container card (inline-size > 30em) {
  @container style(--responsive: true) {
    /* 
~style群
◎
styles
 */
  }
}

<main>
  <div id=container>
    <div id=inner>Inner</div>
  </div>
  <div id=sibling>Sibling</div>
</main>

main {
  display: flex;
  width: 300px;
}

#container {
  container-type: inline-size;
  flex: 1;
}

/* 
`width^p の解決d値は初期~時は 200px になるが、
`#sibling^css に対する遷移が進捗するに伴い変化する。
◎
Resolved width is initially 200px, but changes as the transition on #sibling progresses.
 */
#inner {
  transition: 1s background-color;
  background-color: tomato;
}

/* 
この容器~queryの評価が変化したときは、
`#inner^css の `background-color^p に対する遷移を開始させる【！must】。
◎
When this container query starts (or stops) applying, a transition must start on background-color on #inner.
 */
@container (width <= 150px) {
  #inner {
    background-color: skyblue;
  }
}

#sibling {
  width: 100px;
  transition: width 1s;
}

#sibling:hover {
  width: 200px;
}

6. 容器~特能

`容器~特能@ （ `container feature^en ）は、 `~query容器$を成す特有な側面を~queryする。 ◎ A container feature queries a specific aspect of a query container.

`容器~特能$は、 `真偽-文脈$において評価するときは，`媒体~特能$と同じ規則を利用する。 ◎ Container features use the same rules as media features when evaluating in a boolean context.

aside, main {
  container-type: inline-size;
}

aside { font-size: 16px; }
main { font-size: 24px; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

aside, main {
  container-type: inline-size;
}

aside { --query: 300px; }
main { --query: 500px; }

@container (width > var(--query)) {
  h2 { font-size: 1.5em; }
}

@container scroll-state((stuck: top) and (stuck: left)) { ... }

@container scroll-state((stuck: left) and (stuck: right)) { ... }

7. 容器に相対的な長さ単位： `cqw^u, `cqh^u, `cqi^u, `cqb^u, `cqmin^u, `cqmax^u

`容器~query長さ単位@ （ `container query length unit^en ）は、 `~query容器$の寸法に相対的な長さを指定する。 ~stylesheetにて`容器~query長さ単位$を利用すれば、 ~componentを ある`~query容器$から別のそれへ移動するのも容易になる。 ◎ Container query length units specify a length relative to the dimensions of a query container. Style sheets that use container query length units can more easily move components from one query container to another.

`容器~query長さ単位$は： ◎ The container query length units are:

各~要素に対し， `容器~query長さ単位$は、 当の単位に関連な軸（たち）に対し，`容器~size~query$と同じ規則を利用して評価される。 各~軸に対し、 `~query容器$は， 当の軸において当の`容器~size~query$を受容する先祖~容器のうち最も近いものになる。 適格な`~query容器$として可用なものは無い場合、 当の軸~用には`小さい表示域~size$を利用する。 ◎ For each element, container query length units are evaluated using the same rules as container size queries on the relevant axis (or axes) described by the unit. The query container for each axis is the nearest ancestor container that accepts container size queries on that axis. If no eligible query container is available, then use the small viewport size for that axis.

注記： 事例によっては、 同じ要素~上の［ `cqi^u 単位, `cqb^u 単位 ］は，異なる関係にある`~query容器$に対し評価されることになる。 類似に，［ `cqmin^u 単位／ `cqmax^u 単位 ］は、［ `cqi^u, `cqb^u ］単位が異なる`~query容器$から来ているときでも，それらの寸法のうち［ 小さい方／大きい方 ］を表現する。 ◎ Note: In some cases cqi and cqb units on the same element will evaluate in relation to different query containers. Similarly, cqmin and cqmax units represent the larger or smaller of the cqi and cqb units, even when those dimensions come from different query containers.

子~要素が継承する値は、 その親に指定されたとおりの相対的な値ではなく，`算出d値$である。 ◎ Child elements do not inherit the relative values as specified for their parent; they inherit the computed values.

/* 
~fallback値は、
封込めには依拠しない
◎
The fallback value does not rely on containment
 */
h2 { font-size: 1.2em; }

@container (inline-size >= 0px) {
  /* 
`inline-size$d 容器が可用なときに限り適用する
◎
only applies when an inline-size container is available
 */
  h2 { font-size: calc(1.2em + 1cqi); }
}

8. ~customな~supports~queryの定義-法： `supports-condition^at 規則

`supports-condition@at `~at-規則$は、 `条件付き~group規則$であり，ある `有名~supports条件@ を作成する — それは、［ 後で再利用するために`~supports~query$を定義して命名する ］ことを作者に許容する。 これは、［ 複階的な／頻繁に ］利用される特能~queryを名前により参照して，保守-能と可読性を改善することを可能化する。 ◎ The @supports-condition at-rule is a conditional group rule that allows authors to define and name a supports query for later reuse, creating a named supports condition. This enables complex or frequently-used feature queries to be referenced by name, improving maintainability and readability.

@supports-condition `supports-condition-name$t {
  `block-contents$t
}

`supports-condition-name@t は、 当の`~supports~query$の名前を定義する `extension-name$t 【すなわち， `custom-ident$t 】である。 ◎ Where <supports-condition-name> is an <extension-name> that defines the name of the supports query.

~blockの内側にあるすべては、［ ~UAが利用された特能を~supportするかどうか ］を~testするために評価される~FN。 その内容には、 当の文書の具現化に対する効果は無い。 ◎ Anything inside the block is evaluated to test whether the user agent supports the features used. The contents do not have any effect on the document’s rendering.

【 ~blockを成す~testたちは、 以下の例に示されるとおり，論理積で~~結合される。 】

有名~supports条件を定義したなら，後続な［ `supports$at ／ `when$at ］条件~内で利用できる。 ◎ Once defined, the named supports condition can be used in subsequent @supports or @when conditions.

同じ名前を伴う複数個の `supports-condition$at 規則が定義されている場合、 文書~順序で最後のものが優先され，他のものは無視される。 ◎ If multiple @supports-condition rules are defined with the same name, the last one in document order wins, and all preceding ones are ignored.

@supports-condition --thicker-underlines {
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
}

/* 
`~supports~query$ `(--thicker-underlines)^css は、
`(text-decoration-thickness: 0.2em) and (text-underline-offset: 0.3em)^css
と等価になる：
◎
Equivalent to (text-decoration-thickness: 0.2em) and (text-underline-offset: 0.3em)
 */
@supports (--thicker-underlines) {
  a {
    text-decoration: underline;
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.3em;
  }
}

`supports-condition$at 規則は、［ `import$at, `namespace$at ］規則より前 （かつ `charset$at 規則が在る場合は，それより後） に許容される。 ◎ @supports-condition rules are allowed before @import and @namespace rules (after the @charset rule, if any).

@supports-condition --nesting {
  & { }
}

@import url("/sitelet?url=https%3A%2F%2Ftriple-underscore.github.io%2Fnested-styles.css") supports(--nesting);

@supports-condition --stuck-container-feature {
  @container scroll-state(stuck: top) { }
}

@supports (--stuck-container-feature) {
  div { border-color: navy; }
}

この~at-規則の名前は、 論の最中にある。 代替として［ `supports-query^at, `supports-test^at, `custom-supports^at ］も挙がっている。 この名前は、 `~custom媒体~query$用に選ばれるもの~FN と一貫するべきである。 ◎ The name of the at-rule is under discussion. Alternatives include @supports-query, @supports-test, and @custom-supports. The name should be consistent with the one chosen for custom media queries.

【~FN すなわち， `custom-media^at — したがって， `custom-supports^at に改称される可能性が高いように思われる。 】

9. ~API

dictionary `CSSContainerCondition@I {
  required `CSSOMString$ `name@mb;
  required `CSSOMString$ `query@mb;
};

[`Exposed$=Window]
interface `CSSContainerRule@I : `CSSConditionRule$I {
  readonly attribute `CSSOMString$ `containerName$m;
  readonly attribute `CSSOMString$ `containerQuery$m;
  readonly attribute `FrozenArray$<`CSSContainerCondition$I> `conditions$m;
};

[`Exposed$=Window]
interface `CSSSupportsConditionRule@I : `CSSGroupingRule$I {
  readonly attribute `CSSOMString$ `name$m;
};

~securityの考慮点

この文書に対し提起された~securityの課題は無い。 ◎ No security issues have been raised against this document

~privacyの考慮点

［ `font-tech$f, `font-format$f ］関数は、 利用者の~softwareについての情報を供し得る — その~versionや［ ある種の特能を可能化するか不能化する既定でない設定の下で稼働しているかどうか ］など。 この情報は： ◎ The font-tech() and font-format() functions may provide information about the user’s software such as its version and whether it is running with non-default settings that enable or disable certain features.

• 他の~APIを通しても決定され得る。 しかしながら、 この仕様における特能は，この情報が~Web上に公開される仕方の一つを成す。 ◎ This information can also be determined through other APIs. However, the features in this specification are one of the ways this information is exposed on the Web.
• 集成した上で利用者の`指紋収集＠https://www.w3.org/2001/tag/doc/unsanctioned-tracking/$の正確度を改善するためにも利用され得る。 ◎ This information can also, in aggregate, be used to improve the accuracy of fingerprinting of the user.

変更点

`2024 年 11月 5日 作業草案＠~TR/2024/WD-css-conditional-5-20241105/$ からの変更点 ◎ Changes since the Working Draft of 5 November 2024

`~supports~query$を拡張した — `環境~変数$の能力を `env$f を介して表出するよう。 （ `3576$issue ） ◎ Extended supports queries to express environment variable capabilities via env(). (#3576)

文書~順序で最後の `supports-condition$at が優先されることを明確化した。 （ `12973$issue ） ◎ Clarified that the last @supports-condition in document order wins (#12973)

`~supports~query$を拡張した — `~at-規則$の能力を `at-rule$f を介して表出するよう。 （ `2463$issue, `6966$issue, `11116$issue, `11117$issue ） ◎ Extended supports queries to express at-rule capabilities via at-rule(). (#2463, #6966, #11116, #11117)

`supports-condition$at ~at-規則と それに関係する `CSSSupportsConditionRule$I ~interfaceを追加した。 （ `12622$issue ） ◎ Added @supports-condition at-rule and related CSSSupportsConditionRule interface. (#12622)

`~query容器~名$【！container-names】は`~tree視野な名前$ではないことを明確化した。 （ `12090$issue ） ◎ Clarified that container-names are not tree-scoped (#12090)

`scroll-state^f ~query用に方向~特能を定義した。 （ `6400$issue ） ◎ Defined direction feature for scroll-state() queries (#6400)

`0^v と `0px^v は、 条件においては 【`~style範囲を評価する$ときには】 等価になることを明確化した。 （ `12236$issue ） ◎ Clarified that 0 and 0px are equivalent in conditions (#12236)

~style容器~query用に範囲~構文を定義した。 （ `8376$issue ） ◎ Defined a range syntax for style container queries (#8376)

~tree計数~関数を明示的に許容するようにした。 （ `10982$issue ） ◎ Explicitly allow tree-counting functions (#10982)

寸法に関する~query容器には、 もはや`~layout封込め$を適用しない【代わりに，`独立な整形~文脈$を確立する】ようにした。 （ `pull #10544＠https://github.com/w3c/csswg-drafts/pull/10544$ ） ◎ Dimensional query containers no longer apply layout containment (#10544)

`snapped$d ~query用に `both$vd 値を追加した。 （ `11181$issue ） ◎ Added "both" value for snapped query (#11181)

`overflowing^d 【今や `scrollable$d 】用に軸~keywordたちを追加した。 （ `11183$issue ） ◎ Added axis keywords for overflowing (#11183)

`overflowing^d を `scrollable$d に改称した。 （ `11182$issue ） ◎ Renamed overflowing to scrollable (#11182)

`container-query$t を省略可能にした。 （ `9192$issue ） ◎ Made <container-query> optional (#9192)

`~supports~query$を拡張した — 有名~特能を `named-feature$f を介して表出するよう。 （ `9875$issue ） ◎ Extended supports queries to express named features via named-feature(). (#9875)

`2024 年 7月 23日 作業草案＠~TR/2021/WD-css-conditional-5-20240723/$ からの変更点 ◎ Changes since the Working Draft of 23 July 2024

［ `stuck$d, `snapped$d, `scrollable$d ］特能~用の値として【！scroll-state() features】~keyword `none^v を追加した。 （ `pull #10874＠https://github.com/w3c/csswg-drafts/pull/10874$ ） ◎ Added none-keywords to scroll-state() features (#10874)

`container-type$p 用の値として `scroll-state$v を追加した。 ［ `stuck$d, `snapped$d, `scrollable$d ］特能~用の~queryとして `scroll-state^f を追加した。 （ `6402$issue, `10784$issue, `10796$issue ） ◎ Added container-type:scroll-state, and scroll-state() queries for stuck, snapped, and scrollable features (#6402, #10784, #10796)

例を正した （~~存在しない `container-type:style^p を利用していた）。 ◎ Corrected example (there is no container-type:style)

`容器~query$は`平坦~tree$を利用するものと指定した。 （ `5984＠~CSSissue/5984#issuecomment-2112977366$issue ） ◎ Specified that container queries use the flat tree (#5984)

`2021 年 12月 21日 最初の公な作業草案＠~TR/2021/WD-css-conditional-5-20211221/$ からの変更点 ◎ Changes since the First Public Working Draft of 21 December 2021

`容器~query$を `CSS-CONTAIN-3$r からこの仕様へ移動した。 （ `10433$issue ） ◎ Moved container queries to this specification, from CSS Contain 3 (#10433)

重複していた［ `font-format$t, `font-tech$t ］の定義を除去して， `CSS-FONTS-4$r から取込むようにした。 （ `8110$issue ） ◎ Imported the definitions of <font-format> and <font-tech> from CSS Fonts 4, rather than duplicating them in this specification (#8110)

［ 構文解析~algo, ~block生成規則 ］に新たな名前を利用するよう更新した。 ◎ Updated to use the new parsing algorithm names and block production names

`font-format^t の文法~内の誤記を正した。 ◎ Corrected a typo in the grammar of <font-format>

［ `font-tech^t, `font-format^t ］生成規則~内の余分な~spaceを正した。 （ `7369$issue ） ◎ Corrected extra spaces in the font-tech and font-format productions (#7369 )

~level 4 からの追加 ◎ Additions since Level 4

［ `when$at, `else$at ］を追加した。 ◎ Added @when and @else.

`~supports~query$を拡張した — ~font能力を［ `font-tech$f, `font-format$f ］を介して表出するよう。 ◎ Extended supports queries to express font capabilities via font-tech() and font-format().

`~supports~query$を拡張した — `~at-規則$の能力を `at-rule$f を介して表出するよう。 ◎ Extended supports queries to express at-rule capabilities via at-rule().

`~supports~query$を拡張した — 有名~特能を `named-feature$f を介して表出するよう。 ◎ Extended supports queries to express named features via named-feature().

`容器~query$を `CSS-CONTAIN-3$r からこの仕様へ移動した。 （この特能の発展に関するさらなる情報は `CSS-CONTAIN-3$r の `§ 変更点＠~CSSWG/css-contain-3/#changes$も見よ。） ◎ Moved Container Queries from [CSS-CONTAIN-3] to this specification. (See also the CSS Containment 3 § A Changes for more information on the evolution of this feature.)

`supports-condition$at ~at-規則と それに関係する `CSSSupportsConditionRule$I ~interfaceを追加した。 ◎ Added @supports-condition at-rule and related CSSSupportsConditionRule interface.

謝辞

［ `when$at, `else$at ］規則は、 `Tab Atkins^en 氏による提案に基づく。 ◎ The @when and @else rules are based on a proposal by Tab Atkins.

次に挙げる方々からの~commentや これまでの作業に， および，この仕様に貢献された他の多くの方々に。 ◎