From 0515aaffcc2dca864db495ecca8c93b15c9d6e4e Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 20 Dec 2023 12:34:00 -0800 Subject: [PATCH 01/21] First pass: rewrite mod landing page --- .../web/css/css_conditional_rules/index.md | 73 ++++++++++++++++--- 1 file changed, 62 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index b3cd66a036dea7e..aace10b2a5c4e71 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -2,30 +2,81 @@ title: CSS conditional rules slug: Web/CSS/CSS_conditional_rules page-type: css-module -browser-compat: - - css.at-rules.import - - css.at-rules.media - - css.at-rules.supports - - css.at-rules.document +spec-urls: + - https://drafts.csswg.org/css-conditional-5 + - https://drafts.csswg.org/css-conditional-4 + - https://drafts.csswg.org/css-conditional-3 + --- {{CSSRef}} -The **CSS conditional rules** module lets you define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to. +The **CSS conditional rules** module defines CSS feature and support queries, enabling you define styles that are only is specific conditions are met. Conditions include the capabilities of the processor or the document the style sheet is being applied to. + +The first conditional rule, `@media`, has been around since CSS 2.1. The original implementation's only function was to enable stylesheets based on [media types](/en-US/docs/Web/CSS/@media#media_types). + +The ability to conditionally apply CSS rules has been greatly expanded. CSS conditional rules level 3 added `@supports` to provide browser CSS capability queries and expanded `@media` to enable nesting at-rules and, in conjunction with media features defined in [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries), to targes styles based onquery values or browser and device features, independent of the document being rendered. + +enabling nesting at-rules, enabling providing CSS for all media and feature requirements in a single stylesheet. + +Conditional rules Level 4 added the ability to query support for particular CSS selectors. Level 5 further extends possible queries by adding the generalized conditional rule `@when` and the chained conditional rule `@else`, as well as add font processing to the list of features that can be queried. ## Reference +### Properties + ### At-rules -- {{cssxref("@document")}} - {{cssxref("@media")}} - {{cssxref("@supports")}} -- {{cssxref("@import")}} +- {{cssxref("@when")}} +- {{cssxref("@else")}} + +### Functions + +- [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition) statement +- [`media()`]() statement +- [`selector()`]() notation + +### data types + +- `` +- `` +- `` + +### Interfaces + +- {{domxref("CSSConditionRule")}} +- {{domxref("CSSMediaRule")}} +- {{domxref("CSSSupportsRule")}} +- {{domxref("CSS.supports()")}} method + +## Guides + +## Related concepts + +- [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module + + - [``](/en-US/docs/Web/CSS/@media#media_features) + - [``](/en-US/docs/Web/CSS/@media#media_types) + - [``](/en-US/docs/Web/CSS/@media#logical_operators) + +- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module + + - {{domxref("CSS")}} API + - {{domxref("CSSGroupingRule")}} API + - {{domxref("MediaQueryList")}} API + - {{domxref("CSSOMString")}} API + - {{domxref("CSSRule")}} API + - {{domxref("MediaList")}} interface + - - {{domxref("MediaList.mediaText")}} property + +- [CSS namespaces](/en-US/docs/Web/CSS/CSS_namespaces) module + + - {{cssxref("@namespace")}} ## Specifications {{Specifications}} -## Browser compatibility - -{{Compat}} +## See also \ No newline at end of file From 1fc173611cdc0db51f414a81df3743a9188b6e98 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 26 Dec 2023 12:22:07 -0800 Subject: [PATCH 02/21] add note about non-implemented at-rules per generated content example --- files/en-us/web/css/css_conditional_rules/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index aace10b2a5c4e71..baf93fcf479c518 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -29,8 +29,8 @@ Conditional rules Level 4 added the ability to query support for particular CSS - {{cssxref("@media")}} - {{cssxref("@supports")}} -- {{cssxref("@when")}} -- {{cssxref("@else")}} + +> **Note:** The CSS conditional rules module introduces two at-rules that have not been implemented: `@else` and `@when`. ### Functions From 35a1a5416ae84829f055eeebad98d0a646470f33 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 26 Dec 2023 17:15:54 -0800 Subject: [PATCH 03/21] functions, terms, guide outline --- .../web/css/css_conditional_rules/index.md | 43 ++++++++++++++++--- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index baf93fcf479c518..15e47c20a99a748 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -23,8 +23,6 @@ Conditional rules Level 4 added the ability to query support for particular CSS ## Reference -### Properties - ### At-rules - {{cssxref("@media")}} @@ -34,9 +32,12 @@ Conditional rules Level 4 added the ability to query support for particular CSS ### Functions -- [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition) statement -- [`media()`]() statement -- [`selector()`]() notation +- [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax) +- [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition) +- [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech) +- [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format) + +> **Note:** The CSS conditional rules module introduces a CSS function that has not been implemented: `media()`. ### data types @@ -51,15 +52,28 @@ Conditional rules Level 4 added the ability to query support for particular CSS - {{domxref("CSSSupportsRule")}} - {{domxref("CSS.supports()")}} method +### Terms and glossary definitions + +- "CSS feature queries" +- "supports queries" +- conditional group rule +- media + ## Guides ## Related concepts +- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module + + - {{cssxref("@import")}} at-rule + - [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module - [``](/en-US/docs/Web/CSS/@media#media_features) - [``](/en-US/docs/Web/CSS/@media#media_types) - [``](/en-US/docs/Web/CSS/@media#logical_operators) + - [``]() + - [`not`]() - [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module @@ -69,7 +83,15 @@ Conditional rules Level 4 added the ability to query support for particular CSS - {{domxref("CSSOMString")}} API - {{domxref("CSSRule")}} API - {{domxref("MediaList")}} interface - - - {{domxref("MediaList.mediaText")}} property + - {{domxref("MediaList.mediaText")}} property + +- [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module + + - {{cssxref("@charset")}} + - {{cssxref("at-rule")}} + - [`invalid`](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) + - {{glossary("parse")}} glossary term + - [style rule](/en-US/docs/Web/API/CSSStyleRule) - [CSS namespaces](/en-US/docs/Web/CSS/CSS_namespaces) module @@ -79,4 +101,11 @@ Conditional rules Level 4 added the ability to query support for particular CSS {{Specifications}} -## See also \ No newline at end of file +## See also + +- {{CSSxRef("@supports", "@supports selector()")}} + - : Applies CSS rules after checking browser's support for the specified selector syntax. +- {{CSSxRef("@supports", "@supports font-tech()")}} + - : Applies CSS rules after checking browser's support for the specified font technology. +- {{CSSxRef("@supports", "@supports font-format()")}} + - : Applies CSS rules after checking browser's support for the specified font format. \ No newline at end of file From 3e2bb92978dc275bde65303453b1f4d12fa6e5c3 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 26 Dec 2023 20:19:58 -0800 Subject: [PATCH 04/21] files/en-us/web/css/css_conditional_rules/using_feature_queries --- .../using_feature_queries/index.md | 38 +++++++++++++++---- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 98b23af846ef422..80b19e89a6ea54b 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -6,28 +6,51 @@ page-type: guide {{CSSRef}} -**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. +**Feature queries** are conditional group rules that test whether the user agent supports or doesn't support one or more CSS features, such as CSS properties and property values. Feature queries 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`. +Feature queries are created using the CSS at-rule [`@supports`](/en-US/docs/Web/CSS/@supports) (or the `supports()` function within [`@import`](/en-US/docs/Web/CSS/@import) at-rules). ## 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. +CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module, which also defines the media query [`@media`](/en-US/docs/Web/CSS/@media) at-rule. You will find feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_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. -A feature query consists of the `@supports` rule, followed by the property name and value you would like to test for. You may not test for a bare property name such as `display`; the rule requires a property name and a value: +A feature query consists of the `@supports` at-rule followed by the support condition or a `supports()` function and declaration parameter within an `@import` at-rule declaration: ```css -@supports (property: value) { +@supports { CSS rules to apply } + +@import url_to_import supports(); +``` + +For example, we can include a styles sheet if the user-agent supports red` as a valid value for the CSS {{cssxref("color")}} property (hint: it is): + +```css +@supports (color: red) { + CSS rules to apply +} + +@import `/css/styles.css` supports(color: red); ``` If you want to check if a browser supports the `row-gap` property, for example, you would write the following feature query. It doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do. {{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}} -The value part of the property value pair matters more if you are testing for new values of a particular property. A good example would be the `display` property. All browsers support `display`, as `display: block` dates back to CSS1. However the values `display: flex` and `display: grid` are newer. There are often additional values added to properties in CSS, and so the fact that you have to test for property and value means that you can detect support for these values. +The value part of the property value pair matters more if you are testing for new values of a particular property. Expanding on the `color` property, we know that all browsers support `color`, as `color: red`. This dates back to CSS1. However, there are newer color values, like relative colors, that may not be supported, and [system colors](/en-US/docs/Web/CSS/system-color) that are not fully supported. + +```css +@supports (color: AccentColor) { + CSS rules to apply +} + +@import `/css/styles.css` supports(color: AccentColor); +``` + +There are often additional values added to properties in CSS, and so the fact that you have to test for property and value means that you can detect support for these values. + +The most common support condition is a CSS property and value pair within parenthesis, but the `` is not constrained to a single property value pair, or even limited to just CSS property value pairs. ## Testing for lack of support @@ -114,4 +137,3 @@ Feature Queries can help you start to use newer features by enhancing a simpler - The [@supports](/en-US/docs/Web/CSS/@supports) rule - Learn Layout: [Supporting Older Browsers](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) - [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) -- [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) From a870986d6e92b8658427757616a81143e4017f54 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 26 Dec 2023 20:20:44 -0800 Subject: [PATCH 05/21] spec urls, terms, guides, etc --- .../web/css/css_conditional_rules/index.md | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index 15e47c20a99a748..283bad14777d80a 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -3,9 +3,9 @@ title: CSS conditional rules slug: Web/CSS/CSS_conditional_rules page-type: css-module spec-urls: - - https://drafts.csswg.org/css-conditional-5 - - https://drafts.csswg.org/css-conditional-4 - - https://drafts.csswg.org/css-conditional-3 + - https://www.w3.org/TR/css-conditional-5/ + - https://www.w3.org/TR/css-conditional-4/ + - https://www.w3.org/TR/css-conditional-3/ --- @@ -54,13 +54,22 @@ Conditional rules Level 4 added the ability to query support for particular CSS ### Terms and glossary definitions -- "CSS feature queries" -- "supports queries" +- supports queries - conditional group rule - media ## Guides +- [Using CSS feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) + + - : + +- [Using CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) + +- [Supporting older browsers: feature queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) + +- [Browser feature detection: CSS `@supports`](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#supports) + ## Related concepts - [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module @@ -87,15 +96,15 @@ Conditional rules Level 4 added the ability to query support for particular CSS - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module - - {{cssxref("@charset")}} - - {{cssxref("at-rule")}} - - [`invalid`](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) - - {{glossary("parse")}} glossary term - - [style rule](/en-US/docs/Web/API/CSSStyleRule) + - {{cssxref("@charset")}} declaration + - {{cssxref("at-rule")}} term + - [`invalid`](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) term + - {{glossary("parse")}} term + - [style rule](/en-US/docs/Web/API/CSSStyleRule) term - [CSS namespaces](/en-US/docs/Web/CSS/CSS_namespaces) module - - {{cssxref("@namespace")}} + - {{cssxref("@namespace")}} at-rule ## Specifications From 8f308985e6caf54d4aaf5f498f33d0ff7c6a408a Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 27 Dec 2023 00:43:35 -0800 Subject: [PATCH 06/21] rewrite FQ guide --- .../web/css/css_conditional_rules/index.md | 22 +++---- .../using_feature_queries/index.md | 58 ++++++------------- 2 files changed, 28 insertions(+), 52 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index 283bad14777d80a..9f7048104baf3ed 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -32,10 +32,10 @@ Conditional rules Level 4 added the ability to query support for particular CSS ### Functions -- [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax) -- [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition) - [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech) - [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format) +- [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax) +- [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition) > **Note:** The CSS conditional rules module introduces a CSS function that has not been implemented: `media()`. @@ -62,14 +62,20 @@ Conditional rules Level 4 added the ability to query support for particular CSS - [Using CSS feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) - - : + - : Applying CSS rules after checking browser's support for the specified property and value feature queries. - [Using CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) + - : Introduces media queries, their syntax, and the operators and media features that are used to construct media query expressions. + - [Supporting older browsers: feature queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) + - : How to use feature queries to target CSS based on the browser's level of support for modern web features technology. + - [Browser feature detection: CSS `@supports`](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#supports) + - : A look at JavaScript and CSS feature detection, including CSS `@supports`. + ## Related concepts - [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module @@ -81,8 +87,8 @@ Conditional rules Level 4 added the ability to query support for particular CSS - [``](/en-US/docs/Web/CSS/@media#media_features) - [``](/en-US/docs/Web/CSS/@media#media_types) - [``](/en-US/docs/Web/CSS/@media#logical_operators) - - [``]() - - [`not`]() + - [``](/en-US/docs/Web/SVG/Atrributes/media) + - [CSS logical operators](/en-US/docs/Web/CSS/@media#logical_operators) (`not`, `or`, and `and`) - [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module @@ -112,9 +118,3 @@ Conditional rules Level 4 added the ability to query support for particular CSS ## See also -- {{CSSxRef("@supports", "@supports selector()")}} - - : Applies CSS rules after checking browser's support for the specified selector syntax. -- {{CSSxRef("@supports", "@supports font-tech()")}} - - : Applies CSS rules after checking browser's support for the specified font technology. -- {{CSSxRef("@supports", "@supports font-format()")}} - - : Applies CSS rules after checking browser's support for the specified font format. \ No newline at end of file diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 80b19e89a6ea54b..01f489b0f32cfee 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -38,7 +38,9 @@ If you want to check if a browser supports the `row-gap` property, for example, {{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}} -The value part of the property value pair matters more if you are testing for new values of a particular property. Expanding on the `color` property, we know that all browsers support `color`, as `color: red`. This dates back to CSS1. However, there are newer color values, like relative colors, that may not be supported, and [system colors](/en-US/docs/Web/CSS/system-color) that are not fully supported. +The value part of the property value pair matters more if you are testing for new values of a particular property. All browsers support `color`, as `color: red`. This dates back to CSS1. However, there are often additional values added to properties in CSS,like [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative-colors), that may not be supported and [system colors](/en-US/docs/Web/CSS/system-color). Feature queries enable testing property and value pairs, meaning we can detect support for values. + +Expanding on the `color` property example above, here we check if the browser supports the `color: AccentColor` declaration: ```css @supports (color: AccentColor) { @@ -48,9 +50,7 @@ The value part of the property value pair matters more if you are testing for ne @import `/css/styles.css` supports(color: AccentColor); ``` -There are often additional values added to properties in CSS, and so the fact that you have to test for property and value means that you can detect support for these values. - -The most common support condition is a CSS property and value pair within parenthesis, but the `` is not constrained to a single property value pair, or even limited to just CSS property value pairs. +In these examples, we've used feature queries to check if the user-agent supports a single CSS property of a specific value, listing the single declaration within parenthesis. You can test for multiple propperty values or for the lack of support ## Testing for lack of support @@ -76,10 +76,12 @@ You may need to test support for more than one property in your feature query. T } ``` -For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule which checks for both of these things. The following rule will only return true if both `shape-outside: circle()` and `display: grid` are supported by the browser. +For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule that checks for both of these things. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser. {{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}} +## Testing for at least one of multiple features + You can also use `or`, if one property out of a selection could match to enable the CSS you want to use: ```css @@ -94,46 +96,20 @@ This can be particularly useful if a feature is vendor prefixed, as you can test ## Limitations of feature queries -The `@supports` rule tests to see if the browser can parse one or more property/value pairs, and therefore if it claims to support the feature(s). If the property and value pair is understood by the browser it returns a positive response. Therefore feature queries cannot be used to check if a browser supports a thing properly, and without bugs! - -In addition, feature queries cannot test for _partial implementations_. A good example of this is the `gap` property. All browsers that support CSS Grid support `gap` in CSS Grid, however only Firefox supports `gap` in Flexbox. If you test for the `gap` property, because you want to use it in Flexbox, you will get a positive response even though it is not implemented. - -## How to use feature queries for progressive enhancement - -Feature queries are an incredibly useful tool when progressively enhancing a site. They enable you to provide a good solution for all browsers, and an enhanced solution for those browsers that support newer features. - -However, there are browsers that don't support feature queries but also have no support for a feature we want to use. For example, we might want to use CSS Grid, which is not supported in IE11. We can't create a fallback by checking for browsers which do not have support, as IE11 doesn't support feature queries either! In practice however, when using feature queries for progressive enhancement, this doesn't matter. You do however need to structure your CSS in a certain way, writing CSS for non-supporting browsers and overwriting it with the CSS inside the feature query. - -Let's walk through a very simple example where feature queries come in handy, which uses them in the way described above. - -Let's say we want to create a layout of three boxes in a row, and ideally we would like to use [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). However, we would like to have a layout for older browsers using floats. We can start by creating that floated layout with the following code, which gives us three columns. - -{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}} +The `@supports` rule tests to see if the browser can parse one or more property/value pairs, and therefore if it claims to support the feature(s). If the property and value pair is understood by the browser it returns a positive response. Feature queries checks that the declaration would be considered valid by the browser, but can not be used to check if a browser supports a thing properly, and without bugs. Feature queries cannot test for _partial implementations_. -When browsers don't understand a CSS property or value, they ignore it. So we could start enhancing our layout by using CSS Grid. Browsers that do not support grid will ignore the `grid` value of the `display` property. Once a floated item becomes a grid item, the float is removed — something you can read more about in [Supporting Older Browsers](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers). Therefore the grid version should just overwrite the floated one. - -We have a problem however, caused by the `width` property we used on our floated items to make them display as three columns. This is now interpreted by grid as being the width of the column track, not the width of the container as it is for the float. - -{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}} - -What we need is a way to remove the width if `display: grid` is supported. This is exactly the situation feature queries solve. We can set the `width` back to `auto` if grid is supported. - -{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}} - -In the above scenario, it doesn't matter that IE11 doesn't support feature queries or CSS Grid — it would get the floated version anyway, which is then overwritten by browsers that do support grid. - -An alternate way to write the above code is to wrap all of the grid code in a feature query as follows. +## Summary -{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}} +Feature queries are a useful tool when progressively enhancing a site. As we've seen, they enable you to provide a good solution for all browsers, and an enhanced solution for those browsers that support newer properties and values. -This may mean you have a little more code but comes with the benefit of being able to test the fallback by misspelling the property or value name. You can try this in the live example above by changing `display: grid` in the `@supports` rule to `display: grip` or similar. +You don't need to use feature queries to start using new CSS features; CSS error handling means the browser simply ignores CSS it does not yet recognize. However, feature queries are a useful alternative to fallback declarations, and enable writing code once that can eventually be supported everywhere. -## Summary - -Feature Queries can help you start to use newer features by enhancing a simpler display of the site used for older browsers. As you can wrap up the CSS for supporting browsers, you do not run the risk of styles used for the fallback display leaking through, as shown in our grid example above. +Feature queries are not limited to property-value pairs. You can also check support for [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech), [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format), and [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax). ### See also -- The [@supports](/en-US/docs/Web/CSS/@supports) rule -- Learn Layout: [Supporting Older Browsers](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) -- [CSS Grid Layout and Progressive Enhancement](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_progressive_enhancement) +- [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module +- [Using CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) +- [Supporting older browsers: feature queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) +- [Browser feature detection: CSS `@supports`](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#supports) + From 01da4ba328eb72128f98a4ce7bb606bd3cda0398 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 27 Dec 2023 00:47:04 -0800 Subject: [PATCH 07/21] Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/css_conditional_rules/index.md | 9 ++++----- .../css_conditional_rules/using_feature_queries/index.md | 5 ++--- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index 9f7048104baf3ed..e5d236112be7bf1 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -6,18 +6,17 @@ spec-urls: - https://www.w3.org/TR/css-conditional-5/ - https://www.w3.org/TR/css-conditional-4/ - https://www.w3.org/TR/css-conditional-3/ - --- {{CSSRef}} The **CSS conditional rules** module defines CSS feature and support queries, enabling you define styles that are only is specific conditions are met. Conditions include the capabilities of the processor or the document the style sheet is being applied to. -The first conditional rule, `@media`, has been around since CSS 2.1. The original implementation's only function was to enable stylesheets based on [media types](/en-US/docs/Web/CSS/@media#media_types). +The first conditional rule, `@media`, has been around since CSS 2.1. The original implementation's only function was to enable stylesheets based on [media types](/en-US/docs/Web/CSS/@media#media_types). The ability to conditionally apply CSS rules has been greatly expanded. CSS conditional rules level 3 added `@supports` to provide browser CSS capability queries and expanded `@media` to enable nesting at-rules and, in conjunction with media features defined in [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries), to targes styles based onquery values or browser and device features, independent of the document being rendered. -enabling nesting at-rules, enabling providing CSS for all media and feature requirements in a single stylesheet. +enabling nesting at-rules, enabling providing CSS for all media and feature requirements in a single stylesheet. Conditional rules Level 4 added the ability to query support for particular CSS selectors. Level 5 further extends possible queries by adding the generalized conditional rule `@when` and the chained conditional rule `@else`, as well as add font processing to the list of features that can be queried. @@ -68,9 +67,9 @@ Conditional rules Level 4 added the ability to query support for particular CSS - : Introduces media queries, their syntax, and the operators and media features that are used to construct media query expressions. -- [Supporting older browsers: feature queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) +- [Supporting older browsers: feature queries](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) - - : How to use feature queries to target CSS based on the browser's level of support for modern web features technology. + - : How to use feature queries to target CSS based on the browser's level of support for modern web features technology. - [Browser feature detection: CSS `@supports`](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#supports) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 01f489b0f32cfee..a9b26368fa60772 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -38,7 +38,7 @@ If you want to check if a browser supports the `row-gap` property, for example, {{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}} -The value part of the property value pair matters more if you are testing for new values of a particular property. All browsers support `color`, as `color: red`. This dates back to CSS1. However, there are often additional values added to properties in CSS,like [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative-colors), that may not be supported and [system colors](/en-US/docs/Web/CSS/system-color). Feature queries enable testing property and value pairs, meaning we can detect support for values. +The value part of the property value pair matters more if you are testing for new values of a particular property. All browsers support `color`, as `color: red`. This dates back to CSS1. However, there are often additional values added to properties in CSS,like [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative-colors), that may not be supported and [system colors](/en-US/docs/Web/CSS/system-color). Feature queries enable testing property and value pairs, meaning we can detect support for values. Expanding on the `color` property example above, here we check if the browser supports the `color: AccentColor` declaration: @@ -110,6 +110,5 @@ Feature queries are not limited to property-value pairs. You can also check supp - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module - [Using CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) -- [Supporting older browsers: feature queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) +- [Supporting older browsers: feature queries](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) - [Browser feature detection: CSS `@supports`](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#supports) - From 4b38380744b5dde2bd5026105a37b3c1cb6b3043 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 28 Dec 2023 15:56:37 -0800 Subject: [PATCH 08/21] lint kinda works --- files/en-us/web/css/css_conditional_rules/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index e5d236112be7bf1..cdd8fd5cb2f1d9c 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -49,7 +49,7 @@ Conditional rules Level 4 added the ability to query support for particular CSS - {{domxref("CSSConditionRule")}} - {{domxref("CSSMediaRule")}} - {{domxref("CSSSupportsRule")}} -- {{domxref("CSS.supports()")}} method +- {{domxref("CSS.supports_static")}} method ### Terms and glossary definitions @@ -116,4 +116,3 @@ Conditional rules Level 4 added the ability to query support for particular CSS {{Specifications}} ## See also - From 8484774a791223108455b5882f08fb464d416536 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 29 Dec 2023 00:37:50 -0800 Subject: [PATCH 09/21] last links for module page --- .../web/css/css_conditional_rules/index.md | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index cdd8fd5cb2f1d9c..23aac1a49aa641c 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -10,15 +10,17 @@ spec-urls: {{CSSRef}} -The **CSS conditional rules** module defines CSS feature and support queries, enabling you define styles that are only is specific conditions are met. Conditions include the capabilities of the processor or the document the style sheet is being applied to. +The **CSS conditional rules** module defines CSS feature and support queries, enabling you to define styles that are only implemented if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewports. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered. -The first conditional rule, `@media`, has been around since CSS 2.1. The original implementation's only function was to enable stylesheets based on [media types](/en-US/docs/Web/CSS/@media#media_types). +The first CSS conditional rules were [media types](/en-US/docs/Web/CSS/@media#media_types) specifying the intended destination medium for the linked styles. These were set as the value of the HTML {{HTMLElement("link)}} and {{HTMLElement("style)}} elements' `media` attributes or as a comma-separated list of media types within an {{cssxref("@import")}} statement and {{cssxref("@import")}} at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types. -The ability to conditionally apply CSS rules has been greatly expanded. CSS conditional rules level 3 added `@supports` to provide browser CSS capability queries and expanded `@media` to enable nesting at-rules and, in conjunction with media features defined in [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries), to targes styles based onquery values or browser and device features, independent of the document being rendered. +CSS conditional rules now include feature queries; the `@supports` at-rule enables targeting CSS styles based on a user-agent's CSS capabilities. Additional conditions include which selector, font-formats, and font-techs are supported. -enabling nesting at-rules, enabling providing CSS for all media and feature requirements in a single stylesheet. +The CSS conditional rules module also expanded `@media` to enable nesting at-rules with the [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) removing unused media types while adding many media features and conditions that can be targeted. -Conditional rules Level 4 added the ability to query support for particular CSS selectors. Level 5 further extends possible queries by adding the generalized conditional rule `@when` and the chained conditional rule `@else`, as well as add font processing to the list of features that can be queried. +The [CSS container queries module](/en-US/docs/Web/CSS/CSS_container_queries) defines similar conditional rules, but based on an element's parent, rather than the viewport. + +There are plans to further extend possible queries by adding the generalized conditional rule `@when` and the chained conditional rule `@else`. These two at-rules are not yet supported. ## Reference @@ -40,9 +42,9 @@ Conditional rules Level 4 added the ability to query support for particular CSS ### data types -- `` -- `` -- `` +- [``](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntax) +- [``](/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_feature_support) +- `` (see [`supports()`](/en-US/docs/Web/CSS/@import#supports-condition)) ### Interfaces @@ -116,3 +118,7 @@ Conditional rules Level 4 added the ability to query support for particular CSS {{Specifications}} ## See also + +- [CSS container queries](/en-US/docs/Web/CSS/CSS_container_queries) module +- [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module +- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module From b2118911424f7bd13aed43968eca68bf0ea5d802 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 29 Dec 2023 01:23:33 -0800 Subject: [PATCH 10/21] terms --- files/en-us/web/css/css_conditional_rules/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index 23aac1a49aa641c..b1c8bf73a730066 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -10,9 +10,9 @@ spec-urls: {{CSSRef}} -The **CSS conditional rules** module defines CSS feature and support queries, enabling you to define styles that are only implemented if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewports. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered. +The **CSS conditional rules** module defines CSS features and support queries, enabling you to define styles that are only implemented if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewports. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered. -The first CSS conditional rules were [media types](/en-US/docs/Web/CSS/@media#media_types) specifying the intended destination medium for the linked styles. These were set as the value of the HTML {{HTMLElement("link)}} and {{HTMLElement("style)}} elements' `media` attributes or as a comma-separated list of media types within an {{cssxref("@import")}} statement and {{cssxref("@import")}} at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types. +The first CSS conditional rules were [media types](/en-US/docs/Web/CSS/@media#media_types) specifying the intended destination medium for the linked styles. These were set as the value of the HTML {{HTMLElement("link")}} and {{HTMLElement("style")}} elements' `media` attributes or as a comma-separated list of media types within an {{cssxref("@import")}} statement and {{cssxref("@import")}} at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types. CSS conditional rules now include feature queries; the `@supports` at-rule enables targeting CSS styles based on a user-agent's CSS capabilities. Additional conditions include which selector, font-formats, and font-techs are supported. @@ -55,9 +55,9 @@ There are plans to further extend possible queries by adding the generalized con ### Terms and glossary definitions -- supports queries -- conditional group rule -- media +- {{glossary("media/CSS", "Media")}} +- Supports query (See [feature query](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)) +- [Conditional group rule](/en-US/docs/Web/CSS/At-rule#conditional_group_rules) ## Guides From 9128de61b701f36b9e543941e92bcee74bf6746d Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 2 Jan 2024 15:46:28 -0800 Subject: [PATCH 11/21] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/web/css/css_conditional_rules/index.md | 10 +++++----- .../using_feature_queries/index.md | 14 +++++++------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index b1c8bf73a730066..eae1566e2bd6657 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -10,15 +10,15 @@ spec-urls: {{CSSRef}} -The **CSS conditional rules** module defines CSS features and support queries, enabling you to define styles that are only implemented if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewports. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered. +The **CSS conditional rules** module defines CSS media and support queries, enabling you to define styles that are only applied if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewport capabilities. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered. -The first CSS conditional rules were [media types](/en-US/docs/Web/CSS/@media#media_types) specifying the intended destination medium for the linked styles. These were set as the value of the HTML {{HTMLElement("link")}} and {{HTMLElement("style")}} elements' `media` attributes or as a comma-separated list of media types within an {{cssxref("@import")}} statement and {{cssxref("@import")}} at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types. +The first CSS conditional rules were [media types](/en-US/docs/Web/CSS/@media#media_types) specifying the intended destination medium for the linked styles, for example `screen` or `print`. These were set as the value of the HTML {{HTMLElement("link")}} and {{HTMLElement("style")}} elements' `media` attributes or as a comma-separated list of media types within an {{cssxref("@import")}} statement or at-rule. The ability to conditionally apply CSS rules has been greatly expanded since the CSS 2.1 and HTML 4.01 implementations that limited conditional queries to a few media types. CSS conditional rules now include feature queries; the `@supports` at-rule enables targeting CSS styles based on a user-agent's CSS capabilities. Additional conditions include which selector, font-formats, and font-techs are supported. The CSS conditional rules module also expanded `@media` to enable nesting at-rules with the [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) removing unused media types while adding many media features and conditions that can be targeted. -The [CSS container queries module](/en-US/docs/Web/CSS/CSS_container_queries) defines similar conditional rules, but based on an element's parent, rather than the viewport. +The [CSS container queries module](/en-US/docs/Web/CSS/CSS_container_queries) defines similar conditional rules, but based on an element's parent rather than the viewport. There are plans to further extend possible queries by adding the generalized conditional rule `@when` and the chained conditional rule `@else`. These two at-rules are not yet supported. @@ -63,7 +63,7 @@ There are plans to further extend possible queries by adding the generalized con - [Using CSS feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) - - : Applying CSS rules after checking browser's support for the specified property and value feature queries. + - : Selectively applying CSS rules after checking browser support for the specified properties and values via feature queries. - [Using CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) @@ -71,7 +71,7 @@ There are plans to further extend possible queries by adding the generalized con - [Supporting older browsers: feature queries](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers#feature_queries) - - : How to use feature queries to target CSS based on the browser's level of support for modern web features technology. + - : How to use feature queries to target CSS based on the browser's level of support for web features. - [Browser feature detection: CSS `@supports`](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection#supports) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index a9b26368fa60772..771fea4711fb2d2 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -12,7 +12,7 @@ Feature queries are created using the CSS at-rule [`@supports`](/en-US/docs/Web/ ## Syntax -CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module, which also defines the media query [`@media`](/en-US/docs/Web/CSS/@media) at-rule. You will find feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_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. +CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module, which also defines the media query [`@media`](/en-US/docs/Web/CSS/@media) at-rule. Feature queries behave similarly to [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_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. A feature query consists of the `@supports` at-rule followed by the support condition or a `supports()` function and declaration parameter within an `@import` at-rule declaration: @@ -24,7 +24,7 @@ A feature query consists of the `@supports` at-rule followed by the support cond @import url_to_import supports(); ``` -For example, we can include a styles sheet if the user-agent supports red` as a valid value for the CSS {{cssxref("color")}} property (hint: it is): +For example, we can apply a set of styles or import an entire stylesheet if the user-agent supports `red` as a valid value for the CSS {{cssxref("color")}} property: ```css @supports (color: red) { @@ -34,11 +34,11 @@ For example, we can include a styles sheet if the user-agent supports red` as a @import `/css/styles.css` supports(color: red); ``` -If you want to check if a browser supports the `row-gap` property, for example, you would write the following feature query. It doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do. +As another example, if you want to check if a browser supports the `row-gap` property you would write the following feature query. It doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do. {{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}} -The value part of the property value pair matters more if you are testing for new values of a particular property. All browsers support `color`, as `color: red`. This dates back to CSS1. However, there are often additional values added to properties in CSS,like [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative-colors), that may not be supported and [system colors](/en-US/docs/Web/CSS/system-color). Feature queries enable testing property and value pairs, meaning we can detect support for values. +The value part of the property-value pair matters more if you are testing for new values of a particular property. All browsers support `color: red`: this dates back to CSS1. However, there are often additional values added to properties in CSS, like [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors), which may not be supported. Feature queries enable testing property and value pairs, meaning we can detect support for values. Expanding on the `color` property example above, here we check if the browser supports the `color: AccentColor` declaration: @@ -76,7 +76,7 @@ You may need to test support for more than one property in your feature query. T } ``` -For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule that checks for both of these things. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser. +For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule that tests browser support for both of these features. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser. {{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}} @@ -96,11 +96,11 @@ This can be particularly useful if a feature is vendor prefixed, as you can test ## Limitations of feature queries -The `@supports` rule tests to see if the browser can parse one or more property/value pairs, and therefore if it claims to support the feature(s). If the property and value pair is understood by the browser it returns a positive response. Feature queries checks that the declaration would be considered valid by the browser, but can not be used to check if a browser supports a thing properly, and without bugs. Feature queries cannot test for _partial implementations_. +The `@supports` rule tests to see if browsers can parse one or more property/value pairs, and therefore if they claim to support the associated feature(s). If the property/value pairs are understood by a browser it returns a positive response. Feature queries check that declarations are considered valid by a browser, but can't be used to check if it supports a feature properly without bugs or spec violations. Feature queries cannot test for _partial implementations_. ## Summary -Feature queries are a useful tool when progressively enhancing a site. As we've seen, they enable you to provide a good solution for all browsers, and an enhanced solution for those browsers that support newer properties and values. +Feature queries are a useful tool for progressively enhancing a site. They enable you to provide a good solution for all browsers, and an enhanced solution for browsers that support newer properties and values. You don't need to use feature queries to start using new CSS features; CSS error handling means the browser simply ignores CSS it does not yet recognize. However, feature queries are a useful alternative to fallback declarations, and enable writing code once that can eventually be supported everywhere. From fa1e1b2f793a55e43b86777c5f4d7071eb13fc4d Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 2 Jan 2024 15:47:14 -0800 Subject: [PATCH 12/21] Update files/en-us/web/css/css_conditional_rules/index.md --- files/en-us/web/css/css_conditional_rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index eae1566e2bd6657..4f2e8924faff537 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -51,7 +51,7 @@ There are plans to further extend possible queries by adding the generalized con - {{domxref("CSSConditionRule")}} - {{domxref("CSSMediaRule")}} - {{domxref("CSSSupportsRule")}} -- {{domxref("CSS.supports_static")}} method +- {{domxref("CSS.supports_static", "supports()")}} method ### Terms and glossary definitions From ff60699141fd2a5dc0ec62520ce166e026df8d26 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 2 Jan 2024 15:50:22 -0800 Subject: [PATCH 13/21] Update files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md Co-authored-by: Chris Mills --- .../css/css_conditional_rules/using_feature_queries/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 771fea4711fb2d2..eaf48a12226c6ca 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -50,7 +50,7 @@ Expanding on the `color` property example above, here we check if the browser su @import `/css/styles.css` supports(color: AccentColor); ``` -In these examples, we've used feature queries to check if the user-agent supports a single CSS property of a specific value, listing the single declaration within parenthesis. You can test for multiple propperty values or for the lack of support +In these examples, we've used feature queries to check if the user-agent supports a specific value of a CSS property, listing the single declaration within parenthesis. You can test for multiple property values or the lack of support. ## Testing for lack of support From f770d9e68c5cfc6348e49ac3872a911bc6ec66c7 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 17:10:57 -0800 Subject: [PATCH 14/21] fix typos --- files/en-us/web/css/css_conditional_rules/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index 4f2e8924faff537..f250848e73d232a 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -57,7 +57,7 @@ There are plans to further extend possible queries by adding the generalized con - {{glossary("media/CSS", "Media")}} - Supports query (See [feature query](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)) -- [Conditional group rule](/en-US/docs/Web/CSS/At-rule#conditional_group_rules) +- [Conditional group rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules) ## Guides @@ -88,7 +88,7 @@ There are plans to further extend possible queries by adding the generalized con - [``](/en-US/docs/Web/CSS/@media#media_features) - [``](/en-US/docs/Web/CSS/@media#media_types) - [``](/en-US/docs/Web/CSS/@media#logical_operators) - - [``](/en-US/docs/Web/SVG/Atrributes/media) + - [``](/en-US/docs/Web/SVG/Attribute/media) - [CSS logical operators](/en-US/docs/Web/CSS/@media#logical_operators) (`not`, `or`, and `and`) - [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module From 19759954d6d92972f7c63900d706e33463b86612 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 17:24:17 -0800 Subject: [PATCH 15/21] comment before each code example explaining what version of a support query it is --- .../css_conditional_rules/using_feature_queries/index.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index eaf48a12226c6ca..3a52b325e4e34dd 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -17,20 +17,24 @@ CSS feature queries are part of the [CSS conditional rules](/en-US/docs/Web/CSS/ A feature query consists of the `@supports` at-rule followed by the support condition or a `supports()` function and declaration parameter within an `@import` at-rule declaration: ```css +/* `@supports` at-rule */ @supports { CSS rules to apply } +/* `supports()` function */ @import url_to_import supports(); ``` For example, we can apply a set of styles or import an entire stylesheet if the user-agent supports `red` as a valid value for the CSS {{cssxref("color")}} property: ```css +/* `@supports` at-rule */ @supports (color: red) { CSS rules to apply } +/* `supports()` function */ @import `/css/styles.css` supports(color: red); ``` @@ -43,10 +47,12 @@ The value part of the property-value pair matters more if you are testing for ne Expanding on the `color` property example above, here we check if the browser supports the `color: AccentColor` declaration: ```css +/* `@supports` at-rule */ @supports (color: AccentColor) { CSS rules to apply } +/* `supports()` function */ @import `/css/styles.css` supports(color: AccentColor); ``` @@ -57,6 +63,7 @@ In these examples, we've used feature queries to check if the user-agent support In addition to asking the browser if it supports a feature, you can test for the opposite by adding in the `not` keyword: ```css +/* `@supports` at-rule with `not` */ @supports not (property: value) { CSS rules to apply } @@ -71,6 +78,7 @@ The CSS inside the following example feature query will run if the browser does You may need to test support for more than one property in your feature query. To do so, you can include a list of features to test for, separated by `and` keywords: ```css +/* multiple feature `@supports` at-rule */ @supports (property1: value) and (property2: value) { CSS rules to apply } @@ -85,6 +93,7 @@ For example, if the CSS you want to run requires that the browser supports CSS S You can also use `or`, if one property out of a selection could match to enable the CSS you want to use: ```css +/* any feature `@supports` at-rule */ @supports (property1: value) or (property2: value) { CSS rules to apply } From 70737be2dbb313da387e895d5ca6cb20f169962f Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 17:26:58 -0800 Subject: [PATCH 16/21] grammar --- .../css/css_conditional_rules/using_feature_queries/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 3a52b325e4e34dd..039043eb0018369 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -90,7 +90,7 @@ For example, if the CSS you want to run requires that the browser supports CSS S ## Testing for at least one of multiple features -You can also use `or`, if one property out of a selection could match to enable the CSS you want to use: +You can also use `or` to apply CSS only if one or more declarations are supported: ```css /* any feature `@supports` at-rule */ From c57fade133ca1af4e10e90d2b38c30aa9ce09dd7 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 2 Jan 2024 18:17:39 -0800 Subject: [PATCH 17/21] add selector example --- .../using_feature_queries/index.md | 50 ++++++++++++++++++- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 039043eb0018369..c7a571716fa9b57 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -103,6 +103,54 @@ This can be particularly useful if a feature is vendor prefixed, as you can test {{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}} +## Additional feature query options + +Feature queries are not limited to property-value pairs. You can include [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech), [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format), and [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax) functions in your feature query to target CSS based on whether the user-agent supports a specified font technology, font format, or selector syntax, respectively. + +For example, the `selector()` function can be used to import a stylesheet for browsers that support a vendor prefixed pseudo-element: + +```css +/* a `selector()` query within a `supports()` function */ +@import `/css/webkitShadowStyles.css` supports(selector(::-webkit-inner-spin-button)); +``` + +## Examples + +### Browser support test + +In this example, we check if the browser supports {{cssxref("system-color")}}, hiding support with `diplay: none` if the color type is not supported. + +#### HTML + +```html +

