CSS @import docs for supports() (#26917)

files/en-us/web/css/@import/index.md

@@ -7,16 +7,21 @@ browser-compat: css.at-rules.import
 
 {{CSSRef}}
 
-The **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to import style rules from other valid stylesheets. An `@import` rule _must_ be defined at the top of stylesheet, before any other at-rule (except [@charset](/en-US/docs/Web/CSS/@charset) and [@layer](/en-US/docs/Web/CSS/@layer)) and style declaration, else it will be ignored.
+The **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to import style rules from other valid stylesheets.
+An `@import` rule _must_ be defined at the top of the stylesheet, before any other at-rule (except [@charset](/en-US/docs/Web/CSS/@charset) and [@layer](/en-US/docs/Web/CSS/@layer)) and style declarations, or it will be ignored.
 
 ## Syntax
 
 ```css
 @import url;
-@import url list-of-media-queries;
 @import url layer;
 @import url layer(layer-name);
+@import url layer(layer-name) supports(supports-condition);
+@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
 @import url layer(layer-name) list-of-media-queries;
+@import url supports(supports-condition);
+@import url supports(supports-condition) list-of-media-queries;
+@import url list-of-media-queries;
 ```
 
 where:
@@ -27,12 +32,20 @@ where:
   - : Is a comma-separated list of [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.
 - _layer-name_
   - : Is the name of a [cascade layer](/en-US/docs/Web/CSS/@layer) into which the contents of the linked resource are imported.
+- _supports-condition_
+  - : Indicates the feature(s) that the browser must support in order for the stylesheet to be imported.
+    If the browser does not conform to the conditions specified in the _supports-condition_, it may not fetch the linked stylesheet, and even if downloaded through some other path, will not load it.
+    The syntax of `supports()` is almost identical to that described in {{CSSxRef("@supports")}}, and that topic can be used as a more complete reference.
 
 ## Description
 
 Imported rules must come before all other types of rules, except {{CSSxRef("@charset")}} rules and layer creating [`@layer`](/en-US/docs/Web/CSS/@layer) statements. The `@import` rule is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
 
-So that {{glossary("user agent", "user agents")}} can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) after the URL. In the absence of any media query, the import is unconditional. Specifying `all` for the `list-of-media-queries` has the same effect.
+So that {{glossary("user agent", "user agents")}} can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) after the URL. In the absence of any media query, the import is not conditional on the media used. Specifying `all` for the `list-of-media-queries` has the same effect.
+
+Similarly, user agents can use the `supports()` function in an `@import` at-rule to only fetch resources if a particular feature set is (or is not) supported.
+This allows authors to take advantage of recently introduced CSS features, while providing graceful fallbacks for older browser versions.
+Note that the conditions in the `supports()` function of an `@import` at-rule can be obtained in JavaScript using {{domxref("CSSImportRule.supportsText")}}.
 
 The `@import` rule can also be used to create a [cascade layer](/en-US/docs/Web/CSS/@layer) by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. 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.
 
@@ -51,7 +64,7 @@ The `@import` rule can also be used to create a [cascade layer](/en-US/docs/Web/
 
 The two examples above show how to specify the _url_ as a `<string>` and as a `url()` function.
 
-### Importing CSS rules conditionally
+### Importing CSS rules conditional on media queries
 
 ```css
 @import url("fineprint.css") print;
@@ -62,6 +75,28 @@ The two examples above show how to specify the _url_ as a `<string>` and as a `u
 
 The `@import` rules in the above examples show media-dependent conditions that will need to be true before the linked CSS rules are applied. So for instance, the last `@import` rule will load the `landscape.css` stylesheet only on a screen device in landscape orientation.
 
+### Importing CSS rules conditional on feature support
+
+```css
+@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
+@import url("flexy.css") supports(not (display: grid) and (display: flex)) screen
+  and (max-width: 400px);
+```
+
+The `@import` rules above illustrate how you might import a layout that uses a grid if `display: grid` is supported, and otherwise imports CSS that uses `display: flex`.
+While you can only have one `supports()` statement, you can combine any number of feature checks with `not`, `and`, and `or`, as long as you wrap each condition to be tested in parentheses.
+You can also use parentheses to indicate precedence.
+Note that if you just have a single declaration then you don't need to wrap it in additional brackets: this is shown in the first example above.
+
+The examples above show support conditions using simple declaration syntax.
+You can also specify CSS functions in `supports()`, and it will evaluate to `true` if they are supported and can be evaluated on the user-agent.
+For example, the code below shows an `@import` that is conditional on both [child combinators](/en-US/docs/Web/CSS/Child_combinator) (`selector()`) and the `font-tech()` function:
+
+```css
+@import url("whatever.css") supports((selector(h2 > p)) and
+    (font-tech(color-COLRv1)));
+```
+
 ### Importing CSS rules into a cascade layer
 
 ```css

files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md

@@ -8,6 +8,9 @@ page-type: guide
 
 **Feature queries** are created using the CSS at-rule [@supports](/en-US/docs/Web/CSS/@supports), and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide CSS that will only run based on the result of that test. In this guide you will learn how to implement progressive enhancement using feature queries.
 
+> **Note:** The CSS at-rule [@import](/en-US/docs/Web/CSS/@import) can similarly use a `supports()` condition, if available, to ensure that stylesheets are not even loaded (and possibly not fetched) if they use features that are not supported.
+> The syntax is almost identical to that described here for `@supports`.
+
 ## Syntax
 
 CSS feature queries are part of the [CSS conditional rules module](/en-US/docs/Web/CSS/CSS_conditional_rules), which also contains the media query [@media](/en-US/docs/Web/CSS/@media) rule; when you use feature queries, you will find they behave in a similar way to media queries. The difference is that with a media query you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features.