Skip to content

Editorial review: Document @supports at-rule() function #44237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hamishwillee merged 1 commit into from
May 29, 2026
Merged

Editorial review: Document @supports at-rule() function #44237

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 42 additions & 3 deletions files/en-us/web/css/reference/at-rules/@supports/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,20 @@ The following example returns true if the browser supports the expression `trans
The function syntax checks if a browser supports values or expressions within the function.
The functions supported in the function syntax are described in the following sections.

#### `at-rule()`

This function checks if a browser supports the specified [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
The following example returns true and applies the contained CSS styles if the browser supports the {{cssxref("@keyframes")}} at-rule:

```css
@supports at-rule(@keyframes) {
}
```

#### `selector()`

This function evaluates if a browser supports the specified selector syntax.
The following example returns true and applies the CSS style if the browser supports the [child combinator](/en-US/docs/Web/CSS/Reference/Selectors/Child_combinator):
The following example returns true and applies the contained CSS styles if the browser supports the [child combinator](/en-US/docs/Web/CSS/Reference/Selectors/Child_combinator):

```css
@supports selector(h2 > p) {
Expand All @@ -91,7 +101,7 @@ The following example returns true and applies the CSS style if the browser supp
#### `font-tech()`

This function checks if a browser supports the specified font technology for layout and rendering.
The following example returns true and applies the CSS style if the browser supports the `COLRv1` font technology:
The following example returns true and applies the contained CSS styles if the browser supports the `COLRv1` font technology:

```css
@supports font-tech(color-COLRv1) {
Expand Down Expand Up @@ -122,7 +132,7 @@ The table below describes the font technologies (`<font-tech>`), including color
#### `font-format()`

This function checks if a browser supports the specified font format for layout and rendering.
The following example returns true and applies the CSS style if the browser supports the `opentype` font format:
The following example returns true and applies the contained CSS styles if the browser supports the `opentype` font format:

```css
@supports font-format(opentype) {
Expand Down Expand Up @@ -339,6 +349,35 @@ body {
}
```

### Testing for the support of an at-rule

The following example applies a set of scoped color scheme styles if the browser supports the {{cssxref("@scope")}} at-rule:

```css
@supports at-rule(@scope) {
@scope (.light-scheme) {
:scope {
background-color: plum;
}

a {
color: darkmagenta;
}
}

@scope (.dark-scheme) {
:scope {
background-color: darkmagenta;
color: antiquewhite;
}

a {
color: plum;
}
}
}
```

## Specifications

{{Specifications}}
Expand Down