[css-conditional-4] Add if/else per WG resolution, fix #112

Author: svgeesus

css-conditional-4/Overview.bs

@@ -11,6 +11,8 @@ 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
+Editor: Elika J. Etemad / fantasai, Invited Expert, 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, conditioned on capabilities of the processor or the
   document the style sheet is being applied to.  It includes and extends the
@@ -21,12 +23,45 @@ Abstract: This module contains the features of CSS for conditional processing of
 Default Highlight: css
 </pre>
 
+<pre class="link-defaults">
+  spec: css-conditional-3
+    type: dfn; text: conditional group rule
+</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.
 
+It adds extensions to the ''@supports'' rule
+to allow testing for supported selectors
+and supported font technologies.
+
+It also adds generalized conditional rules
+and chained conditional rules.
+
+It also adds an ''@if'' rule,
+which generalizes the concept of a conditional rule.
+Anything you can express in an existing conditional rule
+can be expressed in ''@if'',
+it just has to be wrapped 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 <a>conditional rule chains</a>.
+
+It also adds ''@else'' rules,
+which immediately follow conditional rules
+and automatically qualify their conditions as you'd expect,
+such that at <em>most one rule</em> in an <a>conditional rule chain</a> is chosen as active.
+
 Issue: In the future, copy the contents of [[css3-conditional]] into this document.
 
 <h2 id="at-supports-ext">Extensions to the ''@supports'' rule</h2>
@@ -69,6 +104,142 @@ when the text and layout processing engine ingesting
 this CSS text is capable of utilising the specified font-technology
 in layout and rendering.
 
+<h2 id="if-rule">Generalized Conditional Rules: the ''@if'' rule</h2>
+
+The <dfn>@if</dfn> at-rule is a <a>conditional group rule</a>
+that generalizes the individual <a>conditional group rules</a>
+such as ''@media'' and ''@supports''.
+It is defined as:
+
+<pre class=prod>
+@if <<boolean-condition>> {
+	<<stylesheet>>
+}
+</pre>
+
+Where <<boolean-condition>> is a boolean algebra a la [[mediaqueries-4#mq-syntax]],
+but with ''media()'' and ''supports()'' functions as leaves.
+
+Issue: 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.
+
+The ''media()'' and ''supports()'' functions are defined as:
+
+<pre class=prod>
+<dfn>media()</dfn> = media( [ <<mf-plain>> | <<mf-boolean>> | <<mf-range>> ] )
+<dfn>supports()</dfn> = supports( <<declaration>> )
+</pre>
+
+A ''media()'' or ''supports()'' function is associated the boolean result
+that its contained condition is associated with.
+
+<h2 id="else-rule">Chained Conditionals: the ''@else'' rule</h2>
+
+Usually, <a>conditional group rules</a> 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.
+
+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 <em>all</em> exclude some situation
+which is then left unstyled.
+
+The <dfn>@else</dfn> rule is a <a>conditional group rule</a>
+used to form <a>conditional rule chains</a>,
+which allow multiple conditional rules to be provided
+and guarantee that at most one of them will evaluate their condition as true.
+It is defined as:
+
+<pre class=prod>
+@else <<boolean-condition>>? {
+	<<stylesheet>>
+}
+</pre>
+
+''@else'' is interpreted identically to ''@if''.
+If its <<boolean-condition>> is omitted,
+it's treated as having a condition that's always true.
+
+A <dfn export>conditional rule chain</dfn> is a series of consecutive <a>conditional group rules</a>,
+starting with a <a>conditional group rule</a> other than ''@else'',
+followed by zero or more ''@else'' rules.
+There cannot be anything between the successive <a>conditional group rules</a>
+other than whitespace and/or comments;
+any other token "breaks" the chain.
+
+Issue: 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.
+
+Within a <a>conditional rule chain</a>,
+the conditions of each <a>conditional group rule</a> are evaluated in order.
+If one of them is true,
+the conditions of all <em>following</em> <a>conditional group rules</a> in the chain must evaluate to false,
+regardless of what they contain.
+
+An ''@else'' rule that is not part of a <a>conditional rule chain</a> is invalid and must be ignored.
+
+<div class=example>
+	For example, here's a (somewhat silly) conditional chain:
+
+	<pre class="lang-css">
+		@if 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 */
+		}
+	</pre>
+
+	Exactly one of the preceding rules will be chosen,
+	even though the second rule
+	doesn't exclude large widths, fine points, or flexbox support,
+	and the last rule
+	doesn't specify anything at all.
+
+	To achieve the same result without <a>conditional rule chains</a>,
+	you'd need to write:
+
+	<pre class="lang-css">
+		@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 */
+			}
+		}
+	</pre>
+
+	This is simultaneously impossible to read,
+	requires significant duplication of both conditions and contents,
+	and is <em>very</em> difficult to write correctly
+	<!-- (I wrote it wrong <em>twice</em> while producing this example). -->
+	If the conditions got any more complicated
+	(which is not unusual in real-world content),
+	the example would get <em>significantly</em> worse.
+</div>
+
 <h2 class=no-num id="priv">Privacy Considerations</h2>
 
 No Privacy issues have been raised against this document
@@ -79,6 +250,8 @@ No Security issues have been raised against this document
 
 <h2 class=no-num id="acknowledgments">Acknowledgments</h2>
 
+The @if and @else rules are based on a proposal by Tab Atkins.
+
 <h2 id='changes' class='no-num'>
   Changes</h2>
 
@@ -87,6 +260,8 @@ No Security issues have been raised against this document
   </h3>
 
   <ul>
-    <li>Extended supports feature to express font capabilities</li>
+    <li>Added @if and @else per CSSWG resolution</li>
+    <li>Extended @supports feature to express font capabilities</li>
+    <li>Added two co-editors per CSSWG resolution</li>
     <li>Added Privacy and Security sections</li>
   </ul>