css-conditional4-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>CSS Conditional Rules Module Level 4 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">
<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		generate: expand
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|`(.*?)([$@^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){
if(!indicator) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'at': 
	text = `@${key}`;
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'f':
	text = `${key}()`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'issue':
	href = `~CSSissue/${key}`;
	text = `課題 #${key}`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	default:
		console.log(match);
		return match;
	}
}

return text;

	}
}
</script>

<script type="text/plain" id="_source_data">

●●options

spec_title:CSS Conditional Rules Module Level 4
spec_date:2024-03-19
trans_update:2023-02-09
source_checked:220804
original_url:https://drafts.csswg.org/css-conditional-4/
	abbr_url:CSSCOND4
spec_status:ED
ref_id_prefix:biblio-
ref_id_lowercase:true
conformance:css
copyright:2024,permissive
page_state_key:CSS
trans_1st_pub:2023-02-09


●●class_map
p:property
at:at-rule
css:css
v:value
t:type
f:func

●●tag_map
p:code
t:var
P:code
css:code
at:code
v:code
f:code
i:i

●●original_id_map


●●mdn_urls

●●link_map

	●CSS
at.supports:~CSSCOND#at-ruledef-supports

t.supports-feature:#typedef-supports-feature
t.supports-selector-fn:#typedef-supports-selector-fn
t.supports-decl:~CSSCOND#typedef-supports-decl
t.complex-selector:~SELECTORS4#typedef-complex-selector

f.selector:#typedef-supports-selector-fn

	●用語
~CSS選択子を~supportして:#dfn-support-selector

~level 3:#biblio-css-conditional-3

	●用語（CSS
~supports~query:~CSSCOND#supports-queries
条件付き~group規則:~CSSCOND#conditional-group-rule

~col結合子:~SELECTORS4#column-combinator
未知な -webkit- 疑似要素:~SELECTORS4#unknown--webkit--pseudo-elements
選択子:~SELECTORS4#selector
属性~選択子:~SELECTORS4#attribute-selector

~CSS有修飾~名:~CSSNS#css-qualified-name
名前空間 接頭辞:~CSSNS#namespace-prefix

●●words_table1


●●words_table

	●CSS
有修飾:qualified::~
supports:

	●構文

	●条件
真:true::~

	●保安
寛容:forgiving:~
提起-:raise:~
稼働-:run:~
集成-:aggregate:~
	他と集成して:in aggregate

	●仕様

	~level 3:CSS Conditional 3 [css-conditional-3]

	●未分類
table:
部位:portion:~

	各部:parts
	関数-記法による:functional


●●ref_normative

[CSS-CONDITIONAL-3]
    David Baron; Elika Etemad; Chris Lilley. ＜CSS Conditional Rules Module Level 3＞. URL: https://drafts.csswg.org/css-conditional-3/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. URL: https://drafts.csswg.org/css-values-4/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECTORS-4]
    Elika Etemad; Tab Atkins Jr.. ＜Selectors Level 4＞. URL: https://drafts.csswg.org/selectors/

●●ref_informative

[CSS-NAMESPACES-3]
    Elika Etemad. ＜CSS Namespaces Module Level 3＞. URL: https://drafts.csswg.org/css-namespaces/


●●trans_metadata

<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="~SPEC_URL">CSS Conditional Rules Module Level 4</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/css-conditional-4/
公表履歴
	https://www.w3.org/standards/history/css-conditional-4/
実装報告
	https://wpt.fyi/results/css/css-conditional 
テスト一式
	https://wpt.fyi/results/css/css-conditional
	https://wpt.fyi/results/css/css-conditional/
フィードバック
	<a href="https://github.com/w3c/csswg-drafts/labels/css-conditional-4">CSSWG Issues Repository</a>
編集
	<a href="https://dbaron.org/">L. David Baron</a> (Mozilla)
	<a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple)
	<a href="https://svgees.us/">Chris Lilley</a> (W3C)
Suggest an Edit for this Spec
	<a href="https://github.com/w3c/csswg-drafts/blob/main/css-conditional-4/Overview.bs">GitHub Editor</a></dd>
差分仕様
	yes
commit 履歴
	https://github.com/w3c/csswg-drafts/commits/main/css-conditional-4
