Browser Feature Watch
This page serves as an one-stop shop to keep track of feature support across the major, modern browsers, ordered by level of support. Updated automatically daily.
| Chrome | Edge | Firefox | Opera | Safari | Android Browser | Chrome (Android) | Firefox (Android) | Safari (iOS) | Samsung Internet | |
|---|---|---|---|---|---|---|---|---|---|---|
| @container | 106 | 106 | 110 | 94 | 16 | 121 | 121 | 122 | 16 | 20 |
| :has() | 105 | 105 | 121 | 91 | 15.4 | 121 | 121 | 122 | 15.4 | 20 |
| Cascade Layers | 99 | 99 | 97 | 86 | 15.4 | 121 | 121 | 122 | 15.4 | 18 |
| color() | 111 | 111 | 113 | 98 | 15 | 121 | 121 | 122 | 15 | 22 |
| oklch() | 111 | 111 | 113 | 97 | 15.4 | 111 | 111 | 113 | 15.4 | 22.0 |
| oklab() | 111 | 111 | 113 | 97 | 15.4 | 111 | 111 | 113 | 15.4 | 22.0 |
| lab()/lch() | 111 | 111 | 113 | 98 | 15 | 121 | 121 | 122 | 15 | 22 |
| hwb() | 101 | 101 | 96 | 87 | 15 | 101 | 101 | 96 | 15 | 19.0 |
| color-mix() | 111 | 111 | 113 | 97 | 16.2 | 111 | 111 | 113 | 16.2 | 22.0 |
| Viewport Unit Variants | 108 | 108 | 101 | 94 | 15.4 | 121 | 121 | 122 | 15.4 | 21 |
| :focus-visible | 86 | 86 | 4 | 72 | 15.4 | 121 | 121 | 122 | 15.4 | 14 |
| font-palette | 101 | 105 | 107 | 87 | 15.4 | 121 | 121 | 122 | 15.4 | 19 |
| Comparison Functions | 79 | 79 | 75 | 66 | 13.1 | 121 | 121 | 122 | 13.4 | 12 |
| Trigonometry Functions | 111 | 111 | 108 | 97 | 15.4 | 111 | 111 | 108 | 15.4 | 22.0 |
| :is() | 88 | 88 | 78 | 75 | 14 | 121 | 121 | 122 | 14 | 15 |
| Logical Properties | 89 | 89 | 66 | 76 | 15 | 121 | 121 | 122 | 15 | 15 |
| inert Attribute | 102 | 102 | 112 | 88 | 15.5 | 102 | 102 | 112 | 15.5 | 19.0 |
| CSS Variables | 49 | 16 | 31 | 36 | 10 | 121 | 121 | 122 | 10 | 5 |
| linear() | 4 | 12 | 4 | 10.5 | 3.1 | 4 | 18 | 4 | 2 | 1.0 |
| <dialog> | 37 | 79 | 98 | 24 | 15.4 | 121 | 121 | 122 | 15.4 | 4 |
| accent-color | 93 | 93 | 92 | 79 | 15.4 | 93 | 93 | 92 | 15.4 | 17.0 |
| Media Queries Range Syntax | 104 | 104 | 63 | 91 | 16.4 | 121 | 121 | 122 | 16.4 | 20 |
| Nesting | 120 | 120 | 117 | 106 | 17.2 | 121 | 121 | 122 | 17.2 | No |
| subgrid | 117 | 117 | 71 | 103 | 16 | 121 | 121 | 122 | 16 | No |
| Intrinsic & Extrinsic Sizing | 22 | 79 | 125 | 15 | 16 | 4.4 | 121 | 122 | 16 | 4 |
| @property | 85 | 85 | P | 71 | 16.4 | 85 | 85 | No | 16.4 | 14.0 |
| popover Attribute | 114 | 114 | P | 100 | 17 | 114 | 114 | No | 17 | 23.0 |
| Colrv1 Font Formats | 98 | 98 | 107 | 86 | No | 121 | 121 | 122 | No | 18 |
| is Attribute | 67 | 79 | 63 | 54 | No | 67 | 67 | 63 | No | 9.0 |
| Relative Colors | 119 | 119 | No | 106 | 16.4 | 121 | 121 | No | 16.4 | No |
| Web Share API | 124 | 95 | No | No | 12.1 | No | 121 | 122 | 12.2 | 8.2 |
| animation-timeline | 115 | 115 | 110 | 101 | No | 115 | 115 | No | No | 23.0 |
| ::target-text | 89 | 89 | No | 75 | No | 89 | 89 | No | No | 15.0 |
| text-wrap | 114 | 114 | 121 | 99 | No | 121 | 121 | No | No | No |
| View Transition API | 111 | 111 | No | 97 | No | 121 | 121 | No | No | 23 |
| Stepped Value Functions | No | No | 118 | No | 15.4 | No | No | 118 | 15.4 | No |
| Exponential Functions | No | No | 118 | No | 15.4 | No | No | 118 | 15.4 | No |
| Sign-Related Functions | No | No | 118 | No | 15.4 | No | No | 118 | 15.4 | No |
| Numeric Constants | No | No | 108 | No | 15.4 | No | No | 108 | 15.4 | No |
| margin-trim | No | No | No | No | 16.4 | No | No | No | 16.4 | No |
| @scope | No | No | 21 | No | No | No | No | No | No | No |
| color-contrast() | No | No | No | No | 15 | No | No | No | 15 | No |
| @when/@else | No | No | No | No | No | No | No | No | No | No |
| @scroll-timeline | No | No | No | No | No | No | No | No | No | No |
| attr() | No | No | No | No | No | No | No | No | No | No |
@container CSS ✅ Permalink ¶
Like media queries, but even better. Basically, allows us to write context-aware CSS by querying an element’s parent.
Desktop support:
- Chrome: 106
- Edge: 106
- Firefox: 110
- Opera: 94
- Safari: 16
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 16
- Samsung Internet: 20
:has() CSS ✅ Permalink ¶
The fabled “parent selector”! This allows us to finally style an element based on its children.
Desktop support:
- Chrome: 105
- Edge: 105
- Firefox: 121
- Opera: 91
- Safari: 15.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15.4
- Samsung Internet: 20
Cascade Layers CSS ✅ Permalink ¶
Gives us tighter control on the reigns of the cascade. This adds a layer of complexity to specificity in our CSS but allows us to designate different parts of our CSS to different layers, much like the concept of stacking with z-index. This complexity actually makes the practise of overriding selector specificity, using !important (proactively!), and a number of other silly tricks we've added to our toolkit over the years.
Desktop support:
- Chrome: 99
- Edge: 99
- Firefox: 97
- Opera: 86
- Safari: 15.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15.4
- Samsung Internet: 18
color() CSS ✅ Permalink ¶
Specify a color in a different color space.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: 113
- Opera: 98
- Safari: 15
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15
- Samsung Internet: 22
oklch() CSS ✅ Permalink ¶
The oklch() functional notation expresses a given color in the OKLCH color space.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: 113
- Opera: 97
- Safari: 15.4
Mobile support:
- Android Browser: 111
- Chrome (Android): 111
- Firefox (Android): 113
- Safari (iOS): 15.4
- Samsung Internet: 22.0
oklab() CSS ✅ Permalink ¶
The oklab() functional notation expresses a given color in the OKLAB color space.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: 113
- Opera: 97
- Safari: 15.4
Mobile support:
- Android Browser: 111
- Chrome (Android): 111
- Firefox (Android): 113
- Safari (iOS): 15.4
- Samsung Internet: 22.0
lab()/lch() CSS ✅ Permalink ¶
Alternate, more-understandable color functions. lab() defines colors using lightness and a and b values which define the hue. lch() defines colors using lightness, chroma, and hue.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: 113
- Opera: 98
- Safari: 15
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15
- Samsung Internet: 22
hwb() CSS ✅ Permalink ¶
Define colors using hue, whiteness, and blackness.
Desktop support:
- Chrome: 101
- Edge: 101
- Firefox: 96
- Opera: 87
- Safari: 15
Mobile support:
- Android Browser: 101
- Chrome (Android): 101
- Firefox (Android): 96
- Safari (iOS): 15
- Samsung Internet: 19.0
color-mix() CSS ✅ Permalink ¶
Mixes two colors together.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: 113
- Opera: 97
- Safari: 16.2
Mobile support:
- Android Browser: 111
- Chrome (Android): 111
- Firefox (Android): 113
- Safari (iOS): 16.2
- Samsung Internet: 22.0
Viewport Unit Variants CSS ✅ Permalink ¶
Small, large, and dynamic viewport units allow us clearer and more concise definitions for layout.
Desktop support:
- Chrome: 108
- Edge: 108
- Firefox: 101
- Opera: 94
- Safari: 15.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15.4
- Samsung Internet: 21
:focus-visible CSS ✅ Permalink ¶
More discrete condition for focus styles.
Desktop support:
- Chrome: 86
- Edge: 86
- Firefox: 4
- Opera: 72
- Safari: 15.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15.4
- Samsung Internet: 14
font-palette CSS ✅ Permalink ¶
Define a palette from a color font.
Desktop support:
- Chrome: 101
- Edge: 105
- Firefox: 107
- Opera: 87
- Safari: 15.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15.4
- Samsung Internet: 19
Comparison Functions CSS ✅ Permalink ¶
Brings min(), max(), and clamp() to CSS.
Desktop support:
- Chrome: 79
- Edge: 79
- Firefox: 75
- Opera: 66
- Safari: 13.1
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 13.4
- Samsung Internet: 12
Trigonometry Functions CSS ✅ Permalink ¶
Brings sin(), cos(), tan(), asin(), acos(), atan(), and atan2() to CSS.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: 108
- Opera: 97
- Safari: 15.4
Mobile support:
- Android Browser: 111
- Chrome (Android): 111
- Firefox (Android): 108
- Safari (iOS): 15.4
- Samsung Internet: 22.0
:is() CSS ✅ Permalink ¶
Takes a list of selectors as its argument and targets any matching selector in the list. I find it useful for grouping headings, types of elements, and even interaction-based pseudo-classes for anchors, buttons, and the like.
Desktop support:
- Chrome: 88
- Edge: 88
- Firefox: 78
- Opera: 75
- Safari: 14
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 14
- Samsung Internet: 15
Logical Properties CSS ✅ Permalink ¶
Properties used to define size-based values, what we’re used as being width, height, margin-left, and so on, but in such a way that works hand-in-hand with writing-mode without the need to redefine the “top” or “bottom” of an element to do so.
Desktop support:
- Chrome: 89
- Edge: 89
- Firefox: 66
- Opera: 76
- Safari: 15
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15
- Samsung Internet: 15
inert Attribute HTML Permalink ¶
An HTML attribute that allows you designate parts of your document as inactive, disallowing any interaction (mouse/keyboard/otherwise) within those elements.
Desktop support:
- Chrome: 102
- Edge: 102
- Firefox: 112
- Opera: 88
- Safari: 15.5
Mobile support:
- Android Browser: 102
- Chrome (Android): 102
- Firefox (Android): 112
- Safari (iOS): 15.5
- Samsung Internet: 19.0
CSS Variables CSS ✅ Permalink ¶
Allows a declaring of native, cascading variables in CSS.
Desktop support:
- Chrome: 49
- Edge: 16
- Firefox: 31
- Opera: 36
- Safari: 10
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 10
- Samsung Internet: 5
linear() CSS ✅ Permalink ¶
Allows defining more complex mathematical functions to describe the rate of change for numerical value changes.
Desktop support:
- Chrome: 4
- Edge: 12
- Firefox: 4
- Opera: 10.5
- Safari: 3.1
Mobile support:
- Android Browser: 4
- Chrome (Android): 18
- Firefox (Android): 4
- Safari (iOS): 2
- Samsung Internet: 1.0
<dialog> HTML Permalink ¶
An HTML element to create a custom dialog box much like a modal window and includes a backdrop pseudo element.
Desktop support:
- Chrome: 37
- Edge: 79
- Firefox: 98
- Opera: 24
- Safari: 15.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 15.4
- Samsung Internet: 4
accent-color CSS ✅ Permalink ¶
Allows defining the accent color used for UI controls generated by some elements (forms, media, etc.).
Desktop support:
- Chrome: 93
- Edge: 93
- Firefox: 92
- Opera: 79
- Safari: 15.4
Mobile support:
- Android Browser: 93
- Chrome (Android): 93
- Firefox (Android): 92
- Safari (iOS): 15.4
- Samsung Internet: 17.0
Media Queries Range Syntax CSS Permalink ¶
Adds syntax improvements to media queries to better describe ranges and comparison operators.
Desktop support:
- Chrome: 104
- Edge: 104
- Firefox: 63
- Opera: 91
- Safari: 16.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 16.4
- Samsung Internet: 20
Nesting CSS ✅ Permalink ¶
This one is a huge part of what makes Sass/SCSS so appealing to developers. There will always be a value in pre-rendering some parts of our CSS, but I’m excited to see more features like this that will make life easier for developers all the way through from “beginner” to “expert”.
Desktop support:
- Chrome: 120
- Edge: 120
- Firefox: 117
- Opera: 106
- Safari: 17.2
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 17.2
- Samsung Internet: No
subgrid CSS ✅ Permalink ¶
Allows grid to cascade into children of a grid container, rather than the need for a flat layout.
Desktop support:
- Chrome: 117
- Edge: 117
- Firefox: 71
- Opera: 103
- Safari: 16
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 16
- Samsung Internet: No
Intrinsic & Extrinsic Sizing CSS ✅ Permalink ¶
Allows defining size using intrinsic values: max-content, min-content, fit-content, and stretch.
Desktop support:
- Chrome: 22
- Edge: 79
- Firefox: 125
- Opera: 15
- Safari: 16
Mobile support:
- Android Browser: 4.4
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 16
- Samsung Internet: 4
@property CSS ✅ Permalink ¶
Gives us the ability to explicitly define our CSS custom properties, including type-checking, default values, and ability to cascade the value.
Desktop support:
- Chrome: 85
- Edge: 85
- Firefox: Preview
- Opera: 71
- Safari: 16.4
Mobile support:
- Android Browser: 85
- Chrome (Android): 85
- Firefox (Android): No
- Safari (iOS): 16.4
- Samsung Internet: 14.0
popover Attribute HTML Permalink ¶
An HTML attribute to get and set the popover state of an element via JavaScript.
Desktop support:
- Chrome: 114
- Edge: 114
- Firefox: Preview
- Opera: 100
- Safari: 17
Mobile support:
- Android Browser: 114
- Chrome (Android): 114
- Firefox (Android): No
- Safari (iOS): 17
- Samsung Internet: 23.0
Colrv1 Font Formats CSS ✅ Permalink ¶
A font format with additional graphic capabilities: different colours, gradients, and blend modes to name a few.
Desktop support:
- Chrome: 98
- Edge: 98
- Firefox: 107
- Opera: 86
- Safari: No
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): No
- Samsung Internet: 18
is Attribute HTML Permalink ¶
An HTML attribute to allow specifying a standard HTML element to behave like a custom element.
Desktop support:
- Chrome: 67
- Edge: 79
- Firefox: 63
- Opera: 54
- Safari: No
Mobile support:
- Android Browser: 67
- Chrome (Android): 67
- Firefox (Android): 63
- Safari (iOS): No
- Samsung Internet: 9.0
Relative Colors CSS ✅ Permalink ¶
Gives us the ability to generate colours from other colours, with the ability to destructure the colour channels and manipulate them on the way.
Desktop support:
- Chrome: 119
- Edge: 119
- Firefox: No
- Opera: 106
- Safari: 16.4
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): No
- Safari (iOS): 16.4
- Samsung Internet: No
Web Share API HTML Permalink ¶
“A way to allow websites to invoke the native sharing capabilities of the host platform”
Desktop support:
- Chrome: 124
- Edge: 95
- Firefox: No
- Opera: No
- Safari: 12.1
Mobile support:
- Android Browser: No
- Chrome (Android): 121
- Firefox (Android): 122
- Safari (iOS): 12.2
- Samsung Internet: 8.2
animation-timeline CSS ✅ Permalink ¶
Allows specifying a timeline to control the progress of a CSS animation.
Desktop support:
- Chrome: 115
- Edge: 115
- Firefox: 110
- Opera: 101
- Safari: No
Mobile support:
- Android Browser: 115
- Chrome (Android): 115
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: 23.0
::target-text CSS ✅ Permalink ¶
Represents the text that has been scrolled to if the browser supports scroll-to-text fragments, and allows styling similarly to ::selection.
Desktop support:
- Chrome: 89
- Edge: 89
- Firefox: No
- Opera: 75
- Safari: No
Mobile support:
- Android Browser: 89
- Chrome (Android): 89
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: 15.0
text-wrap CSS ✅ Permalink ¶
Evenly distributes words across multiple lines to prevent widows.
Desktop support:
- Chrome: 114
- Edge: 114
- Firefox: 121
- Opera: 99
- Safari: No
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: No
View Transition API CSS ✅ Permalink ¶
Allows defining visual transitions which react to state changes, e.g. navigating between pages.
Desktop support:
- Chrome: 111
- Edge: 111
- Firefox: No
- Opera: 97
- Safari: No
Mobile support:
- Android Browser: 121
- Chrome (Android): 121
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: 23
Stepped Value Functions CSS ✅ Permalink ¶
Brings round(), mod(), and rem() to CSS.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: 118
- Opera: No
- Safari: 15.4
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): 118
- Safari (iOS): 15.4
- Samsung Internet: No
Exponential Functions CSS ✅ Permalink ¶
Brings pow(), sqrt(), hypot(), log(), and exp() to CSS.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: 118
- Opera: No
- Safari: 15.4
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): 118
- Safari (iOS): 15.4
- Samsung Internet: No
Sign-Related Functions CSS ✅ Permalink ¶
Brings abs() and sign() to CSS.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: 118
- Opera: No
- Safari: 15.4
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): 118
- Safari (iOS): 15.4
- Samsung Internet: No
Numeric Constants CSS ✅ Permalink ¶
Brings the numeric constants e and pi to CSS.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: 108
- Opera: No
- Safari: 15.4
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): 108
- Safari (iOS): 15.4
- Samsung Internet: No
margin-trim CSS ✅ Permalink ¶
Allows a container to trim the margins of its children’s adjoining edges.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: No
- Opera: No
- Safari: 16.4
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): No
- Safari (iOS): 16.4
- Samsung Internet: No
@scope CSS Permalink ¶
Allows for CSS rules to be scoped to part of the DOM based on the position of the subject to be styled.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: 21
- Opera: No
- Safari: No
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: No
color-contrast() CSS ✅ Permalink ¶
Given one color, chooses from a list of other colors to output the one with the highest contrast.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: No
- Opera: No
- Safari: 15
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): No
- Safari (iOS): 15
- Samsung Internet: No
@when/@else CSS Permalink ¶
Similar to conditionals in other programming languages. Could be useful for making complex media queries more logical.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: No
- Opera: No
- Safari: No
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: No
@scroll-timeline CSS ✅ Permalink ¶
Native-CSS animations based on scroll position—no more need for JS!
Desktop support:
- Chrome: No
- Edge: No
- Firefox: No
- Opera: No
- Safari: No
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: No
attr() CSS ✅ Permalink ¶
Expands the use of the attr() function by making it available to more properties and by allowing a type or unit
to be passed alongside the targetted attribute. This could be used for things like passing a url
-type attribute to background-image.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: No
- Opera: No
- Safari: No
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: No
Array.prototype.at() JavaScript Permalink ¶
Like indexOf() but allows us to pass a negative integer, rather than hinging upon the array’s length.
Because this is still an experimental feature, data is currently unavailable.
A lot of inspiration for this living collection comes from Michelle Barker, who wrote about upcoming browser features on Smashing Magazine and on CSS { In Real Life }.
Please feel free to suggest new features or even other browsers.
6 Responses
- 2 Likes
- 1 Repost
-
-
"The Browser Feature Watch" by @chrisburnell is a really good idea and very handy.
You can spot more easily and faster the status of the techniques you are interested in. And the CanIUse-visualization is good and handy.
I guess I should "steal" this for my coming site. Coming in a sense of "this year or next ...."
https://chrisburnell.com/feature-watch/
11ty eleventy Browser Feature Watch -
@jensgro I'm glad you find it useful!
"Steal" away, that's the beauty of the web (and open licenses)!
I'd be remiss if I didn't also point out Ire Aderinokun's CanIUse Embed generator
https://bitsofco.de/caniuse-embed/
which is a bit more "portable" imo, as you don't need to integrate the CanIUse API and MDN Browser Compatability Data into your site's build, which also limits the freshness of the data to the most recent website build.
When is :focus-visible visible? | bitsofcode