Overview.bs

<pre class="metadata">
Title: CSS Conditional Rules Module Level 4
Group: csswg
Shortname: css-conditional
Level: 4
Status: ED
Prepare for TR: no
!Delta Spec: yes
Work Status: Exploring
ED: https://drafts.csswg.org/css-conditional-4/
TR: https://www.w3.org/TR/css-conditional-4/
Previous Version: https://www.w3.org/TR/2022/CR-css-conditional-4-20220217/
Test Suite: https://wpt.fyi/results/css/css-conditional
Implementation Report: https://wpt.fyi/results/css/css-conditional
Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
Abstract: 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 
	<a href="#typedef-supports-selector-fn">''selector()''</a> notation for [=supports queries=].
Default Highlight: css
WPT Path Prefix: css/css-conditional/
WPT Display: open
</pre>

<pre class="link-defaults">
	spec: css-conditional-3
		type: dfn; text: conditional group rule
	spec:css-namespaces-3;
		type:dfn; text:namespace prefix
	spec:css-namespaces-3;
		type:dfn; text:CSS qualified name
</pre>

<h2 id="introduction">Introduction</h2>

	ISSUE: The features in level 3 are still defined in [[css-conditional-3]]
	and have not yet been copied here.

	This level adds extensions to the ''@supports'' rule
	to allow testing for supported selectors.

<h2 id="at-supports-ext">
Extensions to the ''@supports'' rule</h2>

	This level of the specification extends the <<supports-feature>> syntax as follows:

	<pre class="prod def" nohighlight>
		<dfn>&lt;supports-feature></dfn> = <<supports-selector-fn>> | <<supports-decl>>
		<dfn>&lt;supports-selector-fn></dfn> = selector( <<complex-selector>> )
	</pre>

	: <<supports-selector-fn>>
	::
		The result is true if the UA
		<a href="#dfn-support-selector">supports the selector</a>
		provided as an argument to the function.

<wpt>
	at-supports-selector-001.html
	at-supports-selector-002.html
	at-supports-selector-003.html
	at-supports-selector-004.html
	at-supports-selector-detecting-invalid-in-logical-combinations.html
	at-supports-selector-file-selector-button.html
	at-supports-selector-placeholder.html
	js/CSS-supports-L4.html
	js/CSS-supports-selector-detecting-invalid-in-logical-combinations.html
</wpt>

<div class="example" id="ex-selector">
	This example tests whether the
	<a>column combinator</a>  (||)
	is supported in selectors,
	and if so uses it to style particular cells in a table.

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

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.

<wpt>
	at-supports-namespace-002.html
</wpt>

<div class="invalid example" id="ex-ns-selector-invalid">
	This example tries to check that attribute selectors
	with [=CSS qualified name=]s are supported,
	but is invalid,
	because the namespace prefix has not been declared.

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

<div class="example" id="ex-ns-selector">
	This example checks that attribute selectors
	with [=CSS qualified name=]s are supported.

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

<h3 id="support-definition-ext">
Extensions to the definition of support</h3>

	A CSS processor is considered to
	<dfn export for=CSS id="dfn-support-selector">support a CSS selector</dfn>
	if it accepts that all aspects of that selector, recursively,
	(rather than considering any of its syntax to be unknown or invalid)
	and that selector doesn't contain
	<a>unknown -webkit- pseudo-elements</a>.

	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

<h2 class=no-num id="security">Security Considerations</h2>

	No Security issues have been raised against this document

<h2 class=no-num id="privacy">Privacy Considerations</h2>

	<!-- COPY FROM L3 when importing the rest of the spec -->

	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.

	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.

	This information can also, in aggregate, be used to improve the accuracy of
	<a href="https://www.w3.org/2001/tag/doc/unsanctioned-tracking/">fingerprinting</a> of the user.

<h2 class=no-num id="acknowledgments">Acknowledgments</h2>

	<!-- Firstly, the -->The editors would like to thank
	all of the contributors to the <a href="https://www.w3.org/TR/css-conditional-3/#acknowledgments">previous level</a>
	of this module.

	<!-- Secondly, we would like to acknowledge -->

<h2 id='changes' class='no-num'>
Changes</h2>

