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.

Chrome Edge Firefox Opera Safari Android Browser Chrome (Android) Firefox (Android) Safari (iOS) Samsung Internet
Container Queries10610611094161131131131620
Cascade Layers9999978615.411311311315.418
hwb()101101968715101101961519.0
Viewport Unit Variants1081081019415.411311311315.421
:focus-visible868647215.411311311315.414
Font Palette1011051078715.411311311315.419
Comparison Functions7979756613.111311311313.412
:is()88887875141131131131415
Logical Properties89896676151131131131515
Inert1021021128815.510210211215.519.0
CSS Variables4916313610113113113105
color()111111113981511311311315No
oklch()1111111139715.411111111315.4No
oklab()1111111139715.411111111315.4No
lab()/lch()111111113981511311311315No
color-mix()1111111139716.211111111316.2No
Trigonometry Functions1111111089715.411111110815.4No
Intrinsic & Extrinsic Sizing227911515164.4113113164
:has()105105No9115.4113113No15.420
Colrv1 Font Formats989810786No113113113No18
@property8585No7116.48585No16.414.0
Nesting112112No9816.5113113No16.5No
::target-text8989No75No8989NoNo15.0
Web Share API11695NoNo12.1No11311312.28.2
SubgridNoNo71No16NoNo11316No
Exponential FunctionsNoNo112No15.4NoNo11215.4No
Numeric ConstantsNoNo108No15.4NoNo10815.4No
Stepped Value FunctionsNoNoPNo15.4NoNoNo15.4No
Sign-Related FunctionsNoNoNoNo15.4NoNoNo15.4No
Relative ColorsNoNoNoNo16.4NoNoNo16.4No
margin-trimNoNoNoNo16.4NoNoNo16.4No
Scroll TimelineNoNoNoNoNoNoNoNoNoNo
color-contrast()NoNoNoNo15NoNoNo15No
@when/@elseNoNoNoNoNoNoNoNoNoNo
attr()NoNoNoNoNoNoNoNoNoNo

Container Queries CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 16
  • Samsung Internet: 20

Browser support data for css-container-queries comes from caniuse.com and is up-to-date as of .

Cascade Layers CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • 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 .

hwb() CSS

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

Browser support data for hwb comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Viewport Unit Variants CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 15.4
  • Samsung Internet: 21

Browser support data for viewport-unit-variants comes from caniuse.com and is up-to-date as of .

:focus-visible CSS

More discrete condition for focus styles.

Desktop support:

  • Chrome: 86
  • Edge: 86
  • Firefox: 4
  • Opera: 72
  • Safari: 15.4

Mobile support:

  • Android Browser: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • 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 .

Font Palette CSS

Define a palette from a color font.

Desktop support:

  • Chrome: 101
  • Edge: 105
  • Firefox: 107
  • Opera: 87
  • Safari: 15.4

Mobile support:

  • Android Browser: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • 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 .

Comparison Functions CSS

Brings min(), max(), and clamp() to CSS.

Desktop support:

  • Chrome: 79
  • Edge: 79
  • Firefox: 75
  • Opera: 66
  • Safari: 13.1

Mobile support:

  • Android Browser: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 13.4
  • Samsung Internet: 12

Browser support data for css-math-functions comes from caniuse.com and is up-to-date as of .

:is() CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • 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

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 15
  • Samsung Internet: 15

Browser support data for css-logical-props comes from caniuse.com and is up-to-date as of .

Inert HTML

A single 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

Browser support data for mdn-html_global_attributes_inert comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

CSS Variables CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 10
  • Samsung Internet: 5

Browser support data for css-variables comes from caniuse.com and is up-to-date as of .

color() CSS

Specify a color in a different color space.

Desktop support:

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Opera: 98
  • Safari: 15

Mobile support:

  • Android Browser: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 15
  • Samsung Internet: No

Browser support data for css-color-function comes from caniuse.com and is up-to-date as of .

oklch() CSS

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: No

Browser support data for mdn-css_types_color_oklch comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

oklab() CSS

The oklab() 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: No

Browser support data for mdn-css_types_color_oklab comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

lab()/lch() CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 15
  • Samsung Internet: No

Browser support data for css-lch-lab comes from caniuse.com and is up-to-date as of .

color-mix() CSS

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: No

Browser support data for css-color-mix comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Trigonometry Functions CSS

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: No