</script>

</head>

<body>

<header>
	<hgroup>
<h1>CSS 条件付き規則 — CSS Conditional Rules Module Level 4</h1>
	</hgroup>

</header>

<div id="MAIN" hidden>
	<section id="abstract">
◎要約

<p>
この~moduleは、
~stylesheetを成す各部に対する［
処理器の能力／
~stylesheetが適用されている環境
］に基づく~CSS条件付き処理~用の特能を包含する。
それは、
`~level 3$ の機能性を含むとともに，
次を行う能を追加するよう `~level 3$ を拡張する
⇒
`~supports~query$用の新たな `selector$f 記法を通して、
特定0の`選択子$ `SELECTORS-4$r 用の~supportを~queryする
◎
This module contains the features of CSS for conditional processing of parts of style sheets, based on capabilities of the processor or the environment the style sheet is being applied in. It includes and extends the functionality of CSS Conditional 3 [css-conditional-3], adding the ability to query support for particular selectors [SELECTORS-4] through the new selector() notation for supports queries.
</p>

~CSSisaLANG

	</section>
	<section id="sotd">
◎位置付け

<p>
これは、編集者草案の公な複製です…
【以下、この節の他の内容は，~SOTD-CSSに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="introduction">
<h2 title="Introduction">1. 序論</h2>

<p class="issue">
~level 3 における特能は、
依然として， `css-conditional-3$r にて定義される
— まだ，ここには複製されてない。
◎
The features in level 3 are still defined in [css-conditional-3] and have not yet been copied here.
</p>

<p>
この~levelは、
`supports$at 規則に対する拡張を追加する
— それは、
所与の`選択子$が~supportされるか否か~testすることを許容する。
◎
This level adds extensions to the @supports rule to allow testing for supported selectors.
</p>

	</section>
	<section id="at-supports-ext">
<h2 title="Extensions to the @supports rule">2. `supports$at 規則に対する拡張</h2>

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