<h3 id="changes-from-2022-02-17" class="no-num">
Changes since the <a href="https://www.w3.org/TR/2022/CR-css-conditional-4-20220217/">Candidate Recommendation Snapshot of 17 February 2022</a></h3>

	<ul>
		<li>Clarify that unknown or invalid portions of a selector that do not invalidate the selector
			nonetheless cause the selector to be considered unsupported.
	</ul>

<h3 id="changes-from-20200303" class="no-num">
Changes since the <a href="https://www.w3.org/TR/2020/WD-css-conditional-4-20200303/">First Public Working Draft of 3 March 2020</a></h3>

	<ul>
		<li>Added [[#privacy|Privacy]] and [[#security|Security]] sections.
		<li>Added some examples</li>
		<li>Clarified that the requirement to declare namespace prefixes
			applies to selectors inside selector() (<a href="https://github.com/w3c/csswg-drafts/issues/3220">Issue 3220</a>)</li>
	</ul>

<h3 id="changes-from-L3" class="no-num">
Additions since Level 3</h3>

	<ul>
		<li>Added ''selector()'' notation to [=supports queries=].
	</ul>



<wpt hidden title="CSS Conditional 3 tests">
	at-media-001.html
	at-media-002.html
	at-media-003.html
	at-media-content-001.html
	at-media-content-002.html
	at-media-content-003.html
	at-media-content-004.html
	at-media-dynamic-001.html
	at-supports-045.html
	at-supports-content-001.html
	at-supports-content-002.html
	at-supports-content-003.html
	at-supports-content-004.html
	at-supports-namespace-001.html
	js/CSS-supports-L3.html
</wpt>

<wpt hidden title="CSS Conditional 5 tests">
	at-supports-font-format-001.html
	at-supports-font-tech-001.html
</wpt>

<wpt hidden title="Untagged, probably conditional 3, needs triage">
	at-media-whitespace-optional-001.html
	at-media-whitespace-optional-002.html
	at-supports-001.html
	at-supports-002.html
	at-supports-003.html
	at-supports-004.html
	at-supports-005.html
	at-supports-006.html
	at-supports-007.html
	at-supports-008.html
	at-supports-009.html
	at-supports-010.html
	at-supports-011.html
	at-supports-012.html
	at-supports-013.html
	at-supports-014.html
	at-supports-015.html
	at-supports-016.html
	at-supports-017.html
	at-supports-018.html
	at-supports-019.html
	at-supports-020.html
	at-supports-021.html
	at-supports-022.html
	at-supports-023.html
	at-supports-024.html
	at-supports-025.html
	at-supports-026.html
	at-supports-027.html
	at-supports-028.html
	at-supports-029.html
	at-supports-030.html
	at-supports-031.html
	at-supports-032.html
	at-supports-033.html
	at-supports-034.html
	at-supports-035.html
	at-supports-036.html
	at-supports-037.html
	at-supports-038.html
	at-supports-039.html
	at-supports-043.html
	at-supports-044.html
	at-supports-046.html
	at-supports-048.html
	css-supports-001.xht
	css-supports-002.xht
	css-supports-003.xht
	css-supports-004.xht
	css-supports-005.xht
	css-supports-006.xht
	css-supports-007.xht
	css-supports-008.xht
	css-supports-009.xht
	css-supports-010.xht
	css-supports-011.xht
	css-supports-012.xht
	css-supports-013.xht
	css-supports-014.xht
	css-supports-015.xht
	css-supports-016.xht
	css-supports-017.xht
	css-supports-018.xht
	css-supports-019.xht
	css-supports-020.xht
	css-supports-021.xht
	css-supports-022.xht
	css-supports-023.xht
	css-supports-024.xht
	css-supports-025.xht
	css-supports-026.xht
	css-supports-029.xht
	css-supports-030.xht
	css-supports-031.xht
	css-supports-032.xht
	css-supports-033.xht
	css-supports-034.xht
	css-supports-035.xht
	css-supports-036.xht
	css-supports-037.xht
	css-supports-038.xht
	css-supports-039.xht
	css-supports-040.xht
	css-supports-041.xht
	css-supports-042.xht
	css-supports-043.xht
	css-supports-044.xht
	css-supports-045.xht
	css-supports-046.xht
	at-supports-whitespace.html
	idlharness.html
	js/001.html
	js/CSS-supports-CSSStyleDeclaration.html
	js/CSS-supports-L3.html
	js/CSS-supports-L5.html
	js/conditional-CSSGroupingRule.html
	js/supports-conditionText.html
</wpt>