+ Your browser does not support `accentcolor` as a color value +

+``` + +#### CSS + +```css +@supports (color: AccentColor) { + p { + color: green; + border: 2px solid; + } + span { + display: none; + } +} +@supports not (color: AccentColor) { + p { + color: red; + } +} +``` + +#### Results + +{{EmbedLiveSample("Browser support test", "600", "50")}} + ## Limitations of feature queries The `@supports` rule tests to see if browsers can parse one or more property/value pairs, and therefore if they claim to support the associated feature(s). If the property/value pairs are understood by a browser it returns a positive response. Feature queries check that declarations are considered valid by a browser, but can't be used to check if it supports a feature properly without bugs or spec violations. Feature queries cannot test for _partial implementations_. @@ -113,8 +161,6 @@ Feature queries are a useful tool for progressively enhancing a site. They enabl You don't need to use feature queries to start using new CSS features; CSS error handling means the browser simply ignores CSS it does not yet recognize. However, feature queries are a useful alternative to fallback declarations, and enable writing code once that can eventually be supported everywhere. -Feature queries are not limited to property-value pairs. You can also check support for [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech), [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format), and [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax). - ### See also - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module From c3205fd313b972b88631917709e3e194048a0164 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 3 Jan 2024 09:21:07 -0800 Subject: [PATCH 18/21] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/web/css/css_conditional_rules/index.md | 2 +- .../css_conditional_rules/using_feature_queries/index.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/index.md b/files/en-us/web/css/css_conditional_rules/index.md index f250848e73d232a..08511ef0db24775 100644 --- a/files/en-us/web/css/css_conditional_rules/index.md +++ b/files/en-us/web/css/css_conditional_rules/index.md @@ -16,7 +16,7 @@ The first CSS conditional rules were [media types](/en-US/docs/Web/CSS/@media#me CSS conditional rules now include feature queries; the `@supports` at-rule enables targeting CSS styles based on a user-agent's CSS capabilities. Additional conditions include which selector, font-formats, and font-techs are supported. -The CSS conditional rules module also expanded `@media` to enable nesting at-rules with the [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) removing unused media types while adding many media features and conditions that can be targeted. +The CSS conditional rules module also expands `@media` to enable nesting at-rules, with the related [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module removing unused media types and adding many media features and conditions that can be targeted. The [CSS container queries module](/en-US/docs/Web/CSS/CSS_container_queries) defines similar conditional rules, but based on an element's parent rather than the viewport. diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index c7a571716fa9b57..b84c4784f88e9bc 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -105,12 +105,12 @@ This can be particularly useful if a feature is vendor prefixed, as you can test ## Additional feature query options -Feature queries are not limited to property-value pairs. You can include [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech), [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format), and [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax) functions in your feature query to target CSS based on whether the user-agent supports a specified font technology, font format, or selector syntax, respectively. +Feature queries are not limited to property-value pairs. You can include [`font-tech()`](/en-US/docs/Web/CSS/@supports#font-tech), [`font-format()`](/en-US/docs/Web/CSS/@supports#font-format), and [`selector()`](/en-US/docs/Web/CSS/@supports#function_syntax) functions in your feature queries to selectively apply CSS based on whether the user-agent supports a specified font technology, font format, or selector syntax, respectively. -For example, the `selector()` function can be used to import a stylesheet for browsers that support a vendor prefixed pseudo-element: +For example, the `selector()` function can be used to import a stylesheet for browsers that support a vendor-prefixed pseudo-element: ```css -/* a `selector()` query within a `supports()` function */ +/* A `selector()` query within a `supports()` function */ @import `/css/webkitShadowStyles.css` supports(selector(::-webkit-inner-spin-button)); ``` @@ -118,7 +118,7 @@ For example, the `selector()` function can be used to import a stylesheet for br ### Browser support test -In this example, we check if the browser supports {{cssxref("system-color")}}, hiding support with `diplay: none` if the color type is not supported. +In this example, we check if the browser supports the `AccentColor` {{cssxref("system-color")}}, hiding support with `display: none` if the color type is not supported. #### HTML From f7b297bb43643cf786899f4c171475db75a3177a Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 3 Jan 2024 13:45:01 -0800 Subject: [PATCH 19/21] missing period --- .../css/css_conditional_rules/using_feature_queries/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index b84c4784f88e9bc..29cc0909046f479 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -124,7 +124,7 @@ In this example, we check if the browser supports the `AccentColor` {{cssxref("s ```html

