Browser Feature Watch
This page serves as an one-stop shop for me to keep track of feature compatability in browsers, ordered by level of support and updated daily.
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.
| Chrome | Edge | Firefox | Opera | Safari | Android Browser | Chrome (Android) | Firefox (Android) | Safari (iOS) | Samsung Internet | |
|---|---|---|---|---|---|---|---|---|---|---|
| Cascade Layers | 99 | 99 | 97 | 86 | 15.4 | 107 | 107 | 106 | 15.4 | 18 |
| :focus-visible | 86 | 86 | 4 | 72 | 15.4 | 107 | 107 | 106 | 15.4 | 14 |
| :is() | 88 | 88 | 78 | 75 | 14 | 107 | 107 | 106 | 14 | 15 |
| Logical Properties | 89 | 89 | 66 | 76 | 15 | 107 | 107 | 106 | 15 | 15 |
| Font Palette | 101 | 105 | 107 | 87 | 15.4 | 107 | 107 | No | 15.4 | 19 |
| Container Queries | 106 | 106 | 109 | 92 | 16 | 107 | 107 | No | 16 | No |
| :has() | 105 | 105 | No | 91 | 15.4 | 107 | 107 | No | 15.4 | No |
| Colrv1 Font Formats | 98 | 98 | 107 | 86 | No | 107 | 107 | No | No | 18 |
| Web Share API | 111 | 95 | No | No | 12.1 | No | 107 | 106 | 12.2 | 8.2 |
| Viewport Unit Variants | 108 | No | 101 | No | 15.4 | No | No | 106 | 15.4 | No |
| Subgrid | No | No | 71 | No | 16 | No | No | 106 | 16 | No |
| color() | No | No | No | No | 15 | No | No | No | 15 | No |
| lab()/lch() | No | No | No | No | 15 | No | No | No | 15 | No |
| Nesting | No | No | No | No | No | No | No | No | No | 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 |
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: 107
- Chrome (Android): 107
- Firefox (Android): 106
- Safari (iOS): 15.4
- Samsung Internet: 18
Browser support data for css-cascade-layers comes from caniuse.com and is up-to-date as of .
: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: 107
- Chrome (Android): 107
- Firefox (Android): 106
- Safari (iOS): 15.4
- Samsung Internet: 14
Browser support data for css-focus-visible comes from caniuse.com and is up-to-date as of .
: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: 107
- Chrome (Android): 107
- Firefox (Android): 106
- Safari (iOS): 14
- Samsung Internet: 15
Browser support data for css-matches-pseudo comes from caniuse.com and is up-to-date as of .
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: 107
- Chrome (Android): 107
- Firefox (Android): 106
- Safari (iOS): 15
- Samsung Internet: 15
Browser support data for css-logical-props comes from caniuse.com and is up-to-date as of .
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: 107
- Chrome (Android): 107
- Firefox (Android): No
- Safari (iOS): 15.4
- Samsung Internet: 19
Browser support data for css-font-palette comes from caniuse.com and is up-to-date as of .
Container Queries 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: 109
- Opera: 92
- Safari: 16
Mobile support:
- Android Browser: 107
- Chrome (Android): 107
- Firefox (Android): No
- Safari (iOS): 16
- Samsung Internet: No
Browser support data for css-container-queries comes from caniuse.com and is up-to-date as of .
: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: No
- Opera: 91
- Safari: 15.4
Mobile support:
- Android Browser: 107
- Chrome (Android): 107
- Firefox (Android): No
- Safari (iOS): 15.4
- Samsung Internet: No
Browser support data for css-has comes from caniuse.com and is up-to-date as of .
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: 107
- Chrome (Android): 107
- Firefox (Android): No
- Safari (iOS): No
- Samsung Internet: 18
Browser support data for colr-v1 comes from caniuse.com and is up-to-date as of .
Web Share API web permalink¶
“A way to allow websites to invoke the native sharing capabilities of the host platform”
Desktop support:
- Chrome: 111
- Edge: 95
- Firefox: No
- Opera: No
- Safari: 12.1
Mobile support:
- Android Browser: No
- Chrome (Android): 107
- Firefox (Android): 106
- Safari (iOS): 12.2
- Samsung Internet: 8.2
Browser support data for web-share comes from caniuse.com and is up-to-date as of .
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: No
- Firefox: 101
- Opera: No
- Safari: 15.4
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): 106
- Safari (iOS): 15.4
- Samsung Internet: No
Browser support data for viewport-unit-variants comes from caniuse.com and is up-to-date as of .
Subgrid CSS permalink¶
Allows grid to cascade into children of a grid container, rather than the need for a flat layout.
Desktop support:
- Chrome: No
- Edge: No
- Firefox: 71
- Opera: No
- Safari: 16
Mobile support:
- Android Browser: No
- Chrome (Android): No
- Firefox (Android): 106
- Safari (iOS): 16
- Samsung Internet: No
Browser support data for css-subgrid comes from caniuse.com and is up-to-date as of .
color() CSS permalink¶
Specify a color in a different color space.
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
Browser support data for css-color-function comes from caniuse.com and is up-to-date as of .
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: 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
Browser support data for css-lch-lab comes from caniuse.com and is up-to-date as of .
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: 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
Browser support data for css-nesting comes from caniuse.com and is up-to-date as of .
@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
Browser support data for css-when-else comes from caniuse.com and is up-to-date as of .
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
Browser support data for css-scroll-timeline comes from caniuse.com and is up-to-date as of .
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.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
color-contrast() CSS permalink¶
Given one color, chooses from a list of other colors to output the one with the highest contrast.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
color-mix() CSS permalink¶
Mixes two colors together.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
hwb() CSS permalink¶
Define colors using hue, whiteness, and blackness.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
@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.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
::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.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
Inert HTML permalink¶
A single HTML attribute that allows you designate parts of your document as inactive, disallowing any interaction (mouse/keyboard/otherwise) within those elements.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
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, caniuse.com data is currently unavailable from API.
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.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
Trigonometry Functions CSS permalink¶
I love this stuff and it actually proves very useful if you know how to leverage it! Excited to see them become native.
Because this is still an experimental feature, caniuse.com data is currently unavailable from API.
