> that defines the name of the supports query.
+
+ Anything inside the block is evaluated to test whether the user agent supports the features used.
+ The contents do not have any effect on the document's rendering.
+
+ Once defined, the named supports condition can be used in subsequent ''@supports'' or ''@when'' conditions.
+
+ Multiple ''@supports-condition'' rules with the same name in a style sheet are invalid and must be ignored.
+
+
+ For example, we can define a supports query checking multiple properties at once:
+
+ @supports-condition --thicker-underlines {
+ text-decoration-thickness: 0.2em;
+ text-underline-offset: 0.3em;
+ }
+
+ /* Equivalent to (text-decoration-thickness: 0.2em) and (text-underline-offset: 0.3em) */
+ @supports (--thicker-underlines) {
+ a {
+ text-decoration: underline;
+ text-decoration-thickness: 0.2em;
+ text-underline-offset: 0.3em;
+ }
+ }
+
+
+ As support queries can contain arbitrary declarations,
+ they can be used to detect support for complex features such as nesting:
+
+ @supports-condition --nesting {
+ & { }
+ }
+
+ @import url("nested-styles.css") supports(--nesting);
+
+
+ Support queries can also be used to detect support for at-rules:
+
+ @supports-condition --stuck-container-feature {
+ @container scroll-state(stuck: top) { }
+ }
+
+ @supports (--stuck-container-feature) {
+ div { border-color: navy; }
+ }
+
+
APIs
The CSSContainerRule interface
- The {{CSSContainerRule}} interface represents a ''@container'' rule.
+ The {{CSSContainerRule}} interface represents an ''@container'' rule.
[Exposed=Window]
@@ -1805,6 +1892,23 @@ The CSSContainerRule interface
When measuring layout sizes, it behaves Similar to resizeObserver,
but it provides the additional Container Query syntax and features.
+
+The CSSSupportsConditionRule interface
+
+ The {{CSSSupportsConditionRule}} interface represents an ''@supports-condition'' rule.
+
+
+ [Exposed=Window]
+ interface CSSSupportsConditionRule : CSSGroupingRule {
+ readonly attribute CSSOMString name;
+ };
+
+
+
+ name of type CSSOMString
+ - This attribute is the name of the [=named supports condition=].
+
+
Security Considerations
No security issues have been raised against this document
@@ -1835,18 +1939,17 @@ Changes since the #10544)
-
+ Dimensional query containers no longer apply layout containment
+ (#10544)
Extended [=supports queries=] to express [=at-rule=] capabilities
via ''at-rule()''.
(#2463,
#6966,
#11116,
- #11117)
-
+ #11117)
+ Added ''@supports-condition'' at-rule and related {{CSSSupportsConditionRule}} interface.
+ (#12622)
@@ -1855,7 +1958,7 @@ Changes since the #10874)
+
Added ''@container/stuck/none''-keywords to scroll-state() features (#10874)
Added container-type:scroll-state, and scroll-state() queries for stuck, snapped, and scrollable features
(#6402,
#10784,
@@ -1874,7 +1977,7 @@ Changes since the #8110)
Updated to use the new parsing algorithm names and block production names
Corrected a typo in the grammar of <font-format>
- Corrected extra spaces in the font-tech and font-format productions (#7369 )
+ Corrected extra spaces in the font-tech and font-format productions (#7369)
@@ -1889,6 +1992,7 @@ Additions since Level 4
Moved Container Queries from [[CSS-CONTAIN-3]] to this specification.
(See also the [[CSS-CONTAIN-3#changes]] for more information
on the evolution of this feature.)
+ Added ''@supports-condition'' at-rule and related {{CSSSupportsConditionRule}} interface.
Acknowledgments
@@ -2045,7 +2149,6 @@ Additions since Level 4
js/CSS-supports-CSSStyleDeclaration.html
js/CSS-supports-L3.html
js/CSS-supports-L4.html
- js/CSS-supports-L5.html
js/CSS-supports-selector-detecting-invalid-in-logical-combinations.html
js/conditional-CSSGroupingRule.html
js/supports-conditionText.html