<pre class="prod">
`supports-feature@t
	= `supports-selector-fn$t
	| `supports-decl$t
`supports-selector-fn@t
	= selector( `complex-selector$t )
</pre>

<dl>
	<dt>`supports-selector-fn$t</dt>
	<dd>
結果は、
次が満たされるならば `真^i になる
⇒
~UAは、
当の関数の引数として供された`~CSS選択子を~supportして$いる。
◎
The result is true if the UA supports the selector provided as an argument to the function.
</dd>
</dl>

<div class="example" id="ex-selector">
<p>
この例は、
`~col結合子$（ `||^css ）は~supportされる`選択子$かどうか~testする
— ~supportされるならば、
それを利用して~table内の特定0の~cellを~styleする。
◎
This example tests whether the column combinator (||) is supported in selectors, and if so uses it to style particular cells in a table.
</p>

<pre class="lang-css">
@supports selector(col || td) {
  col.selected || td {
    background: tan;
  }
}
</pre>
</div>

<p>
`条件付き~group規則$内に利用する`名前空間 接頭辞$は、
宣言-済みでなければナラナイ
— さもなければ、
当の規則は無効になる
`css-conditional-3$r
。
これは、
`selector$f【！selector】 関数の内側にある`名前空間 接頭辞$も含む。
◎
Any namespace prefixes used in a conditional group rule must have been declared, otherwise they are invalid [css-conditional-3]. This includes namespace prefixes inside the selector function.
</p>

<div class="invalid example" id="ex-ns-selector-invalid">
<p>
この例は，
`~CSS有修飾~名$を伴う`属性~選択子$は~supportされるかどうか検査しようと試行するが、
当の`名前空間 接頭辞$は宣言-済みでないので，無効になる。
◎
This example tries to check that attribute selectors with CSS qualified names are supported, but is invalid, because the namespace prefix has not been declared.
</p>

<pre class="lang-css">
@supports selector(a[xlink|href]) {
  // do something, but fail
  }
}
</pre>
</div>

<div class="example" id="ex-ns-selector">

<p>
この例は、
`~CSS有修飾~名$を伴う`属性~選択子$は~supportされるかどうか検査する。
◎
This example checks that attribute selectors with CSS qualified names are supported.
</p>

<pre class="lang-css">
@namespace x url(http://www.w3.org/1999/xlink);
@supports selector(a[x|href]) {
  // do something
  }
}
</pre>
</div>

		<section id="support-definition-ext">
<h3 title="Extensions to the definition of support">2.1. ~supportの定義に対する拡張</h3>

<p>
~CSS処理器は、
~AND↓ が満たされるならば，所与の
`~CSS選択子を~supportして@
いると見なされる：
◎
A CSS processor is considered to support a CSS selector if＼
</p>
<ul>
	<li>
当の`選択子$のすべての側面を再帰的に受容する
（構文を成す何かが［
未知／無効
］かどうかを考慮するのではなく）
◎
it accepts that all aspects of that selector, recursively, (rather than considering any of its syntax to be unknown or invalid) and＼
</li>
	<li>
当の`選択子$は、
`未知な -webkit- 疑似要素$を包含しない
◎
that selector doesn’t contain unknown -webkit- pseudo-elements.
</li>
</ul>

<p class="note">注記：
関数-記法による`選択子$のうち一部は、
寛容に構文解析される
— すなわち、［
未知／無効
］な引数があっても，当の選択子~自体は無効~化されない。
いずれにせよ、
それらは~supportされないが。
◎
Note: Some functional selectors are parsed forgivingly, i.e. if some arguments are unknown/invalid, the selector itself is not invalidated. These are nonetheless unsupported
</p>

		</section>
	</section>
	<section id="security">
<h2 title="Security Considerations">~securityの考慮点</h2>

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

	</section>
	<section id="privacy">
<h2 title="Privacy Considerations">~privacyの考慮点</h2>

<p>
`selector$f 関数は、
利用者の~softwareについての情報を供し得る
— ~versionや［
ある種の特能を［
可能化する／不能化する
］ような，既定でない設定たちを伴って稼働しているかどうか
］など。
◎
The selector() function 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.
</p>

<p>
この情報は、
他の~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.
</p>

<p>
この情報はまた、
他と集成して，利用者の`指紋収集＠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.
</p>

	</section>
	<section id="acknowledgments">
<h2 title="Acknowledgments">謝辞</h2>

<p>
この~moduleの以前の~levelに対する`すべての貢献者たち＠~CSSCOND#acknowledgments$に感謝したい。
◎
The editors would like to thank all of the contributors to the previous level of this module.
</p>

	</section>
	<section id="changes">
<h2 title=" Changes">変更点</h2>

<dl>
	<dt id="changes-from-2022-02-17">
`2022年 2月 17日 勧告候補~snapshot＠https://www.w3.org/TR/2022/CR-css-conditional-4-20220217/$
からの変更点
◎
Changes since the Candidate Recommendation Snapshot of 17 February 2022
</dt>
	<dd>
`選択子$を成す［
未知／無効
］な部位は，当の選択子を無効~化しないが、
いずれにせよ，
選択子は~supportされないものと見なされることを明確化した。
◎
Clarify that unknown or invalid portions of a selector that do not invalidate the selector nonetheless cause the selector to be considered unsupported.
</dd>

	<dt id="changes-from-20200303">
`2020年 3月 3日 最初の公な作業草案＠https://www.w3.org/TR/2020/WD-css-conditional-4-20200303/$
からの変更点
◎
Changes since the First Public Working Draft of 3 March 2020
</dt>
	<dd>
`§ ~privacy＠#privacy$,
`§ ~security＠#security$
を追加した。
◎
Added Privacy and Security sections.
</dd>
	<dd>
いくつか例を追加した
◎
Added some examples
</dd>
	<dd>
`名前空間 接頭辞$を宣言する要件は、
`selector$f の内側にある`選択子$にも適用されることを明確化した。
（ `3220$issue ）
◎
Clarified that the requirement to declare namespace prefixes applies to selectors inside selector() (Issue 3220)
</dd>

	<dt id="changes-from-L3">
`~level 3$ からの追加
◎
Additions since Level 3
</dt>
	<dd>
`~supports~query$に `selector$f 記法を追加した。
◎
Added selector() notation to supports queries.
</dd>
</dl>

	</section>
</main></div>