Browser support data for trig-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Intrinsic & Extrinsic Sizing CSS

Allows defining size using intrinsic values: max-content, min-content, fit-content, and stretch.

Desktop support:

  • Chrome: 22
  • Edge: 79
  • Firefox: 115
  • Opera: 15
  • Safari: 16

Mobile support:

  • Android Browser: 4.4
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): 16
  • Samsung Internet: 4

Browser support data for intrinsic-width comes from caniuse.com and is up-to-date as of .

:has() CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): No
  • Safari (iOS): 15.4
  • Samsung Internet: 20

Browser support data for css-has comes from caniuse.com and is up-to-date as of .

Colrv1 Font Formats CSS

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: 113
  • Chrome (Android): 113
  • Firefox (Android): 113
  • Safari (iOS): No
  • Samsung Internet: 18

Browser support data for colr-v1 comes from caniuse.com and is up-to-date as of .

@property CSS

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: No
  • Opera: 71
  • Safari: 16.4

Mobile support:

  • Android Browser: 85
  • Chrome (Android): 85
  • Firefox (Android): No
  • Safari (iOS): 16.4
  • Samsung Internet: 14.0

Browser support data for mdn-css_at-rules_property comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Nesting CSS

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: 112
  • Edge: 112
  • Firefox: No
  • Opera: 98
  • Safari: 16.5

Mobile support:

  • Android Browser: 113
  • Chrome (Android): 113
  • Firefox (Android): No
  • Safari (iOS): 16.5
  • Samsung Internet: No

Browser support data for css-nesting comes from caniuse.com and is up-to-date as of .

::target-text CSS

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

Browser support data for mdn-css_selectors_target-text comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Web Share API HTML

“A way to allow websites to invoke the native sharing capabilities of the host platform”

Desktop support:

  • Chrome: 116
  • Edge: 95
  • Firefox: No
  • Opera: No
  • Safari: 12.1

Mobile support:

  • Android Browser: No
  • Chrome (Android): 113
  • Firefox (Android): 113
  • 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 .

Subgrid CSS

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): 113
  • Safari (iOS): 16
  • Samsung Internet: No

Browser support data for css-subgrid comes from caniuse.com and is up-to-date as of .

Exponential Functions CSS

Brings pow(), sqrt(), hypot(), log(), and exp() to CSS.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: 112
  • Opera: No
  • Safari: 15.4

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): 112
  • Safari (iOS): 15.4
  • Samsung Internet: No

Browser support data for exponent-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Numeric Constants CSS

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

Browser support data for calc-constants comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Stepped Value Functions CSS

Brings round(), mod(), and rem() to CSS.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: Preview
  • Opera: No
  • Safari: 15.4

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): 15.4
  • Samsung Internet: No

Browser support data for stepped-value-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Sign-Related Functions CSS

Brings abs() and sign() to CSS.

Desktop support:

  • Chrome: No
  • Edge: No
  • Firefox: No
  • Opera: No
  • Safari: 15.4

Mobile support:

  • Android Browser: No
  • Chrome (Android): No
  • Firefox (Android): No
  • Safari (iOS): 15.4
  • Samsung Internet: No

Browser support data for sign-funcs comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Relative Colors CSS

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: 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

Browser support data for relative-colors comes from caniuse.com and is up-to-date as of .

margin-trim CSS

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

Browser support data for mdn-css_properties_margin-trim comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

Scroll Timeline CSS

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 .

color-contrast() CSS

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

Browser support data for css-color-contrast comes from MDN’s browser-compat-data and is up-to-date as of version 5.2.60.

@when/@else CSS

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 .

attr() CSS

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

Browser support data for css3-attr comes from caniuse.com and is up-to-date as of .

Balanced Text CSS

Evenly distributes words across multiple lines to prevent widows.

Because this is still an experimental feature, data is currently unavailable.

Linear Easing Function CSS

Allows defining more complex mathematical functions to describe the rate of change for numerical value changes.

Because this is still an experimental feature, data is currently unavailable.

Array.prototype.at() JavaScript

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

  1. 2 Likes
  2. 1 Link
  3. 1 Repost
  1. # Michelle Barker wrote on

    Nice work! 🙌


  2. Chris Burnell
    # Chris Burnell wrote on

    @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.

    Creating an Embed for CanIUse | bitsofcode