<pre class="metadata">
Title: CSS Conditional Rules Module Level 4
Group: csswg
Shortname: css-conditional
Level: 4
Status: ED
!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/2020/WD-css-conditional-4-20200303/
Test Suite: http://test.csswg.org/suites/css-conditional-4_dev/nightly-unstable/
Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
Abstract: This module contains the features of CSS for conditional processing of parts of
  style sheets, conditioned on capabilities of the processor or the
  document the style sheet is being applied to.  It includes and extends the
  functionality of CSS level&nbsp;2 [[!CSS21]], which builds on CSS level&nbsp;1
  [[CSS1]].  The main extensions compared to level&nbsp;2 are allowing nesting of
  certain at-rules inside ''@media'', and the addition of the ''@supports'' rule for
  conditional processing.
Default Highlight: css
</pre>

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

This is currently an early draft of the things that are <em>new</em> in level 4.
The features in level 3 are still defined in [[css3-conditional]]
and have not yet been copied here.

Issue: In the future, copy the contents of [[css3-conditional]] into this document.

<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.

<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 selector (rather than discarding it as a
parse error), and that selector doesn't contain
<a>unknown -webkit- pseudo-elements</a>.

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

