You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Defining Custom Support Queries: the ''@supports-query'' rule</h2>
1732
+
<h2 id="supports-condition-rule">
1733
+
Defining Custom Support Queries: the ''@supports-condition'' rule</h2>
1734
1734
1735
-
The <dfn at-rule id="at-ruledef-supports-query">@supports-query</dfn>[=at-rule=] is a [=conditional group rule=] that allows authors to define and name a [=supports query=] for later reuse,
1736
-
creating a <dfn export>named supports query</dfn>.
1735
+
The <dfn at-rule id="at-ruledef-supports-condition">@supports-condition</dfn>[=at-rule=] is a [=conditional group rule=] that allows authors to define and name a [=supports query=] for later reuse,
1736
+
creating a <dfn export>named supports condition</dfn>.
1737
1737
This enables complex or frequently-used feature queries to be referenced by name,
1738
1738
improving maintainability and readability.
1739
1739
1740
1740
<pre class="prod def">
1741
-
@supports-query<<supports-query-name>> {
1741
+
@supports-condition<<supports-condition-name>> {
1742
1742
<<block-contents>>
1743
1743
}
1744
1744
</pre>
1745
1745
1746
-
Where <dfn><<supports-query-name>></dfn> is an <<extension-name>> that defines the name of the supports query.
1746
+
Where <dfn><<supports-condition-name>></dfn> is an <<extension-name>> that defines the name of the supports query.
1747
1747
1748
1748
Anything inside the block is evaluated to test whether the user agent supports the features used.
1749
1749
The contents do not have any effect on the document's rendering.
1750
1750
1751
-
Once defined, the named supports query can be used in subsequent ''@supports'' or ''@when'' conditions.
1751
+
Once defined, the named supports condition can be used in subsequent ''@supports'' or ''@when'' conditions.
1752
1752
1753
-
Multiple ''@supports-query'' rules with the same name in a style sheet are invalid and must be ignored.
1753
+
Multiple ''@supports-condition'' rules with the same name in a style sheet are invalid and must be ignored.
1754
1754
1755
1755
<div class="example">
1756
1756
For example, we can define a supports query checking multiple properties at once:
@@ -1771,7 +1771,7 @@ improving maintainability and readability.
1771
1771
</pre>
1772
1772
</div>
1773
1773
1774
-
''@supports-query'' rules are allowed before ''@import'' and ''@namespace'' rules (after the ''@charset'' rule, if any).
1774
+
''@supports-condition'' rules are allowed before ''@import'' and ''@namespace'' rules (after the ''@charset'' rule, if any).
1775
1775
1776
1776
<div class="example">
1777
1777
As support queries can contain arbitrary declarations,
@@ -1799,7 +1799,7 @@ improving maintainability and readability.
1799
1799
</div>
1800
1800
1801
1801
Issue: The name of the at-rule is under discussion.
1802
-
Alternatives include ''@supports-condition'', ''@supports-test'', and ''@custom-supports''.
1802
+
Alternatives include ''@supports-query'', ''@supports-test'', and ''@custom-supports''.
1803
1803
The name should be consistent with the one chosen for custom media queries.
1804
1804
1805
1805
<h2 id="apis">APIs</h2>
@@ -1864,21 +1864,21 @@ The <code>CSSContainerRule</code> interface</h3>
1864
1864
When measuring layout sizes, it behaves Similar to <code>resizeObserver</code>,
1865
1865
but it provides the additional Container Query syntax and features.
1866
1866
1867
-
<h3 id="the-csssupportsquery-interface">
1868
-
The <code>CSSSupportsQueryRule</code> interface</h3>
1867
+
<h3 id="the-csssupportscondition-interface">
1868
+
The <code>CSSSupportsConditionRule</code> interface</h3>
1869
1869
1870
-
The {{CSSSupportsQueryRule}} interface represents an ''@supports-query'' rule.
1870
+
The {{CSSSupportsConditionRule}} interface represents an ''@supports-condition'' rule.
0 commit comments