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 ''selector()'' notation for [=supports queries=]. Default Highlight: css WPT Path Prefix: css/css-conditional/ WPT Display: open

Extensions to the ''@supports'' rule

> syntax as follows:

		<supports-feature> = <> | <>
		<supports-selector-fn> = selector( <> )

: <> :: The result is true if the UA supports the selector provided as an argument to the function. 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

This example tests whether the column combinator (||) is supported in selectors, and if so uses it to style particular cells in a table.

		@supports selector(col || td) {
			col.selected || td {
				background: tan;
			}
		}

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. at-supports-namespace-002.html

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.

		@supports selector(a[xlink|href]) {
			// do something, but fail
			}
		}

This example checks that attribute selectors with [=CSS qualified name=]s are supported.

		@namespace x url(http://www.w3.org/1999/xlink);
		@supports selector(a[x|href]) {
			// do something
			}
		}

Extensions to the definition of support

A CSS processor is considered to support a CSS selector 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 unknown -webkit- pseudo-elements. 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

Security Considerations

No Security issues have been raised against this document

Privacy Considerations

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 fingerprinting of the user.

Acknowledgments

The editors would like to thank all of the contributors to the previous level of this module.

Changes

Changes since the Candidate Recommendation Snapshot of 17 February 2022

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

Changes since the First Public Working Draft of 3 March 2020

Added [[#privacy|Privacy]] and [[#security|Security]] sections.
Added some examples
Clarified that the requirement to declare namespace prefixes applies to selectors inside selector() (Issue 3220)

Additions since Level 3

Added ''selector()'' notation to [=supports queries=].

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

Introduction