- Your browser does not support `accentcolor` as a color value + Your browser does not support `accentcolor` as a color value.

``` From df55654952f61cc9f4b9482706f11117ae065364 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 4 Jan 2024 08:58:54 +0000 Subject: [PATCH 20/21] Small tweaks to AccentColor example --- .../css/css_conditional_rules/using_feature_queries/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 29cc0909046f479..122ea25c7784acb 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -118,13 +118,13 @@ For example, the `selector()` function can be used to import a stylesheet for br ### Browser support test -In this example, we check if the browser supports the `AccentColor` {{cssxref("system-color")}}, hiding support with `display: none` if the color type is not supported. +In this example, we check if the browser supports the `AccentColor` {{cssxref("system-color")}} and use `display: none` to change the default "not supported" message to a "supported" message if the color type is supported. #### HTML ```html

- Your browser does not support `accentcolor` as a color value. + Your browser does not support AccentColor as a color value.

``` From 83edd3c337eb0cc92fdcf10b9f003cb3a6c16ad8 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 4 Jan 2024 09:02:13 +0000 Subject: [PATCH 21/21] Update files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../css/css_conditional_rules/using_feature_queries/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md index 122ea25c7784acb..e80dcc6072683e2 100644 --- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md +++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md @@ -124,7 +124,8 @@ In this example, we check if the browser supports the `AccentColor` {{cssxref("s ```html

- Your browser does not support AccentColor as a color value. + Your browser does not support AccentColor as a color + value.

```