[css-cascade] Add supports queries to @import.

Author: tabatkins

css-cascade/Overview.bs

@@ -14,7 +14,7 @@ Previous Version: http://www.w3.org/TR/2013/WD-css3-cascade-20130103/
 Previous Version: http://www.w3.org/TR/2005/WD-css3-cascade-20051215/
 Issue Tracking: Disposition of Comments http://dev.w3.org/csswg/css-cascade/issues
 Abstract: This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.
-Ignored Terms: auto, flex items
+Ignored Terms: auto, flex items, <supports-condition>
 Link Defaults: css21 (property) display
 </pre>
 
@@ -40,15 +40,31 @@ Introduction</h2>
 Importing Style Sheets: the ''@import'' rule</h2>
 
 	The <dfn>@import</dfn> rule allows users to import style rules from other style sheets.
+	If an ''@import'' rule refers to a valid stylesheet,
+	user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule.
+
+	<p class='example'>
+		For example, declarations in style rules from imported stylesheets interact with the cascade
+		as if they were written literally into the stylesheet at the point of the ''@import''.
+		Similarly, style rules in a stylesheet imported into a scoped stylesheet
+		are scoped in the same way.
+
 	Any ''@import'' rules must precede all other at-rules and style rules in a style sheet
 	(besides ''@charset'', which must be the first thing in the style sheet if it exists),
 	or else the ''@import'' rule is invalid.
 	The syntax of ''@import'' is:
 
-	<pre class='prod'>@import [ <<url>> | <<string>> ] <<media-query-list>>? ;</pre>
+	<pre class='prod'>@import [ <<url>> | <<string>> ] [ supports( <<supports-condition>> ) ]? <<media-query-list>>? ;</pre>
+
+	Where the <<url>> or <<string>> gives the URL of the style sheet to be imported,
+	and the optional <<supports-condition>> and <<media-query-list>>
+	(collectively, the <dfn>import conditions</dfn>)
+	state the conditions under which it applies.
+
+	Issue: Syntax for incorporating <<supports-condition>> is currently under discussion; suggestions and feedback welcome!
 
 	If a <<string>> is provided,
-	it must be interpreted as a url with the same value.
+	it must be interpreted as a <<url>> with the same value.
 
 	<div class="example">
 		The following lines are equivalent in meaning
@@ -61,50 +77,57 @@ Importing Style Sheets: the ''@import'' rule</h2>
 		</pre>
 	</div>
 
-	If an ''@import'' rule refers to a valid stylesheet,
-	user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule.
-
-	<p class='example'>
-		For example, declarations in style rules from imported stylesheets interact with the cascade
-		as if they were written literally into the stylesheet at the point of the ''@import''.
-		Similarly, style rules in a stylesheet imported into a scoped stylesheet
-		are scoped in the same way.
-
-	An ''@import'' rule can be media-dependent:
-	such media-dependent imports include a comma-separated list of “media queries” after the URI,
-	which specify to which media the imported style sheet applies.
-	In the absence of any media query, the import is unconditional.
-	(Specifying ''@media/all'' for the medium has the same effect.)
+	The <a>import conditions</a> allow the import to be media&ndash; or feature-support&ndash;dependent.
+	In the absence of any <a>import conditions</a>, the import is unconditional.
+	(Specifying ''@media/all'' for the <<media-query-list>> has the same effect.)
 
-	The evaluation and full syntax of the expressions after the URL
-	is defined by the <a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> specification [[!MEDIAQ]].
-	If the media query does not match,
+	The evaluation and full syntax of the <a>import conditions</a>
+	is defined by the <a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> [[!MEDIAQ]]
+	and <a href="http://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> [[!CSS3-CONDITIONAL]] specifications.
+	If the conditions do not match,
 	the rules in the imported stylesheet do not apply,
-	exactly as if the imported stylesheet were wrapped in an ''@media'' block with the given media query.
-	User agents may therefore avoid fetching a media-dependent import
-	as long as the media query does not match.
+	exactly as if the imported stylesheet were wrapped in ''@media'' and/or ''@supports'' blocks with the given conditions.
 
 	<div class=example>
 		The following rules illustrate how ''@import'' rules can be made media-dependent:
 
-		<pre>
+		<pre class='lang-css'>
 		@import url("fineprint.css") print;
 		@import url("bluish.css") projection, tv;
 		@import url("narrow.css") handheld and (max-width: 400px);
 		</pre>
 	</div>
 
+	User agents may therefore avoid fetching a conditional import
+	as long as the <a>import conditions</a> do not match.
+	Additionally, if a <<supports-condition>> blocks the application of the imported style sheet,
+	the UA <em>must not</em> fetch the style sheet (unless it is loaded through some other link)
+	and <em>must</em> return null for the import rule's CSSImportRule.styleSheet value
+	(even if it is loaded through some other link).
+
+	<div class="example">
+		The following rule illustrates how an author can provide fallback rules for legacy user agents
+		without impacting network performance on newer user agents:
+
+		<pre class='lang-css'>
+		@import url("fallback-layout.css") supports(not (display: flex));
+		@supports (display: flex) {
+			...
+		}
+		</pre>
+	</div>
+
 	When the same style sheet is imported or linked to a document in multiple places,
 	user agents must process (or act as though they do) each link
-	as though the link were to a separate style sheet.
+	as though the link were to an independent style sheet.
 
 	Note: This does not place any requirements on resource fetching,
 	only how the style sheet is reflected in the CSSOM and used in specs such as this one.
 	Assuming appropriate caching,
 	it is perfectly appropriate for a UA to fetch a style sheet only once,
 	even though it's linked or imported multiple times.
 
-	The <a>origin</a> of an imported style sheet is the same as the <a>origin</a> of the style sheet that imported it.
+	The <a>origin</a> of an imported style sheet is the <a>origin</a> of the style sheet that imported it.
 
 	The <a>environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. [[CSS3SYN]]